Webpack 的 Tree Shaking

Posted 山水一程

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack 的 Tree Shaking相关的知识,希望对你有一定的参考价值。

  • 为什么要使用 Tree Shaking?
    当从某文件模块中导出(某一个或几个变量、函数、对象等),然而这个文件模块还有许多其它(我们这次并不需要)的导出,webpack会不管三七二十一简单粗暴的将整个模块包含进来,使得我们最终打包的文件里有了许多不需要的垃圾。这就到了tree shaking出手的地方了,因为它能帮助我们干掉那些用不到的代码,大大减少打包的尺寸。

  • 要想让tree shaking能“摇起来”,有几个要求:
    第一个要求,必须使用ES6模块,不能使用其它类型的模块如CommonJS之流。如果使用Babel的话,这里有一个小问题,因为Babel的预案(preset)默认会将任何模块类型都转译成CommonJS类型。修正这个问题也很简单,在.babelrc文件或在webpack.config.js文件中设置modules: false就好了。
// .babelrc

{
  "presets": [
    ["env",
      {
        "modules": false
      }
    ]
  ]
}
// webpack.config.js

module: {
    rules: [
        {
            test: /.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: ‘babel-loader‘,
                options: {
                    presets: [‘env‘, { modules: false }]
                }
            }
        }
    ]
}

第二个要求,需要使用UglifyJsPlugin插件。如果在mode:"production"模式,这个插件已经默认添加了,如果在其它模式下,可以手工添加它。
第三个要求,打开optimization.usedExports。在mode: "production"模式下,它也是默认打开了的。它告诉webpack每个模块明确使用exports。这样之后,webpack会在打包文件中添加诸如/* unused harmony export */这样的注释,其后UglifyJsPlugin插件会对这些注释作出理解。




以上是关于Webpack 的 Tree Shaking的主要内容,如果未能解决你的问题,请参考以下文章

webpack学习--tree-shaking剔除无用代码

Webpack 实现 Tree shaking 的前世今生

tree-shaking还得是rollup,webpack不行?

Webpack 的 Tree Shaking

如何在 Webpack 2 中使用 tree-shaking

第1035期如何在 Webpack 2 中使用 tree-shaking