详解webpack 热更新优化

前言

前言

随着项目界面日益复杂，Webpack的热更新速度逐渐变慢，有时甚至高达5到7秒，这严重影响了开发效率。

分析过程

分析过程

因此，今天专门针对热更新缓慢的原因进行了分析，具体步骤如下。

首先，在package.json的启动命令中添加以下参数：

--progress --watch --colors --profile

这里先解释一下这些参数的具体含义。

• --progress 显示构建进度
• --watch 开启实时监测
• --profile 记录编译过程中各步骤的耗时

添加这些参数并重启项目后，即可开始观察耗时情况。修改某个文件后，查看控制台输出，如下图所示。

图中红色部分标示了耗时最长的环节。经过搜索发现，有类似问题源于使用了UglifyJsPlugin插件。联想到我的项目配置中也使用了该插件，于是将其移至生产环境配置中使用。修改配置并重启项目后，再次修改文件查看控制台，结果如下。

效果显著，总耗时已控制在1到2秒以内，效率大幅提升。如果有类似困扰的开发者可以尝试此方法。

另一种解决方案

另一种解决方案

该方案的思路是：在开发环境中，每位开发者通常只负责部分模块或组件，因此热更新只需编译当前需要的页面，无需编译所有页面。创建一个selfConfig.js文件来配置需要保存的页面列表，然后在Webpack配置中指定仅编译这些页面，从而加快开发环境的编译速度。

// selfConfig.js
module.exports = [
'imScence',
'mLogin'
];

// webpack.base.conf.js 
// 部分关键代码
const selfConfig = require("./selfConfig");

for (let moduleName of modules) {
if (selfConfig.length === 0) {
devEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
} else {
if (selfConfig.includes(moduleName)) {
devEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
}
}
buildEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
}

配置完成后，系统仅会热更新指定的两个页面。但这种方案的弊端在于，其他未编译的页面在本地环境中将显示为白屏，无法打开。因此，该方案需根据实际场景谨慎使用。

注意：每次修改selfConfig.js文件后，需要重新启动Webpack服务。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。