由于linaria不再主动维护，不推荐文章中的解决方案。Emotion和Linaria是两个具有相似API的CSSinJS解决方案。项目中有特殊场景，希望缩小体积。我们一直都是基于Emotion这个比较大的体量。我们的Emotion现在跟随JavaScript，没有CSS分离。之前我们也尝试过在生产环境中将CSS分离出来，但是因为CSS规则的顺序，效果可控性不够，我们也不想在TypeScript后面套一层Babel。这样我就不想走了。所以目前封装的JavaScript图片上有这么大体积的Emotion代码。Linariajustineo提醒我Emotion可以用Linaria代替，于是我看了一下。这个库的API和Emotion基本一致，我们的写法大致是这样，import{css,cx}from"emotion"letstyleA=css`color:red;`;在Linaria中基本无缝替换，import{css,cx}from"linaria"letstyleA=css`color:red;`;另外我关心的prefixvendor在linaria中也是支持的。其他API也应该与style-components方案保持一致。与Emotion相比，linaria具有比较完善的静态css分离功能。https://callstack.com/blog/ho...简而言之，JS库中的CSS，例如Emotion和StyledComponents，当您的页面在浏览器中加载时解析并应用您的样式，Linaria在您构建时将样式提取到CSS文件您的项目（例如使用webpack）和CSS文件正常加载。感情用过哈有一个静态提取模式，它在某种意义上是有限的，因为它不支持CSS字符串中的插值并且不能使用Emotion的许多功能。Linaria会在构建时评估CSS字符串中的JavaScript变量和函数等插值。推测是去掉了对Emotion部分动态特性的支持，方便CSS的分离。分离过程是通过Babel完成的，所以特殊场景还是需要Babel。本次修改相关配置增加了几个相关依赖，"babel-loader":"^8.0.6","linaria":"^1.3.1","core-js":"^2.6.5","string-replace-loader":"^2.2.0",core-js需要锁版本。如果版本太高，会因为不兼容而报错。string-replace是处理依赖中引用Emotion的代码。我可以手动更改项目中的代码，但是依赖的组件因为被其他项目复用了，所以直接改不太容易。通过Webpack添加配置，将Emotion的依赖指向Linaria（不一定需要）：resolve:{alias:{emotion:"linaria"}}，然后考虑依赖代码引用还早，应该替换已有的引用早期字符串替换：test:/\.js?$/,use:[{loader:"string-replace-loader",options:{search:`"emotion"`,replace:`"linaria"`}}]其他部分主要是Linaria自己的工具和Babel完成的。加载程序：require.resolve("linaria/loader")最后没把css分开，因为需求需要打包成一个js包，所以还是带着style标签运行。打包后，带style-loader和css-的代码loader会显得更大，另外，增加配置让Webpack去掉Node相关的代码，不需要打包在:node:false，CSS部分代码由Linaria处理，以a的形式存在单独的css文件，应该可以去掉style-loader等，直接在标签中引入css，构造时不考虑怎么处理，暂时先不管。其他整体之后处理，Emotion换成style-loader等，体积缩小了20k，压缩后大致等于2k多了一点，还是符合预期的。不过如果有办法可以简化style-loader部分，可以减去，然后找搭建方案。。。前端的其他模块和工具Jimeng的可以查看我们的GitHub主页https://github.com/jimengio。目前团队正在扩充中，招聘文档可在GitHub仓库https://github.com/jimengio/h...中找到。
