优化小程序中的css树抖动

微信小程序开发教程专栏带你学习如何在小程序中优化css摇树。

前言em...我之所以写这个工具，就是为了工作多划水，少花脑子，少犯错，一劳永逸！我每次部分修改旧页面，都不会删除旧css。因为很麻烦，又怕不小心删了不可预知的风格紊乱。所以我基本上是在css文件的最后一行添加新的样式，然后...css文件变得越来越大。所以为了解决这个手动删除css的问题，开发了一个小工具。我们最后的效果是通过终端命令完成css摇树。

//转到cd Documents/xxx/xcx//微信qts-lint css wx//支付宝qts-lint css支付宝复制代码处理命令行。如何全局接收qts-lint命令配置package.json文件的bin字段，全局安装后就可以识别qts-lint xxxx命令，是不是很简单？

{ 名称 : xxx ， 版本 : 1 . 0 . 0 ；， 描述 : 小程序代码”， bin :{ qts -lint ；: 。/bin . js ；}}如何复制代码接收命令行参数？使用commander接收命令，区分执行的是微信还是支付宝，然后执行相应的逻辑。我就不详细介绍指挥官了。你可以自己看看文档。

const program = require( ；指挥官 );程序。命令( css ltapp -type gt；")//parameter . description(" Formatting，CSS tree -shaking ；)//描述。action ((type，command)= >；{ //做点什么...});复制代码以获取css依赖项。前面我们说了如何接收命令行命令。接下来我们就进入正题，如何为小程序treeshake css。目前我们使用的是plugin purify-css来做树摇，所以需要获取css的依赖关系来确定页面不使用哪个css。

获取applet的所有页面applet的所有页面都在app.json中维护，app.json的格式如下

{ 页面 ：

上面我们谈到了解析wxml，那么如何解析wxml呢？可以使用htmlparser2解析循环节点，得到类型为tag，名称等于import或include的标签，然后得到标签的src，就可以得到页面的引用或者引用中的引用。然后你会得到一个css依赖结构(包括页面、组件和引用)如下图。

{//Page CSS "/pages/index/index . CSS ；：

删除css后，我们可以直接使用Purify -css来删除css。

purify( # 39；css url # 39, [...]，选项)复制我的弱源代码，和其他插件放在一起。有兴趣的可以看看源代码链接:www.npmjs.com/package/xcx...……NPM全球

$ npm i -g xcx-lint-qts复制代码纱线全局

$ yarn global添加xcx-lint-qts复制代码//转到cd文档/xxx/xcx//微信qts-lint css wx//支付宝qts-lint css支付宝复制代码。以上是优化小程序中css摇树的细节。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 在小程序中优化css树抖动。

本文由主机参考刊发，转载请注明：优化小程序中的css树抖动 https://zhujicankao.com/82161.html