前言
前端工程化已经不是新鲜感一段时间了，而 Webpack 作为前端页面模块化打包工具，逐渐走向成熟。它的优化方案也越来越多，本文就讲一下如何在 Webpack 中启用 cache 进行加速。
什么是 Cache?
Cache 通常被翻译成缓存，它是指在程序运行过程中，将数据存储在计算机内存中，以提高程序的执行速度。在 Webpack 中，Cache 即是指将模块转换后的结果存储在内存中，以减少重新打包的操作。
为什么启用 Cache?
在每次重新打包时，如果需要处理的文件比较多，那么就需要付出比较高的代价。Webpack 可以使用缓存技术来存储打包的结果，使得每次更改时，只需重新编译更改的文件，而不是整个项目再次编译。这项优化技术可以减少打包时间，从而降低开发成本。
如何启用 Cache?
Webpack 支持多种缓存机制，本文介绍两种比较实用的缓存机制。
1. MemoryCachePlugin
MemoryCachePlugin 是 Webpack 内置的插件，可以将编译过程中的中间结果（即转换后的代码）缓存到内存中，避免重复进行繁琐的工作。因为所有的文件都会被缓存在内存钟，所以当你第一次打包完成时，你反复的重新打包将不会有任何效果。这个插件同时也允许你将缓存保存至文件系统
安装插件：
npm install --save-dev memory-cache-plugin
使用插件：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- --------
--
-------- -
--- -------------------
-
--2. hard-source-webpack-plugin
hard-source-webpack-plugin 是 Webpack 的另一个插件，可以大大提升 Webpack 程序的重新编译速度。它通过将转换后的代码缓存在硬盘文件系统中，避免了每次重新编译时重新读取大量代码的时间浪费。安装插件：
npm install --save-dev hard-source-webpack-plugin
使用插件：
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
plugins: [
new HardSourceWebpackPlugin()
]
};总结
在本文中，我们学习了如何在 Webpack 中启用 cache 进行加速，提高项目的打包速度，减少繁琐的工作过程。Cache 技术是 Webpack 中最常用的优化方案之一，对于大型项目会有明显的提速效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648eb74348841e9894d1b72d