加速前端开发:用MFSU瞬间解决本地热更新慢的烦恼!

大家好,我是前端大骆,又来分享一些工作中遇到的挑战,如果我的经验对您有所帮助,请点个赞收个藏支持一下,关注我不迷路。

解决前端工程启动缓慢的问题

最近接手了一个项目,发现前端工程启动速度非常慢,每次启动都需要耗费大约5分钟的时间,而热更新则需要30秒至1分钟不等。即便使用了i9-12900H处理器和32GB内存的笔记本,仍然无法解决这个问题,更不用说团队其他成员配置更低的电脑了。这种情况严重影响了我们的开发效率,必须得进行优化才行,不然得天天加班赶进度,都没时间写文章了。

通过启用MFSU优化构建速度

前端工程是使用UmiJS4搭建的,经过查看UmiJS4的配置文档,发现可以通过配置mfsu来加快本地构建速度。

开启mfsu,在工程中config/config.ts.umirc.ts做如下配置:

arduino 复制代码
import { defineConfig } from '@umijs/max';
export default defineConfig({
    mfsu: {},
});

重新构建后,构建时间缩短至1分钟左右,热更新时间也降至十几秒,提速效果显著。

解决修改后的代码不生效问题

然而,好景不长,组员反馈说,我更新了组件库的代码,但是更改没有生效。

我们的工程采用了 monorepo 风格,主工程通过 npm 包形式引用了子工程的代码。在我修改了子工程的代码后,构建成功了,并且我确认构建产物中包含了修改后的代码。然而,在主工程中更改并未生效。或许是 MFSU 功能存在问题,不应该啊。

我重新查阅了UmiJS4的配置文档,发现了关于 MFSU 的介绍。MFSU 是基于 Module Federation 的提速功能。接下来我将详细解释这句话的含义。

Module Federation(模块联邦)是 Webpack 5 中引入的功能,用于解决前端微服务架构中的模块共享和远程加载问题。通过 Module Federation,不同的应用程序可以共享彼此的代码和模块,实现模块的动态共享和加载,构建出更灵活和高效的系统架构。

也就是说,MFSU 利用 Module Federation 的特性,通过模块共享、缓存优化和动态系统架构等方式,加快了构建速度,减少了重复构建的时间和文件大小。简而言之,启用 MFSU 后,如果一个模块在之前的构建中已经存在,UmiJS4 将直接使用之前缓存的结果,而不会重新构建,从而节省时间。

主工程在启动后缓存了引用组件库子工程的构建产物的模块。因此,无论组件库子工程的代码如何修改,主工程仍然使用缓存中的旧模块,导致更改未生效。

既然这样,可否让组件库子工程的构建产物不被 MFSU 处理,应该就可以解决这个问题。

文档中提到,使用 mfsu.exclude 可以排除某个依赖的构建产物不被 MFSU 处理,其用法如下所示:

exclude 手动排除某些不需要被 MFSU 处理的依赖, 字符串或者正则的形式,比如 vant 不希望走 MFSU 处理,可以配置 { exclude: [ 'vant' ] } 匹配逻辑为全词匹配,也可以配置 { exclude: [ /vant/ ] } 只要 import 路径中匹配该正则的依赖都不走 MFSU 处理

在工程的 config/config.ts.umirc.ts 文件中进行如下配置修改:

javascript 复制代码
import { defineConfig } from '@umijs/max';
export default defineConfig({
   mfsu: {
    exclude: [/@lhdfeng\/wform/]
   },
});

在主工程中,组件库的组件是通过 import { xxx } from '@lhdfeng/wform' 引入的,因此使用正则表达式/@lhdfeng\/wform/来配置引入路径。

通过以上配置,主工程将排除@lhdfeng/wform组件库的构建产物,确保它不被MFSU处理。重新监听组件库子工程,再重新启动主工程,修改组件库子工程中的代码,更改很快就在主工程中生效了,问题得以解决。

希望这些经验对大家有所帮助,一起优化前端工程,提高开发效率!

相关推荐
red润1 分钟前
使用 HTML5 Canvas 实现动态蜈蚣动画
前端·html·html5
sg_knight9 分钟前
VSCode如何修改默认扩展路径和用户文件夹目录到D盘
前端·ide·vscode·编辑器·web
一个处女座的程序猿O(∩_∩)O18 分钟前
完成第一个 Vue3.2 项目后,这是我的技术总结
前端·vue.js
mubeibeinv19 分钟前
项目搭建+图片(添加+图片)
java·服务器·前端
逆旅行天涯25 分钟前
【Threejs】从零开始(六)--GUI调试开发3D效果
前端·javascript·3d
m0_748255261 小时前
easyExcel导出大数据量EXCEL文件,前端实现进度条或者遮罩层
前端·excel
长风清留扬1 小时前
小程序毕业设计-音乐播放器+源码(可播放)下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
web147862107231 小时前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 小时前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构