WebPack打包性能优化

本篇文章参考以下博文

• WebPack实战教程

前言

  平时做项目的时候，最开始是在本地进行调试，调试完成后部署到服务器上，偶尔会出现与本地调试有出入的地方，导致需要重新打包，重新部署，相当耗费时间。

  为解决这一问题，可以使用 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 加入（外）

  内联与外部区别：

1. 外部生成了文件，内联没有。
2. 内联构建速度更快。

  建议：

1. 开发环境下使用： eval-source-map / eval-cheap 。
2. 生产环境下使用： source-map / cheap-module-source-map 。

生产环境性能优化

优化打包构建速度

oneOf

  指定只是用其中一个 loader 。

缓存

   babel 缓存：对进行 es6 转换进行缓存

多进程打包

  提升打包速度，注意：每个进程开启需要约 600ms 的时间，需要权衡项目规模来决定是否开启。

externals

  让某些库不打包，在 html 中通过 CDN 引入进来。

dll

  先把某一库直接打包完成，后续不再打包。需要两个配置文件， dll 和 config 。

优化代码运行性能

缓存（第二次访问速度更块）

1. hash ：文件打包每次都生成一个唯一哈希值，不管文件变不变。
2. chunkhash ：如果打包来自同一个入口，那么就属于同一个 chunk ，共享一个哈希值。
3. contenthash ：根据文件内容声称哈希值，文件内容不同，哈希值一定不同。

tree shaking

  去除业务程序中没有使用的代码，让代码体积更小。（必须开启 es6 模块，生产环境会自动开启）

code split

  单入口： js 文件代码会被加载成一个文件，体积过大，可以吧一个 bundle 拆分成多个，并行加载，提高速度。

  多入口：有几个入口输出几个 bundle 。增加 optimization 后不会重复打包相同文件。

   dll ：对第三方库进行细化打包，生成多个文件。

懒加载 / 预加载

   js 懒加载，用到才加载，不用不加载，异步中执行代码分隔。

   js 预加载：其他资源加载完，再加载（兼容性有待提高）。

PWA

  离线模式下，页面刷新可看到部分内容（目前已废弃）