原文链接 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年第一篇


小火车
315 声望5 粉丝