# tree shaking(摇树优化)

  • 概念:1 个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到bundle 里面去,tree shaking 就是只把用到的方法打入 bundle ,没用到的方法会在uglify 阶段被擦除掉
  • 使用:
    • webpack 默认支持,在 .babelrc 里设置 modules: false 即可
    • production mode的情况下默认开启
  • 要求:
    • 必须是 ES6 的语法,CJS 的方式不支持
    • 需要tree shaking的模块代码是没有副作用的,否则tree shaking会失效
  • Tree Shaking的使用和原理分析

# 无用的 CSS 如何删除掉?

  • PurifyCSS: 遍历代码,识别已经用到的 CSS class,没有用到的已经识别的就会做一个标记。
  • uncss: HTML 需要通过 jsdom 加载,所有的样式通过PostCSS解析,通过document.querySelector 来识别在 html 文件里面不存在的选择器

# 在 webpack 中如何使用 PurifyCSS?

  • purifycss-webpack以停止维护,建议使用purgecss-webpack-plugin

  • 使用 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 = {
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.join(__dirname, 'dist')
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    styles: {
                        name: 'styles',
                        test: /\.css$/,
                        chunks: 'all',
                        enforce: true
                    }
                }
            }
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader"
                    ]
                }
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "[name].css",
            }),
            new PurgecssPlugin({
                //path:您可以使用文件数组指定purgecss应分析的内容。它可以是html,pug,blade,...文件。您可以使用glob或glob-all之类的模块轻松获取文件列表
                paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
            }),
        ]
    }
    

# 参考

更新时间: 5/13/2020, 11:23:00 PM