随着 SPA (Single Page Application) 应用的流行，前端应用的打包时间也越来越长。Webpack 是一个常用的前端打包工具，本文将会介绍一些提高 SPA 应用打包速度的 Webpack 配置技巧。
减少包的体积
压缩代码
压缩代码是减少包体积的最基本的方法之一。Webpack 内置了压缩插件 UglifyJsPlugin，可以在生产环境中使用。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: 'production',
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};Tree shaking
Tree shaking 是一种消除无用代码的技术，能够大幅减少打包出的代码体积。需要使用 ES6 的模块化语法，并且在 Webpack 中配置 optimization.usedExports 和 optimization.sideEffects。
module.exports = {
mode: 'production',
optimization: {
usedExports: true, // 开启 Tree shaking
sideEffects: false, // 所有模块都没有副作用，都可以进行 Tree shaking
},
};按需加载
按需加载能够在应用中加载所需的代码，而不必加载整个应用。在 Webpack 中使用 code splitting 和 dynamic import 来实现按需加载。
缩短构建时间
缓存
使用 Webpack 的缓存功能可以缩短构建时间。在 Webpack 中配置 cache 和 hardSourceWebpackPlugn 插件即可。
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
cache: true, // 开启缓存
plugins: [new HardSourceWebpackPlugin()], // 使用 hard-source-webpack-plugin 插件
};并发
使用并发可以让打包过程更加快速。在 Webpack 中配置 parallelism、workers 和 threadPool 即可。
module.exports = {
parallelism: 4, // 并发构建数量
workers: 4, // worker 数量
threadPool: true, // 使用 threadPool
};优化 loader
优化 loader 可以让打包速度更快。可以使用 cacheDirectory 缓存 loader 的结果，并使用 thread-loader 和 happypack 配置实现并发执行 loader。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ---------------
-------- -
--------------- ----- -- ----
--
--
-
------- ----------------
-------- -
-------- -- -- ------ ---------
--
--
--
--
--
--
--总结
通过减少包的体积和缩短构建时间，可以让 SPA 应用的打包速度更快。使用 Webpack 的缓存、并发和优化配置可以优化 SPA 应用的打包速度。不同的优化技巧可以互相结合，提高应用性能。
参考链接：
Webpack 4 Tutorial: from 0 Conf to Production Mode Advanced Webpack configuration techniques
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c936f968c7c53b0efe9de