这篇文章主要介绍了如何优化小程序中的css treeshaking,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
前言 em…我写这工具的原因就是为了上班多划水,少费脑,少犯的错,一劳永逸!
每次局部改版老页面时,我不会去删除老的css。因为很麻烦,而且又害怕不小心删出了不可预估的样式错乱。
所以我基本上都是在css文件的最后一行去添加新的样式,然后……、css文件越来越大。所以为了解决这种手动删除css的问题,开发了一个小工具。
//,到项目目录下cd 文档/xxx/xcx//,微信qts-lint css wx//,支付宝qts-lint css 支付宝复制代码 处理命令行 如何全局接收qts-lint命令 配置包。json文件的本字段,全局安装后就可以识别qts-lint xxxx命令啦,是不是很简单
{,,“name":,“xxx",,,“version":,“1.0.0",,,“description":,“小程序代码”,,,“bin":, {,,,“qts-lint":,“。/bin.js"
,,}
}复制代码 如何接收命令行参数 使用指挥官接收命令,区分执行的是微信还是支付宝,再去执行对应的逻辑
关于指挥官我就不具体介绍了,大家可以自己看看文档
const program =,要求(“commander");
程序
.command才能(“css & lt; app-type>“),//,参数
.description才能(“格式化,css tree-shaking"),//,描述
.action才能(类型,,命令),=祝辞,{,,,//,do 一些……
});才能复制代码 获取css依赖关系 前面我们说了怎么去接收命令行命令,接下来我们就进入正题,如何对小程序css进行树摇晃。
目前我们使用插件purify-css来做树摇晃,所以就需要获取css的依赖关系来确定哪些css是页面没用到的。
获取小程序所有页面 小程序所有页面都在app.json中维护,应用。json的格式都是如下所示
{,,“pages":,(,,,“页面/索引/index",,,,,“页面/登录/login",
,,,…
,,,,,“subPackages":,
,,,{,,,,,,,“root":,“mine",,,,,,,“pages":,(,,,,,,,,,,,,/索引/index",
,,,,,,,,,,,…
,,,,,,,)
,,,}
,,,,
,,,…
}复制代码 所以为了获取主包和分包中的所有页面,就需要去循环页面和子包,特别需要注意的是子包的路由是由根+页面组合而成的,下方就是我们获取小程序中所有页面路由的方法
function readPages (json =,{},,根),{,,,let pages =, (json.pages | |, []) . map (p =祝辞,path.join(根,p));
,,,json.subPackages ,,
,,,,,,,json.subPackages.forEach (element =祝辞,{
,,,,,,,,,,,pages =, pages.concat (element.pages.map (p =祝辞,path.join(根,,element.root,, p)));
,,,,,,,}),,,,,return 页;
}复制代码 获取css的依赖关系 循环获取到的页面,获取每个页面对应的css, js, wxml, json。
保存得到的数据
{,,,“css url":, (“js url",,“wxml url",,…]
}复制代码 但是页面还存在组件和引用,所以我们还需要
<李> 获取组件css, js, wxml,如果是组件则加入父页面数组的同时保存自身的键值对
<李> 解析wxml文件,获取引用,将引用路径添加到数组里
<李> 解析引用的文件,判断是否还存在引用文件,存在回到步骤1
<李> 解析json文件,存在组件回到步骤1
上面我们说到要解析wxml,那么我们该如何去解析wxml呢?
可以使用htmlparser2解析后循环节点,获取类型是标签而且名称等于导入或包含的标签,然后再拿到该标签的src,就可以获取到该页面的引用或引用里的引用了
这时就会得到一个像下面这样的css依赖关系结构(包括页面,组件,引用)
{//才能,页面css
,,,,/页面/索引/index.css":,(,,,//,页面
,,,“/页/索引/index.js",,,,,“/页/索引/index.wxml",,,,,//,组件
,,,,/页面/组件/标题/index.js",,,,,,/页面/组件/标题/index.wxml",,,,,//,引用模版
,,,,/页面/模板/index.wxml"
,,,,,//,组件css
“才能/页面/xxx/xxx.css":[,,,//,父页面
null
null
null
null
null
null
