原文链接 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年第一篇
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。