-
提升开发体验
SourceMap：
因为开发环境的时候浏览器运行的是我们webpack编译后的代码，很难发现源代码错误的地方。所以我们需要更加准确的错误提示，来帮助我们更好的开发代码 SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。 它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。
怎么使用
开发模式：cheap-module-source-map：打包编译速度快，只包含行映射
生产模式：source-map，包含行列映射
-
提升打包构建速度
-
HotModuleReplacement
开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢
所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快
-
此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。 但是 js 还不行
js可以用以下来判断。
但日常开发时不常用，一般是用loader来解决
比如：vue-loaderopen in new window, react-hot-loaderopen in new window。
Include/Exclude
Include:包含，只处理 xxx 文件
Exclude:除了不处理处理 xxx 文件，其他文件都处理。
Cache ：对 Eslint 检查 和 Babel 编译结果进行缓存
为什么？
每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。
我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了
-
减少代码体积
Tree Shaking
开发时我们会经常引入一些工具库或者组件库，如果没有特殊处理的话，一般是对整个的工具库或者组件库进行打包的，这样就会使整个项目的体积过大。
Tree Shaking 是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。
webpack已经默认开启这个功能，不用另外单独配置了。
注意：它依赖 ES Module。
Babel：使babel生成的辅助代码作为一个独立模块避免重复引入
@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。
-
优化代码运行性能
Code Split：分割文件和按需加载
- 分割文件：将打包生成的文件进行分割，生成多个 js 文件。
- 按需加载：需要哪个文件就加载哪个文件。
Preload / Prefetch：告诉浏览器立即加载资源和空闲时间加载资源
是什么
Preload：告诉浏览器立即加载资源。Prefetch：告诉浏览器在空闲时才开始加载资源。
它们共同点：
- 都只会加载资源，并不执行。
- 都有缓存。
它们区别：
Preload加载优先级高，Prefetch加载优先级低。Preload只能加载当前页面需要使用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源。
总结：
- 当前页面优先级高的资源用
Preload加载。 - 下一个页面需要使用的资源用
Prefetch加载。
它们的问题：兼容性较差。
- 我们可以去 Can I Useopen in new window 网站查询 API 的兼容性问题。
Preload相对于Prefetch兼容性好一点。
Network Cache
将来开发时我们对静态资源会使用缓存来优化，这样浏览器第二次请求资源就能读取缓存了，速度很快， 但是这样的话就会有一个问题, 因为前后输出的文件名是一样的，都叫 main.js，一旦将来发布新版本，因为文件名没有变化导致浏览器会直接读取缓存，不会加载新资源，项目也就没法更新了。
所以我们从文件名入手，确保更新前后文件名不一样，这样就可以做缓存了
