webpack学习笔记-webpack的优化总结

总结

我们从四个角度对 webpack 和代码进行优化

1. 提升开发体验

• 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示
• 使用 HotModuleReplacement 让开发时只能重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快

2. 提升webpack打包构建速度

• 使用 OneOf 让资源文件一旦被某个loader处理，就不会继续遍历其他loader。
• 使用 Exclude/Include，排除或只检测某些文件，处理的文件更少。
• 使用 cache 缓存，对 eslint 和 babel处理的结果进行缓存，使第二次打包更快
• 使用 Thread 多进程处理 eslint 和 babel任务，速度更快

3. 减少代码体积

• Tree Shaking 剔除了没有使用的多余代码，让代码体积更小
• 使用 @babel/plugin-transform-runtime 插件对babel进行处理，引入辅助代码，不需要每个文件都生成辅助代码。
• 使用 image/Minizer 对项目中的图片进行压缩。

4. 优化代码运行性能

• 使用 Code Split 对代码进行分割成多个js文件，从而使文件变得更小，加载更快，通过 import 动态导入的语法进行按需加载，从而达到需要使用时加载该资源，不用时不进行加载。
• 使用 Prelaod/Prefetch 对代码进行预加载。
• 使用 runtimeChunk 能对输出资源文件进行更好的命名，将来好做缓存。
• 使用 Core-js 对js进行兼容性处理，让我们代码能运行在低版本的浏览器中。
• 使用 PWA 能让代码进行离线运行。