来优化 小程序中的css treeshaking（优化 改善）

来优化 小程序中的css treeshaking（优化 改善）

微信小程序开发教程栏目带大家学习如何优化小程序中的css treeshaking。

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

前言

// 到项目目录下cd Documents/xxx/xcx// 微信qts-lint css wx// 支付宝qts-lint css alipay复制代码-

处理命令行

如何全局接收qts-lint命令

配置package.json文件的bin字段，全局安装后就可以识别qts-lint xxxx命令啦，是不是很简单

{ "name": "xxx", "version": "1.0.0", "description": "小程序代码", "bin": { "qts-lint": "./bin.js" }}复制代码-

如何接收命令行参数

使用commander接收命令，区分执行的是微信还是支付宝，再去执行对应的逻辑关于commander我就不具体介绍了，大家可以自己看看文档

const program = require("commander");program .command("css ") // 参数 .description("格式化，css tree-shaking") // 描述 .action((type, command) => { // do something... });复制代码-

获取css依赖关系

前面我们说了怎么去接收命令行命令，接下来我们就进入正题，如何对小程序css进行tree shaking。目前我们使用插件purify-css来做tree shaking，所以就需要获取css的依赖关系来确定哪些css是页面没用到的。

获取小程序所有页面

小程序所有页面都在app.json中维护，app.json的格式都是如下所示

{ "pages": [ "pages/index/index", "pages/login/login", ... ], "subPackages": [ { "root": "mine", "pages": [ "/index/index", ... ] } ], ...}复制代码-

所以为了获取主包和分包中的所有页面，就需要去循环pages和subPackages，特别需要注意的是subPackages的路由是由root+pages组合而成的，下方就是我们获取小程序中所有页面路由的方法

function readPages(json = {}, root) { let pages = (json.pages || []).map(p => path.join(root, p)); json.subPackages && json.subPackages.forEach(element => { pages = pages.concat(element.pages.map(p => path.join(root, element.root, p))); }); return pages;}复制代码-

获取css的依赖关系

循环获取到的页面，获取每个页面对应的css，js，wxml，json。保存得到的数据

{ "css url": ["js url", "wxml url", ...]}复制代码-

但是页面还存在组件和引用，所以我们还需要

获取组件css，js，wxml，如果是组件则加入父页面数组的同时保存自身的键值对解析wxml文件，获取引用，将引用路径添加到数组里解析引用的文件，判断是否还存在引用文件，存在回到步骤1解析json文件，存在组件回到步骤1

上面我们说到要解析wxml，那么我们该如何去解析wxml呢？可以使用htmlparser2解析后循环节点，获取type是tag而且name等于import或include的标签，然后再拿到该标签的src，就可以获取到该页面的引用或引用里的引用了这时就会得到一个像下面这样的css依赖关系结构（包括页面，组件，引用）

{ // 页面css "/pages/index/index.css": [ // 页面 "/pages/index/index.js", "/pages/index/index.wxml", // 组件 "/pages/components/title/index.js", "/pages/components/title/index.wxml", // 引用模版 "/pages/template/index.wxml" ], // 组件css "/pages/xxx/xxx.css":[ // 父页面 "/pages/index/index.js", "/pages/index/index.wxml", // 组件的页面 "/pages/index/index.js", "/pages/index/index.wxml", ... ], ...}复制代码-

这里大家可能会有2个疑惑为啥目前页面的css还要关联组件的wxml和js？因为支付宝存在样式穿透，而我们项目是多人开发的，所以怕存在组件的样式在页面写了，组件就没写的情况，所以做了这种兼容

删除css

上面我们获取到css依赖关系后，直接利用purify-css完成删除css的操作啦

purify('css url', [...], options)复制代码-

弱小的我源码和其它插件放在一起，大家有兴趣可以看看哟源码链接：npmjs.com/package/xcx…npm 全局

$ npm i -g xcx-lint-qts复制代码-

yarn 全局

$ yarn global add xcx-lint-qts复制代码-

// 到项目目录下cd Documents/xxx/xcx// 微信qts-lint css wx// 支付宝qts-lint css alipay复制代码-

相关免费学习推荐：微信小程序开发教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。