webpack tree shaking 总结

原文链接 https://www.webpackjs.com/gui...

什么是tree shaking

tree shaking 是一个术语，用于描述移除JavaScript 上下文中的未引用代码

为什么可以实现

它依赖ES2015 模块系统中的静态结构特性，例如import 和export

在webpack 中如何用

版本要求：webpack 4。 在package.json 中添加 sideEffects.

副作用的定义是，在导入时会执行特殊行为的代码，而不是仅仅暴露一个export 或多个export。例如 polyfill, 它影响全局作用域，并且通常不提供export。

• 如果所有代码都不包含副作用，将其设置为false. webpack 就可以安全地删除未用到的export 导出
• 如果你的代码确实有一些副作用，你可以为sideEffects 提供一个数组。

ps: 任何导入的文件都会受到tree shaking 的影响。这意味着，如果在项目中使用类似css-loader 并导入css文件，需要将其添加到side effect 列表中，以免在生成模式中无意将它删除。

压缩输出

设置webpack mode: production 就可以在bundle 中删除那些未被引用的代码

---

2019年第一篇