To optimize css treeshaking in mini programs

WeChat Mini Program Development TutorialThe column will teach you how to optimize css treeshaking in mini programs.

Preface

em...The reason I wrote this tool is to stroke more at work, waste less brains, make fewer mistakes, and get it done once and for all. !
Every time I partially revise an old page, I will not delete the old css. Because it is very troublesome, and I am afraid of accidentally deleting unpredictable styles.
So I basically add new styles to the last line of the css file, and then... the css file gets bigger and bigger. So in order to solve this problem of manually deleting css, a small tool was developed.


Our final effect is to complete css treeshaking through terminal commands

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

Processing the command line

How to receive qts-lint commands globally

Configure the bin field of the package.json file. After global installation, you can recognize the qts-lint xxxx command. Is it very simple?

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

How to receive command line parameters

Use command to receive Command, distinguish whether WeChat or Alipay is executed, and then execute the corresponding logic
I will not introduce the commander in detail, you can read the document yourself

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

Get css dependencies

We talked about how to receive command line commands earlier, and then we get to the point, how to tree shake mini program CSS.
Currently we use the plug-in purify-css to do tree shaking, so we need to obtain the css dependencies to determine which css are not used by the page.

Get all pages of the mini program

All pages of the mini program are maintained in app.json. The format of app.json is as follows

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

So in order to get the main page For all pages in packages and subpackages, you need to cycle pages and subPackages. It is particularly important to note that the routing of subPackages is composed of root pages. Here is how we obtain the routing of all pages in the mini program

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;
}复制代码

Get the dependencies of css

Loop through the obtained pages and obtain the css, js, wxml, and json corresponding to each page.
Save the obtained data

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

But the page still has components and references, so we also need to

1. Get the component css, js, wxml, and if it is a component, add it to the parent page The array also saves its own key-value pair
2. Parses the wxml file, obtains the reference, and adds the reference path to the array
3. Parses the referenced file, determines whether the referenced file still exists, and returns if it exists Step 1
4. Parse the json file, if there is a component, go back to step 1

We mentioned above that we need to parse wxml, so how should we parse it? What about wxml?

You can use htmlparser2 to parse and loop through the nodes to get the tag whose type is tag and whose name is equal to import or include, and then get the src of the tag to get the reference to the page or the reference in the reference.

You will get a css dependency structure like the following (including pages, components, references)

{  // 页面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",
    ...
  ],
  ...
}复制代码

You may have 2 doubts here

Why should the css of the current page be associated with the wxml and js of the component?

Because Alipay has style penetration, and our project is developed by multiple people, we are afraid that the style of the component is written on the page, but the component is not written, so we made this kind of compatibility

Why does the current component’s css also need to be associated with the page’s wxml and js?

There may be a situation where the page passes the component className, but the style enumeration is written in the component. Then the passed className can only be obtained by associating the page. There may be situations where multiple styles are deleted. For example, there are four styles in the style, but only one is actually used, so the other three may be deleted. This is not the effect we want. The current solution The only way is to add the enumerated className annotation in js. Purify-css will not delete the styles in css after checking that the required enumerations of several classNames appear in js.

Delete css

After we obtained the css dependency above, we directly used purify-css to complete the operation of deleting css

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

The weak source code and other plug-ins are placed in Together, if you are interested, you can take a look
Source code link: www.npmjs.com/package/xcx…
npm Global

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

yarn Global

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

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

Related free learning recommendations: WeChat Mini Program Development Tutorial

The above is the detailed content of To optimize css treeshaking in mini programs. For more information, please follow other related articles on the PHP Chinese website!