说明

玩转 webpack 学习笔记

tree shaking(摇树优化)

概念：1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到 bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在 uglify 阶段被擦除掉。

使用：webpack 默认支持，在 ​​.babelrc​​​ 里设置 ​​modules: false​​ 即可

  • production mode的情况下默认开启

要求：必须是 ES6 的语法，CJS 的方式不支持

这里 js 方面的不多说，具体可以参考我这篇：​​webpack进阶篇（二十一）：Tree Shaking的使用和原理分析​​

无用的 CSS 如何删除掉？

PurifyCSS: 遍历代码，识别已经用到的 CSS class

uncss: HTML 需要通过 jsdom 加载，所有的样式通过 PostCSS 解析，通过 ​​document.querySelector​​ 来识别在 html 文件里面不存在的选择器

在 webpack 中如何使用 PurifyCSS?

使用 purgecss-webpack-plugin：​​https://github.com/FullHuman/purgecss-webpack-plugin​​ 和 mini-css-extract-plugin 配合使用

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

const PATHS = {
    src: path.join(__dirname, 'src')
}

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
        // 路径需要的是绝对路径，多页面需要传递数组，通过 glob 找到符合路径下面的所有的都匹配出来
        new PurgecssPlugin({
            paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
        }),
    ]
}

实战

没有优化掉无用的 css

我们在 search 的css 里添加一个没用使用的类

webpack优化篇（四十八）：使用 Tree Shaking 擦除无用的 JavaScript 和 CSS_webpack

然后我们打包，去 dist 目录里找到 search 的 css 文件，可以看到这个类也打包进去了，我格式化了一下 css 文件

webpack优化篇（四十八）：使用 Tree Shaking 擦除无用的 JavaScript 和 CSS_bundle_02

使用 purgecss-webpack-plugin 优化掉无用的 css

先安装依赖

npm

webpack优化篇（四十八）：使用 Tree Shaking 擦除无用的 JavaScript 和 CSS_webpack_03

添加配置

webpack优化篇（四十八）：使用 Tree Shaking 擦除无用的 JavaScript 和 CSS_bundle_04

webpack优化篇（四十八）：使用 Tree Shaking 擦除无用的 JavaScript 和 CSS_bundle_05

添加好之后，运行打包命令，我们可以看到没有使用的类就被清除掉了。

webpack优化篇（四十八）：使用 Tree Shaking 擦除无用的 JavaScript 和 CSS_css_06