VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动
华纳云最新优惠促销活动

优化小程序中的css树抖动

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

优化小程序中的css树抖动

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

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 优化小程序中的css树抖动
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!