开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第18天，点击查看活动详情
前言
前面几篇从四个角度对 webpack 和代码进行了优化,下面就将这些总结起来写成一篇文章，面试必备宝典,每一点都附上了如何使用的文档！
提升开发体验
在提升开发体验这里我们使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。传送门
提升 webpack 提升打包构建速度
- 使用
HotModuleReplacement在开发者模式下更改代码，打包时只会重新打包更改后的代码，对没有修改的代码会调用缓存，从而提升打包构建的速度，提升开发体验。传送门 - 使用
OneOf在我们处理文件时需要用到loader,一个文件只能被一个loader处理，但是每个文件在处理文件时都会将所有loader都遍历一遍，即使找到了对应的loader也不会停止,通过OneOf能够让文件一旦被某个 loader 处理了，就不会继续遍历了,一定程度上提升打包代码的速度。传送门 - 使用
Include/Exclude在babel或者eslint进行代码检测时能够排除或只检测某些文件,这样需要进行检测的文件就会少一点从而提升代码打包速度。传送门 - 使用
Cache对 eslint 和 babel 处理的结果进行缓存，能够让第二次打包速度更快。传送门 - 使用
Thead多进程处理 eslint 和 babel 任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在代码体量到达一定程度时使用才有效果）。传送门
减少代码体积
- 使用
Tree Shaking会在打包代码时将没有引入使用的多余的代码进行排除，不会进行打包，从而减小打包代码的体积。传送门 - 使用
@babel/plugin-transform-runtime插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而减小打包代码的体积。传送门 - 使用
Image Minimizer对项目中图片进行压缩，体积更小，请求速度更快。（只有本地项目静态图片才需要进行压缩）。传送门
优化代码运行性能
- 使用
Code Split对代码进行分割成多个 js 文件，从而使单个文件体积更小，并行加载 js 速度更快。并通过 import 动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不加载资源。传送门（上），传送门（下） - 使用
Preload / Prefetch对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好(兼容性不好)。传送门 - 使用
Network Cache能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好。传送门 - 使用
Core-js对 js 进行兼容性处理，让我们代码能运行在低版本浏览器。传送门 - 使用
PWA能让代码离线也能访问，从而提升用户体验。传送门
小结
通过总结能够让自己对webpack的认识更加深刻,看完这一篇，也许不会用但面对面试官一定能够对答如流(手动狗头)，以更文促进学习，每天一点奇怪的知识！
