Webpack5 - 打包优化 Tree Shaking

一. Tree Shaking 是什么

Tree Shaking中文含义是摇树，在webpack中指的是打包时把无用的代码摇掉，以优化打包结果。

二. 如何开启 webpack 的 Tree Shaking

webpack在生产模式（mode: 'production'）下，不会打包进未引用的代码（dead-code）。

1. 开启 Tree Shaking

webpack.config.js:

module.exports = {
    optimization: {
        usedExports: true, // 识别无用代码
        minimize: true,    // 将无用代码在打包中删除
        concatenateModules: true, // 尽可能将所有模块合并输出到一个函数中
    }
}

2. babel-loader 与 tree shaking

使用新版本的 babel-loader 不会导致 webpack tree shaking 失效

也可以在webpack的module.rules中的 babel-loader的配置中，设为如下，则tree shaking不会失效：

{
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: [
                // 如果 modules 设为  commonjs 则tree shaking 会失效
                ['@babel/preset-env', { modules: false }]
            ]
        }
    }
}

3. sideEffects 标识代码是否有副作用

webpack4 中新增了一个叫 sideEffects(副作用)的新特性

标识代码是否有副作用，以便为tree shaking提供更大的代码压缩空间

-如果没有副作用 则没有用到的模块不会被打包

副作用：模块执行时除了导出成员之外所做的事情，比如在一个不导出任何成员的js文件中，为原生类型的prototype上添加了方法，然后在入口文件中 导入（执行）了该文件；或者在入口文件中，导入（执行）了 css 文件，这些都是副作用。

该特性一般用于开发一个 npm 包的情况。

标识代码无副作用：

step1 - webpack.config.js 中开启 sideEffects 功能：

module.exports = {
   optimization: {
      sideEffects: true,  // 开启副作用标识功能
   }
}

step2 - 在package.json中 标识代码是否有副作用：

{
    "sideEffects": false,
}

对于项目中部分文件有副作用的情况，可以这样标识在 package.json 中（但是我试了一下 没生效）：

{
   "sideEffects": [
        "./src/components/link.js",
        "*.css"
   ]
}

本文 完。