webpack 4+正确配置purgecss css代码treeshaking

Posted 2022-02-19 飞翔的熊blabla

1.需要使用@next，否则报错，prugecss原来的不支持webpack4

npm i purgecss-webpack-plugin@next -D

2.purgeCss依赖于MiniCssExtractPlugin

所以也要安装相关依赖

npm i -D mini-css-extract-plugin@1.6.0

为什么指定了这个版本没用最新版本，因为我们发现最新版本有兼容问题如下

TypeError: Invalid value used in weak set
    at WeakSet.add (native)

之后是webpack配置,下面是webpack-chain配置方式

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');

config
            .plugin('MiniCssExtractPlugin')
            .use(MiniCssExtractPlugin, [
              
                filename: 'css/[name].[contenthash:8].css',
                chunkFilename: 'css/[name].[contenthash:8].css'
              
            ])

          config
            .plugin('PurgecssWebpackPlugin')
            .use(PurgecssPlugin, [
              
                paths: glob.sync([
                  path.join(__dirname, './src/index.html'),
                  path.join(__dirname, './src/**/*.vue'),
                  path.join(__dirname, './src/**/*.js')
                ])
              
            ])

效果如下

光是element-ui体积之前是500kb 优化后css体积50kb

性能和之前比 TTI快了0.6s, FCP快了0.2s， LCP快了0.1秒

但是UI变形

解决方式

使用白名单放开element-ui css

 config
            .plugin('PurgecssWebpackPlugin')
            .use(PurgecssPlugin, [
              
                paths: glob.sync([
                  // path.join(__dirname, './src/**/*'),
                  path.join(__dirname, './src/index.html'),
                  path.join(__dirname, './src/**/*.vue'),
                  path.join(__dirname, './src/**/*.js')
                ]),
                // safelist: [/^el-/],
                // whitelist: ["html", "body"],
                whitelistPatterns: [/el-.*/],
                // whitelistPatternsChildren: [/^token/, /^pre/, /^code/]
              
            ])

最后效果

之前是500kb 优化后css体积380kb 优化了100kb

文档

https://purgecss.com/plugins/webpack.html#usage