本篇文章参考以下博文
文章目录
前言
平时做项目的时候，最开始是在本地进行调试，调试完成后部署到服务器上，偶尔会出现与本地调试有出入的地方，导致需要重新打包，重新部署，相当耗费时间。
为解决这一问题，可以使用 webpack 即时打包，查看本地修改后直接自动打包查看最终情况，这种方式直接查看服务器端运行结果，可以快速发现问题，而且用户所见即所得，风险小。
但是当项目比较庞大的时候，那打包速度直接影响了我们开发的效率，本节就总结一下关于 webpack 提升打包速度的一些常用方法，方便以后查看。
开发环境性能优化
HMR（必用）
热模块替换，开发过程中，当某个模块发生变化，只打包变化的模块，未修改的模块不进行重新打包。
html 一般只有一个文件，不需要配置。
css 文件一般会使用 style-loader 这个会默认开启热模块替换功能，也不需要配置
js 文件需要手动配置。
source-map
提供源代码到构建后代码的映射（如果构建后代码出错，通过映射可以追踪到源代码）
[inline- | hidden- | eval-][nosources-][cheap-[module-]] source-map
- source-map ：错误代码准确信息 和 源代码错误位置 （外）
- inline-source-map ：错误代码准确信息 和 源代码错误位置 （内）
- hidden-source-map ：错误代码错误原因，但没有错误位置（外）
- eval-source-map ：每一个文件都生成对应 source-map ，错误代码准确信息 和 源代码错误位置（内）
- nosources-source-map ：错误代码准确信息，但没有任何源代码信息（外）
- cheap-source-map ：错误代码准确信息 和 源代码错误位置。只能精确到行（外）
- cheap-module-source-map ：错误代码准确信息 和 源代码错误位置， module 会将 loader 的 source-map 加入（外）
内联与外部区别：
- 外部生成了文件，内联没有。
- 内联构建速度更快。
建议：
- 开发环境下使用： eval-source-map / eval-cheap 。
- 生产环境下使用： source-map / cheap-module-source-map 。
生产环境性能优化
优化打包构建速度
oneOf
指定只是用其中一个 loader 。
缓存
babel 缓存：对进行 es6 转换进行缓存
多进程打包
提升打包速度，注意：每个进程开启需要约 600ms 的时间，需要权衡项目规模来决定是否开启。
externals
让某些库不打包，在 html 中通过 CDN 引入进来。
dll
先把某一库直接打包完成，后续不再打包。需要两个配置文件， dll 和 config 。
优化代码运行性能
缓存（第二次访问速度更块）
- hash ：文件打包每次都生成一个唯一哈希值，不管文件变不变。
- chunkhash ：如果打包来自同一个入口，那么就属于同一个 chunk ，共享一个哈希值。
- contenthash ：根据文件内容声称哈希值，文件内容不同，哈希值一定不同。
tree shaking
去除业务程序中没有使用的代码，让代码体积更小。（必须开启 es6 模块，生产环境会自动开启）
code split
单入口： js 文件代码会被加载成一个文件，体积过大，可以吧一个 bundle 拆分成多个，并行加载，提高速度。
多入口：有几个入口输出几个 bundle 。增加 optimization 后不会重复打包相同文件。
dll ：对第三方库进行细化打包，生成多个文件。
懒加载 / 预加载
js 懒加载，用到才加载，不用不加载，异步中执行代码分隔。
js 预加载：其他资源加载完，再加载（兼容性有待提高）。
PWA
离线模式下，页面刷新可看到部分内容（目前已废弃）