Webpack 是前端开发中常用的打包工具之一，目前最新版本为 4.x，也是目前前端开发中最常用的打包工具之一。随着项目规模的增大，Webpack 打包时间也会越来越多，Webpack 的性能优化也变得至关重要。本文将介绍一些优化经验，帮助开发者了解有关 Webpack 的一些开发技巧和调试技巧，为实际开发中提高应用性能提供参考。
1. 调整模块解析方式
模块解析是 Webpack 中一个重要的过程，合理的模块解析方式可以有效地提升构建速度，降低构建时打包体积。在实际开发中，可以使用以下方法进行模块解析的优化：
1.1 缩小搜索范围
在 resolve.modules 中指定动态库目录，可以让 Webpack 在构建时减少需要扫描的路径数量，进而减少耗时。
示例代码：
{
resolve: {
modules: [path.resolve(__dirname, 'node_modules'), 'node_modules', '../web_modules']
}
}1.2 alias 别名
在 Webpack 中，如果有一些常用的模块路径，可以用别名来缩短路径，提高编译速度。
示例代码：
{
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
}1.3 后缀名处理
在 Webpack 中，使用 resolve.extensions 配置可以使 Webpack 在构建包时自动添加对应后缀名，能够更快地校验和搜索文件。
示例代码：
{
resolve: {
extensions: ['.tsx', '.ts', '.js', '.less']
}
}2. 静态资源优化
静态资源是一个 Webpack 优化的重要方向。Web 前端开发中通常使用图片、字体等资源，如何更好地处理这些资源应该是前端开发者应该掌握的一个方面。
2.1 图片压缩
使用 image-webpack-loader 压缩图片，可以有效地减小图片文件大小，提高打包速度。
示例代码：
// www.javascriptcn.com code example
{
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
outputPath: 'images/',
name: '[name].[ext]'
}
},
{
loader: 'image-webpack-loader', // 压缩图片大小
options: {
mozjpeg: { // 压缩 jpg 的配置
progressive: true,
quality: 65
},
optipng: { // 使用 imagemin-optipng 压缩 png，enable: false 为关闭
enabled: false,
},
pngquant: { // 使用 imagemin-pngquant 压缩 png
quality: [0.65, 0.9], // 质量范围
speed: 4
},
gifsicle: {
interlaced: false
},
webp: {
quality: 75
}
}
}]
}]
}
}2.2 字体文件
将字体文件转化成 Base64 编码，减少网络请求次数，提升首屏加载时间。
示例代码：
// www.javascriptcn.com code example
{
test: /\.(ttf|eot|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
outputPath: 'font/',
name: '[name].[ext]',
limit: 10240, // 小于 limit 的图片会被转换成 base64
}
}
}3. 开发环境优化
为了提高开发效率，我们可以对 Webpack 的开发环境做些优化。
3.1 使用 HappyPack
在开发环境中使用 HappyPack，可以将 Webpack 的解析任务转移到更多的子进程中，并行地解决，可以有效地加快代码打包的时间。
示例代码：
// www.javascriptcn.com code example
module.exports = {
module: {
rules: [{
test: /\.js$/,
use: 'happypack/loader?id=happyBabel'
}]
},
plugins: [
new HappyPack({
id: 'happyBabel',
loaders: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}],
threadPool: HappyPack.ThreadPool({ size: 5 })
})
]
}3.2 使用 source-map
使用 devtool 配置生成 source-map，方便在开发环境中进行调试。
示例配置：
module.exports = {
devtool: 'cheap-module-eval-source-map'
}3.3 热更新
开启 Webpack 热更新，每次修改代码 Webpack 无需重新打包代码，可以实现在不刷新浏览器的情况下实时查看效果，提高开发效率。
示例代码：
// www.javascriptcn.com code example
module.exports = {
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}4. 生产环境优化
在生产环境部署时，我们还需要考虑代码的性能优化。
4.1 代码压缩
使用 Webpack 的 optimization.minimize 配置开启代码压缩。
示例代码：
module.exports = {
optimization: {
minimize: true
}
}4.2 提取公共代码
为了减少构建后包的大小，提高应用首屏加载速度，我们可以使用 Webpack 提取公共代码，减少冗余代码。
示例代码：
// www.javascriptcn.com code example
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
}
}以上经验都是前端工程师在 Webpack 中的开发经验，通过这些经验的实践，可以使 Webpack 的性能更加优化，从而加快项目构建速度，提高开发的效率并且减少组件冗余代码的入口，可以实现从而提高网站的可访问性和可维护性。这些优化方案可以在开发阶段和生产阶段中使用，使得开发流程更加完整，为前端工程师提供更好更优秀的开发体验和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d01088e46428fe9ec9b569