来优化 小程序中的css treeshaking

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

来优化 小程序中的css treeshaking

前言

em…我写这工具的原因就是为了上班多划水,少费脑,少犯错,一劳永逸!
每次局部改版老页面时,我不会去删除老的css。因为很麻烦,而且又害怕不小心删出了不可预估的样式错乱。
所以我基本上都是在css文件的最后一行去添加新的样式,然后……,css文件越来越大。所以为了解决这种手动删除css的问题,开发了一个小工具。
来优化 小程序中的css treeshaking

我们最终实现效果是通过终端命令去完成css treeshaking

// 到项目目录下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 <app-type>") // 参数
  .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", ...]
}复制代码

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

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

来优化 小程序中的css treeshaking

上面我们说到要解析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也要关联页面的wxml和js?

可能存在页面传组件className,而样式枚举写在组件内的情况,那么只能关联页面才能拿到传入的className。这里可能存在样式多删的情况,比如样式里写里四种样式,但是实际用到的只有一种,那可能就会把其它3种删掉,这就不是我们想要的效果,目前的解决办法只有在js里加上枚举的className注释,purify-css检查到js里出现了需要的几个className的枚举后就不删除css里的样式了

来优化 小程序中的css treeshaking

删除css

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

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

弱小的我源码和其它插件放在一起,大家有兴趣可以看看哟
源码链接:www.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复制代码

相关免费学习

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 来优化 小程序中的css treeshaking https://www.liyege.cn/lyhxcxzdc.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章