高级 - 总结

高级总结:

我们从4个角度对webpack和代码进行了优化:
​
1. 提升开发体验
使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示

2. 提升webpack打包构建速度
使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码, 不变的代码使用缓存, 从而使更新速度更快
使用OneOf让资源文件一旦被某个loader处理了, 就不会继续遍历了, 打包速度更快
使用Include/Exclude排除或只检测某些文件, 处理的文件更少, 速度更快
使用Cache对eslint和babel处理的结果进行缓存, 让第二次打包速度更快
使用Thread多进程处理eslint和babel任务, 速度更快(需要注意的是, 进程启动通信都有开销的, 要在比较多代码处理时使用才有效果)

3. 减少代码体积
使用TreeShaking剔除了没有使用的多余代码, 让代码体积更小
使用@babel/plugin-transform-runtime插件对babel进行处理, 让辅助代码从中引入,而不是每个文件都生成辅助代码, 从而体积更小
使用Image Minimizer对项目中图片进行压缩, 体积更小, 请求速度更快.(需要注意的是, 如果项目中图片都是在线链接, 那么久不需要了, 本地项目静态图片才需要进行压缩)

4. 优化代码运行性能
使用Code Split对代码进行分割成多个js文件, 从而使单个文件体积更小, 并行加载js速度更快, 并通过import动态导入语法进行按需加载, 从而达到需要使用时才加载该资源, 不用时不加载资源
使用Preload/Prefetch对代码进行提前加载, 等未来需要使用时就能直接使用,从而用户体验更好
使用Network Cache能对输出资源文件进行更好的命名, 将来好做缓存, 从而用户体验更好
使用Core-js对js进行兼容性处理, 让我们代码能运行在低版本浏览器
使用PWA能让代码离线也能访问, 从而提升用户体验