Webpack 优化总结

webpack优化可以分为两部分：

1. 开发环境性能优化
2. 生产环境性能优化

开发环境性能优化

• HMR： 热加载。
• source-map： 一种提供代码到构建后代码映射的技术，能够优化代码调试。

生产环境性能优化

• oneOf： 对文件进行匹配解析一次，不用经过每个loader。
• babel缓存： 将运行结果进行缓存，提升下次打开速度，可通过设置cacheDirectory: true或 babel-plugin-transform-runtime插件。
• 缓存： hash | chunkHash | contentHash，提升构建速度。
• tree shaking : 减少代码体积，去除无用代码。使用时需要满足两个条件，必须是ES6模块化，必须是production环境，满足以上两个条件时会自动实现 tree shaking，它会对使用的和未使用的模块进行区分标记，在UglifyJSPlugin阶段会将未使用的模块清除掉。
• code split： 将代码进行分割多个文件，让文件可以并行加载，提升加载速度。
• 多进程打包： 同一时间可以通过打包多个文件，提升打包速度。（注：每个进程开启和交流都会有开销，所以主要是针对消耗时间比较长的任务）
• dll / externals： 对第三方库进行分别进行打包或者通过CDN等方式引入。
• PWA： 使网站在离线状态也可以访问。
• 懒加载/预加载： 使主要资源加载更快，提升首屏打开速度。
• 代码压缩： 减小代码体积。