Webpack 是前端开发中常用的工具之一，它的主要作用是将各种资源打包成一个或多个静态资源文件，以便于浏览器加载。但是，Webpack 在打包过程中可能会带来一些性能问题，比如打包速度慢、文件体积过大等等。本文将介绍 10 条最佳业务构建指南，帮助你优化 Webpack 的性能，提高代码的质量。
1. 开启 Tree Shaking
Tree Shaking 是一个非常重要的优化技术，它能够将没有被使用到的代码从打包文件中删除掉。在 Webpack 中，我们可以通过设置 mode 为 production 来开启 Tree Shaking，同时需要在 package.json 文件中设置 "sideEffects": false，这样就可以让 Webpack 自动删除没有副作用的代码了。
// webpack.config.js
module.exports = {
mode: 'production',
// ...
}// package.json
{
"name": "my-app",
"version": "1.0.0",
"sideEffects": false,
// ...
}2. 优化代码分割
代码分割是指将代码划分为多个小块，以便于浏览器并行加载。在 Webpack 中，我们可以使用 splitChunks 配置项来进行代码分割的优化。
// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: -10,
chunks: 'all'
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
}3. 开启 Scope Hoisting
Scope Hoisting 是一种优化技术，它能够将模块中的多个作用域合并为一个作用域，从而减少代码量，提高执行速度。在 Webpack 中，我们可以通过设置 optimization.concatenateModules 和 optimization.providedExports 来开启 Scope Hoisting。
// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
// ...
optimization: {
concatenateModules: true,
providedExports: true
}
}4. 使用 HappyPack
HappyPack 是一个多进程打包工具，它能够加速 Webpack 的打包速度。在 Webpack 中使用 HappyPack 很简单，只需要在配置文件中添加以下代码：
// www.javascriptcn.com code example
// webpack.config.js
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
use: 'happypack/loader?id=js',
exclude: /node_modules/
}
]
},
plugins: [
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: ['babel-loader']
})
]
}5. 使用 DllPlugin 和 DllReferencePlugin
DllPlugin 和 DllReferencePlugin 是 Webpack 的两个插件，它们可以将一些不经常变化的库文件提前打包成一个或多个静态文件，以便于加速打包速度。在 Webpack 中使用 DllPlugin 和 DllReferencePlugin 很简单，只需要在配置文件中添加以下代码：
// www.javascriptcn.com code example
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.DllPlugin({
name: '[name]',
path: path.resolve(__dirname, '[name]-manifest.json')
}),
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'vendor-manifest.json')
})
]
}6. 使用 MiniCssExtractPlugin
MiniCssExtractPlugin 是一个将 CSS 提取到单独文件的插件，它可以减少页面加载时间，提高用户体验。在 Webpack 中使用 MiniCssExtractPlugin 很简单，只需要在配置文件中添加以下代码：
// www.javascriptcn.com code example
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css'
})
]
}7. 压缩代码
压缩代码是一种优化技术，它可以减少文件体积，提高页面加载速度。在 Webpack 中，我们可以使用 UglifyJsPlugin 和 OptimizeCSSAssetsPlugin 插件来压缩代码。
// www.javascriptcn.com code example
// webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [
new UglifyJsPlugin(),
new OptimizeCSSAssetsPlugin()
]
}
}8. 使用 Webpack Bundle Analyzer
Webpack Bundle Analyzer 是一个可视化分析工具，它可以帮助我们分析打包后的文件，找出哪些模块占用了过多的空间，以便于进一步优化。在 Webpack 中使用 Webpack Bundle Analyzer 很简单，只需要在配置文件中添加以下代码：
// www.javascriptcn.com code example
// webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
// ...
plugins: [
new BundleAnalyzerPlugin()
]
}9. 使用 Cache
在 Webpack 中使用 Cache 可以加速打包速度，减少重复编译的时间。在 Webpack 中，我们可以使用 cache-loader 和 hard-source-webpack-plugin 来开启 Cache。
// www.javascriptcn.com code example
// webpack.config.js
const CacheLoader = require('cache-loader');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
use: [
'cache-loader',
'babel-loader'
]
}
]
},
plugins: [
new HardSourceWebpackPlugin()
]
}10. 使用 HappyPack 和 Cache
使用 HappyPack 和 Cache 可以进一步加速 Webpack 的打包速度，提高开发效率。在 Webpack 中，我们可以使用 happypack/loader?id=cache 来开启 Cache。
// www.javascriptcn.com code example
// webpack.config.js
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
use: 'happypack/loader?id=cache',
exclude: /node_modules/
}
]
},
plugins: [
new HappyPack({
id: 'cache',
threadPool: happyThreadPool,
loaders: [
'cache-loader',
'babel-loader'
]
})
]
}结语
本文介绍了 10 条最佳业务构建指南，帮助你优化 Webpack 的性能，提高代码的质量。如果你想进一步了解 Webpack 的优化技术，可以参考 Webpack 官方文档和相关书籍。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d16857a941bf71343004cc