⚡ 30 秒速记

• 静态模块结构帮助判断哪些导出被使用
• usedExports 标使用情况，删除还依赖优化流程
• sideEffects 描述模块执行能否安全跳过
• 样式和全局注册有副作用，不能一概标成无副作用
• 保留可分析的模块语义，检查转换器与打包器协作

摇树优化是在保留程序行为的前提下，删掉没有用到的代码。 静态导入导出让打包器更容易判断依赖，但一个导出没人用，不代表整个模块都能跳过：模块可能在加载时注册事件或注入样式。sideEffects 正是对这些执行副作用的声明。配置错了会把有用行为一起删掉，所以体积变小之后，还要检查样式、初始化和注册逻辑是否正常。

版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。

Tree Shaking

Tree Shaking 翻译过来的意思就是“摇树”。伴随着摇树的动作，树上的枯树枝和树叶就会掉落下来。

我们这里要介绍的 Tree-shaking 也是同样的道理，不过通过 Tree-shaking “摇掉”的是代码中那些没有用到的部分，这部分没有用的代码更专业的说法应该叫作未引用代码（dead-code）。

Tree-shaking 最早是 Rollup 工具中推出的一个特性，Webpack 从 2.0 过后开始支持这个特性。

我们使用 Webpack 生产模式打包过程中，就会自动开启这个功能，以此来检测我们代码中的未引用代码，然后自动移除它们，从而达到对打包结果的优化。

我们可以先来体验一下这个功能的效果，这里我的源代码非常简单，只有两个文件。

└─ 09-tree-shaking
   ├── src
   │   ├── components.js
   │   └── main.js
   ├── package.json
   └── webpack.config.js

其中 components.js 中导出了一些函数，这些函数各自模拟了一个组件，具体代码如下：

// ./src/components.js
export const Button = () => {
  return document.createElement('button')
  console.log('dead-code')
}
export const Link = () => {
  return document.createElement('a')
}
export const Heading = level => {
  return document.createElement('h' + level)
}