在前端开发中，Webpack 是一个热门的工具，它可以将多个静态资源进行打包，包括 HTML、CSS、JavaScript、图片等等。但是，Webpack 构建时间长的问题一直困扰着前端开发者。在本文中，我们将分享一些有效的优化 Webpack 构建速度的实践，帮助你从 30 秒构建时间降至 2 秒。
1. 升级 webpack 及其插件
在使用 Webpack 的过程中，我们可以通过升级 Webpack 及其插件来提高构建速度。具体操作如下：
npm install --save-dev webpack@latest
npm install --save-dev mini-css-extract-plugin@latest
npm install --save-dev terser-webpack-plugin@latest
本示例中，我们升级了 Webpack，以及 mini-css-extract-plugin 和 terser-webpack-plugin 这两个常见且常用的插件。在实际开发中，你还可以根据自己的需求升级其他插件，但需要注意不同插件版本之间可能会存在一些兼容性问题，所以建议在升级之前先备份你的代码。
2. 减少打包文件体积
在使用 Webpack 进行打包时，我们可以通过减少打包文件的体积，从而提高打包速度。以下是一些减少体积的方法：
(1) 分离第三方库
将第三方库打包成一个单独的文件，可以减少主文件的大小，从而提高构建速度。这可以通过使用 Webpack 的 splitChunks 配置项来实现：
-- -------------------- ---- ------- -------------- - - ------------- - ------------ - ------- ------ -------- ------ -------- -- ---------- -- ----------------- --- ------------------- --- ----------------------- ---- ------------ - -------- - ----- ------------------------- --------- --- -- -------- - ---------- -- --------- ---- ------------------- ---- - - - - -展开代码
上述配置将会把 node_modules 目录下的所有模块打包到 vendors.js 中。
(2) 移除无用代码
在实际开发中，可能会存在一些无用的代码。打包这些无用的代码只会浪费时间和空间，所以我们需要对其进行移除。这可以通过使用 Tree Shaking 实现。Tree Shaking 可以实现剔除未被使用的模块。
module.exports = { optimization: { usedExports: true } }
上述配置将不会打包未被使用的模块。
(3) 使用 gzip 压缩
在打包后，我们可以使用 gzip 工具进行压缩，这可以大幅减少文件的大小，从而提高打包速度：
const CompressionPlugin = require('compression-webpack-plugin') module.exports = { plugins: [ new CompressionPlugin() ] }
3. 缓存构建结果
在每次构建时，Webpack 会重新编译所有代码，这浪费了很多时间。为了避免重复编译，我们可以使用缓存插件。
可以使用以下插件：
- hard-source-webpack-plugin
- cache-loader
- babel-loader/lib/cache
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') module.exports = { plugins: [ new HardSourceWebpackPlugin() ] }
结语
通过以上的实践，我们可以有效地优化 Webpack 构建速度。同时，我们也可以继续研究 Webpack 的其他优化方案，以达到更快的构建速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c15cea314edc268495ea31
