我们可以通过三个角度对webpack进行优化

1. 提升webpack打包构建速度的角度来说

• 使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快
• 使用oneOF让资源文件一旦被某个loader处理了，就不会再继续遍历了，打包速度更快
• 使用Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快
• 使用Cache对eslint和babel处理的结果进行缓存，让第二次打包速度更快
• 使用Thead对多进程处理eslint和babel任务，速度更快。（开启进程都是有开销的，需要在比较多的代码的时候使用才有效果）

2.减少代码体积

• 使用Tree Shaking 提出了没有使用的多余代码，让代码体积变得更小
• 使用@babel/plugin-transform-runtime 插件对babel进行处理，让辅助代码从中引入，而不是每个文件都需要生成辅助代码，从而体积更小
• 使用Image Minimizer 对项目中图片进行压缩，体积更小，请求速度更快（需要注意的是，如果项目中的图片是在线链接就不需要这个，本地静态图片才需要压缩）

3.优化代码运行性能

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