umijs4构建产物为什么有这么多文件?

作者站长头像
站长
· 阅读数 8

之前使用的是umi3,最近升级成umi4了。想了解下umi4为什么将构建产物分成这么多?和传统的打包成一个js文件和css文件,有什么优点吗

回复
1个回答
avatar
test
2024-06-30

将文件打包成一个或是多个并 不是 直接判断结构好坏的标准,我们应该按实际场景看待

对于小型项目,将 js 和 css 打包成一个文件可以减少频繁的请求(因为每加载一个文件都需要建立连接、发送请求等操作,因此减少请求数量可以相对提高页面加载速度)

随着应用程序变得越来越复杂、规模庞大,并且需要支持动态代码拆分、按需加载等功能时,分包构建和模块化就体现出价值了

umi js 就是这么做的

  • 代码分割:通过对路由进行动态代码拆分,将不同路由对应的代码拆分成 独立 的文件。这样做的好处是在用户访问不同页面时只加载当前页面所需的代码,减少初始加载时间,并且可以实现按需加载,降低整体应用的体积。
  • 异步加载:异步加载模块,在需要时才去下载该模块所需的文件。这种方式可以加快首次渲染速度,提高用户体验。
  • 按需加载:通过配置路由信息和按需引入组件等方式,可以实现 按需加载 功能。即使应用非常庞大,也可以确保只有在需要时才会下载相关资源,从而降低初始载入时间和网络负载。

异步加载和按需加载蛮像的,区别是异步强调 并行 地请求和加载资源文件;而按需强调 特定条件 下才去请求和加载资源文件

对了,结尾提一嘴,umi js 的作者叫 云谦,题主感兴趣可以在 github 和 微信公众号 上找到他,直接阅读作者的文章肯定效果更佳

参考umijs githubumijs blogumijs 构建对比(微信文章,可能会过期)
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容