一、Tree shaking
另外一些需要注意的点:
- package.json 中要配置 sideEffects,避免一些不必要的文件(css)也受到 Tree shaking 的影响
- 注意 Babel 默认配置的影响,不要破坏掉了 ES6 模块化的语法。
二、JS 压缩
主要依赖于 terser-webpack-plugin,用来减少 js 文件体积。生产环境下是默认启用的。
三、Webpack 3 引入的作用域提升
基于 ES6 的代码静态分析,Webpack 3 可以得出模块之间的依赖关系,尽可能的将模块放在一个函数中,这一特性被称之为“Scope Hoisting”,翻译为作用域提升。
通过这种方式,代码体积将会更小、执行速度更快。
但前提是基于 ES6 模块化的语法。
四、Babel 优化
- 在需要的地方引入 polyfill
- 辅助函数的按需引入
- 根据目标浏览器按需转换代码
五、Webpack 依赖优化
通过优化依赖的打包,可以提高打包速度,节省开发时间。
- noParse
提高构建速度、直接通知 webpack 忽略较大的库,注意:被忽略的库不能是模块化的(import、require、define)的引入方式。 - DllPlugin
避免打包时对不变的库重复构建,从而提高构建速度。
六、基于 Webpack 的分割打包(split chunks)和代码拆分(split coding)
分割打包到底做些什么呢?
把单个 bundle 文件拆分成若干小的 bundles/chunks,减小首屏加载所需要的资源,从而提高首屏加载的速度,获取更好的用户体验。可以分割打包的通常是第三方资源包、公用资源,分割打包后还可以获取更好的缓存效果。
代码拆分其实就是动态import,import会返回一个Promise对象,如此就可以实现在代码中切分一些点,在需要的时候加载所需的代码。这些点通常是一些事件节点,比如说加载事件结束后可以获取日志代码,用户交互事件获取剩余的组件代码等等。
七、基于 Webpack 资源持久化缓存
- 每个打包的文件有一个唯一的 hash 值(基于 content hash)
- 修改后只有受影响的文件 hash 变化
- 充分利用浏览器缓存
八、Webpack 监测与分析
- Stats 分析与可视化图
- webpack-bundle-analyzer 进行体积分析
- speed-measure-webpack-plugin 速度分析