在小程序中优化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命令。不是很简单吗？

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

const program = require(& quot；指挥官& quot);程序。命令(& quotcss & ltapp -type & gt；")//参数。描述(& quot格式，CSS tree -摇动& quot)//描述。action((type，command)= & gt；{ //做点什么...});复制代码

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

{ & quot页面& quot：

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

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

删除css我们得到上面的css依赖关系后，可以直接使用purify-css来删除css。

Purify('css url '，[...]，选项)复制弱源代码，和其他插件放在一起。有兴趣的可以看看来源链接: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支付宝。

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

• 如何在小程序中打开支付功能(如何在小程序中打开支付)
• 微信小程序有几种推送消息的方式(微信小程序发送消息推送)。
• 了解小程序的无痕埋葬点(小程序埋葬点测试)
• 自定义小程序的动画框/提示框。
• 介绍applet依赖分析的练习(composition介绍applet依赖分析练习)

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