Tim的资源站

一、Tree shaking

参考Tree shaking

另外一些需要注意的点：

1. package.json 中要配置 sideEffects，避免一些不必要的文件（css）也受到 Tree shaking 的影响
2. 注意 Babel 默认配置的影响，不要破坏掉了 ES6 模块化的语法。

二、JS 压缩

主要依赖于 terser-webpack-plugin，用来减少 js 文件体积。生产环境下是默认启用的。

三、Webpack 3 引入的作用域提升

基于 ES6 的代码静态分析，Webpack 3 可以得出模块之间的依赖关系，尽可能的将模块放在一个函数中，这一特性被称之为“Scope Hoisting”，翻译为作用域提升。

通过这种方式，代码体积将会更小、执行速度更快。

但前提是基于 ES6 模块化的语法。

四、Babel 优化

1. 在需要的地方引入 polyfill
2. 辅助函数的按需引入
3. 根据目标浏览器按需转换代码

五、Webpack 依赖优化

通过优化依赖的打包，可以提高打包速度，节省开发时间。

1. noParse
   提高构建速度、直接通知 webpack 忽略较大的库，注意：被忽略的库不能是模块化的（import、require、define）的引入方式。
2. DllPlugin
   避免打包时对不变的库重复构建，从而提高构建速度。

六、基于 Webpack 的分割打包（split chunks）和代码拆分（split coding）

分割打包到底做些什么呢？
把单个 bundle 文件拆分成若干小的 bundles/chunks，减小首屏加载所需要的资源，从而提高首屏加载的速度，获取更好的用户体验。可以分割打包的通常是第三方资源包、公用资源，分割打包后还可以获取更好的缓存效果。

代码拆分其实就是动态import，import会返回一个Promise对象，如此就可以实现在代码中切分一些点，在需要的时候加载所需的代码。这些点通常是一些事件节点，比如说加载事件结束后可以获取日志代码，用户交互事件获取剩余的组件代码等等。

七、基于 Webpack 资源持久化缓存

1. 每个打包的文件有一个唯一的 hash 值（基于 content hash）
2. 修改后只有受影响的文件 hash 变化
3. 充分利用浏览器缓存

八、Webpack 监测与分析

1. Stats 分析与可视化图
2. webpack-bundle-analyzer 进行体积分析
3. speed-measure-webpack-plugin 速度分析