H5 分包实现首屏加载时间优化

航航

已于 2024-08-01 21:21:49 修改

阅读量1.4k

点赞数 4

分类专栏：前端知识文章标签： javascript reactjs

于 2020-06-28 16:41:40 首次发布

版权

因为做了很多事情：

初始化 webView -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 -> dom 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片

在 dom渲染 之前用户看到的都是白屏，在 下载渲染图片 后，用户才能看到完整的页面。首屏秒开优化就是要减少这个过程的耗时。

扣除网络差的原因，对首屏启动速度影响最大的就是网络请求。由于业务需求，导致我们不得不引入很多第三方包来实现功能，这些包恰恰会容易影响到网络请求。

这里我们把大体积的包，分成多个小体积的包进行加载，减少请求时间

通过分析产物来查看打出来的包内容占比

yarn build

打完包后如果出现下面黄色文字，说明打出来的包体积过大，我们用百度翻译来看下解释：
在这里插入图片描述

束的大小明显大于推荐值。
考虑使用代码拆分来减少它：https://goo.gl/9VhYWB
您还可以分析项目依赖关系：https://goo.gl/LeUzfb

你的包大小超过了推荐值，可以通过分析项目依赖进行的分包处理。

在 umi 和 alita 项目中，执行 ANALYZE=1 umi build 或 ANALYZE=1 alita build 来分析下产物。

在这里插入图片描述

我们可以看到经过压缩后的 umi.js 还有 1.2M 的大小。

在这里插入图片描述

umi.js 下最大的包是笔者引入的 echarts，有 211kb 的大小，这里只是引入了一个 echart 包，如果项目中，多引入一些大体积包的话，那么 umi.js 的大小就不是 1M 而会更大，在首屏加载时，请求这些数据就严重影响到了下载和渲染时间。

这时，对包的拆解就显得尤为重要了。

打开 config/config.ts 文件(如果是 umi2 的项目则是 .umirc.js)

export default {
   
  chainWebpack(config) {
   
    config.optimization.