前端开发中，Webpack 作为一个打包工具，对于性能的影响非常大。在开发过程中，通过多种手段优化打包速度和代码体积是必要的。其中缓存优化是一个非常重要的方向，既能提高打包速度，又能减少重复打包，进而减少了服务器的压力以及用户的等待时间。本文章将针对 Webpack 缓存优化的实践，从原理、实现以及优化方面，进行详细的介绍。
Webpack 缓存机制原理
在 Webpack 中，缓存机制是通过文件名和哈希值来完成的。每个打包生成的文件都会添加一个哈希码，这个哈希码默认是生成的资源的内容（即使只是重新编译，文件内容也会略有改变）。然后，Webpack 会根据每个文件的哈希码生成对应的缓存文件，如果两次的哈希值相同，Webpack 就会认为它们是同一个文件，不会再次编译和打包，优化了编译和打包速度。
在默认情况下，Webpack 会在每一个模块的生成树（也就是依赖）上添加 hash 值，所以当我们更改了任意一个模块时，与该模块有关的所有模块的 hash 都会发生变化，这样就导致了所有文件都需要重新编译和打包。为了解决这个问题，Webpack 提供了多种缓存优化方案。
实践缓存优化
1. 使用持久缓存
持久缓存是一种将模块的哈希值存在硬盘上的机制，这样即使重新启动 Webpack，也会读取到存储的哈希值，加快构建速度。使用持久缓存的方式可以减少重复的打包和编译。Webpack 4 中，开启持久缓存的方式非常简单，只需要在命令行参数里面加上 --cache 即可。
webpack --config webpack.config.js --cache
2. 使用 HappyPack
HappyPack 是一个使 Webpack 多线程编译的工具库，将每个文件的编译工作拆分成多个 worker 线程以提高编译速度，目前已经不再维护，取而代之的是 hard-source-webpack-plugin。
-- -------------------- ---- -------
----- --------- - ---------------------
----- -- - --------------
-------------- - -
------- -
------ -
-
----- --------
---- -------------------------
--
--
--
-------- -
--- -----------
--- -----
-------- -----------------
-------- ---------------- - --
---
--
--3. 使用缓存插件
缓存插件是可以在 Webpack 编译过程中帮助我们将输出的结果缓存到磁盘上的插件，以便在下次编译时可以直接从缓存中读取结果，而不必重新编译。常用的插件有 hard-source-webpack-plugin 和 cache-loader。
（1）hard-source-webpack-plugin
hard-source-webpack-plugin 是一个 Webpack 插件，它会在内存中缓存中间结果，从而使得之前的构建可以复用。同时，也可以将缓存持久化到硬盘中。因此，它可以保证在大量重复构建的情况下，缩短重构建包的时间。
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ...
plugins: [
new HardSourceWebpackPlugin(),
],
};（2）cache-loader
cache-loader 是一个适用于 loader 的缓存插件，应用于耗时大的 loader，可以显著提高构建速度，根据官网说明，跑一遍 loader 需要的时间越长，使用缓存带来的效果越明显。
loader 的缓存方案有两种，一种是开启全局缓存，第二种是为每个 loader 开启独立缓存。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ----------
---- -
---------------
-
------- ------------
-------- -
-------------- -----
--
--
--
--
--
--
--4. 使用 externals
externals 是指在打包时将一些库、依赖从打包文件中剥离出来，优化打包速度。具体实现方式是在 Webpack 配置文件中配置 externals，这样 Webpack 在构建时会将 externals 指定的依赖排除在打包文件之外。
module.exports = {
// ...
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
};总结
通过本文的介绍，我们可以知道 Webpack 缓存优化的方案有很多，但是每个方案适用的时候都不同，需要根据实际情况进行选择。从引入 HappyPack，到新的 hard-source-webpack-plugin，以及 webpack 内置的缓存机制、cache-loader 的使用，学习了这些优化的方法，可以帮助你更好的管理 Webpack 的打包优化，提高前端性能，避免重复劳动。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d9d70968c7c53b0c430d2