tree-shaking

tree-shaking

webpack4 的 production 默认开启了 treeshaking

如果是 webpack2 ，可能会不起作用，因为 babel 会将代码转化成 commonjs 模块，而 treeshaking 不支持

options:{presets:[["es2015",{module:false}]]}

使用

// ./webpack.config.js
module.exports = {
  // ... 其他配置项
  optimization: {
    // 模块只导出被使用的成员
    usedExports: true,
    // 尽可能合并每一个模块到一个函数中
    concatenateModules: true,
    // 压缩输出结果
    minimize: false,
  },
};

副作用 side effects

side effects 是指那些当 import 的时候会执行一些动作，但是不一定会有任何 export。比如 ployfill

tree-shaking 不能自动的识别那些代码属于 side effcets 。所以，有些需要手动指定

## pagejson
{
    name:'tree-shaking',
    "sideEffects":false,
    // sideEffects:[
    // './src/common/ployfill.js'
    // ]
}

Webpack 4 中的 Tree Shaking 功能在使用上存在限制：只支持 ES6 类型的模块代码分析，且需要相应的依赖包或需要函数声明为无副作用等。

webpack5

Nested Tree Shaking

Webpack 5 增加了对嵌套模块的导出跟踪功能，能够找到那些嵌套在最内层而未被使用的模块属性。

Inner Module Tree Shaking

Webpack 5 中还增加了分析模块中导出项与导入项的依赖关系的功能。通过 optimization.innerGraph（生产环境下默认开启）选项，Webpack 5 可以分析特定类型导出项中对导入项的依赖关系，从而找到更多未被使用的导入模块并加以移除。

CommonJS Tree Shaking

webpack5 中增加了对部分 CommonJS 风格模块代码的静态分析功功能：

• 支持 exports.xxx、this.exports.xxx、module.exports.xxx 语法的导出分析。
• 支持 object.defineProperty(exports, “xxxx”, …) 语法的导出分析。
• 支持 require(‘xxxx’).xxx 语法的导入分析。

GitHub - webpack/changelog-v5: Temporary repo for the changelog for webpack 5