当前位置: 首页 > 知识库问答 >
问题:

在微前端开发中,当子应用加载缓慢时候,改如何优化?

王英彦
2023-05-31

当微前端内加载子应用时候打开很慢,导致有时候加载不出来,或者用户等不了那么久,怎么解决这种问题?这里我有几种解决办法。

共有1个答案

暨弘毅
2023-05-31

这里以无界微前端为例讲解一下:

  1. 如果不要求实现tab页签保留之前页面状态和各种选项的情况下,优先考虑保活模式
  2. 每次页面打开都要求刷新路由跳转不同页面,则需要改变子应用的打包情况。

    1. 最简单的就是给服务的的Nginx添加gzip压缩,能极大提高子应用加载速度
    2. 子应用(入口js,既)main.js内把引入的全局组件或者ui库等等都做按需加载,减少入口文件体积
    3. 子应用打包把压缩后的js再次进行前端gzip打包,实现服务端直接使用gz包速度更快
    4. 采用cdn或者dll打包形式,把不常用的包都分离出去,打包一次永久使用缓存
    5. 主应用加载过的包可以共享给子应用使用的可以直接资源共享,减少子应用资源依赖(子应用就无法单独启动了)

实现以上其中3点则就能让应用加载速度提升70%

 类似资料:
  • Mooa 是一个为 Angular 服务的微前端框架,它是一个基于 single-spa,针对 IE 10 及 IFRAME 优化的微前端解决方案。 Mooa 概念 Mooa 框架与 Single-SPA 不一样的是,Mooa 采用的是 Master-Slave 架构,即主-从式设计。 对于 Web 页面来说,它可以同时存在两个到多个的 Angular 应用:其中的一个 Angular 应用作为主

  • 我开始写前端应用的时候,并不知道一个 Web 应用需要优化那么多的东西。编写应用的时候,运行在本地的机器上,没有网络问题,也没有多少的性能问题。可当我把自己写的博客部署到服务器上时,我才发现原来我的应用在生产环境上这么脆弱。 我的第一个真正意义上的 Web 应用——开发完应用,并可供全世界访问,是我的博客。它运行在一个共享 256 M 内存的 VPS 服务器上,并且服务器是在国外,受限于网络没有备

  • 我正在尝试在我的多租户应用程序中实现假客户概念。我有两个微服务。在其中一个微服务中,我编写了从数据库获取数据的API。我需要在我的其他微服务中使用这些数据。为此,我使用了假客户概念。我需要第二个微服务加载期间的数据。但这并没有发生。我有以下错误 这是我的基于数据源的MultitenantConnectionProviderImpl。类,我在其中编写了伪客户机逻辑 这是一个虚拟客户端。我将第二个微服

  • 当您单击应用程序中的一个按钮时,浮动应用程序小部件就会打开。 我写了一个函数,当点击Widget时应该打开应用程序屏幕。(代码如下) 我在下面列出了两种方法 问题: 点击后,应用程序打开需要几秒钟的时间。 我想在点击后打开内存栏中的应用程序

  • 创建项目,不就是运行起一个 hello, world 的事吗? 刚工作的时候,总想着能经历从零开始制作前端应用的过程。 工作一段时间后,总会经历要从零创建一个前端应用。 工作上的编程与日常编程,并没有太多的区别。只是有些时候,我们会省略一些步骤;有些时候,我们也会多一些步骤。 创建项目,不就是起一个 hello, world 的事吗?业余的时候,一个人创建项目: 在 GitHub 上创建一个项目。

  • 我有一个jar实用程序,可以实现一些功能。我将jar作为依赖项添加到maven应用程序中。它使用简单的java。我希望jar中的一个类在应用程序启动时运行。我们怎么能做到?