企业官网建设流程全解析

一、背景

我接手了一个h5项目，这个h5是内嵌在app原生里的，有一个页面是数据看板页，顶部一个地图组件展示数据，下面是选择年月日/具体时间展示不同的饼图/柱状图/条形图。问题是在点击数据看板的icon之后得等很久页面才能跳转过去，不过等跳转过去之后页面能很快的渲染完。需要我解决的是立马跳转过去，然后从上到下依次加载，最好加载速度也要快。

二、阶段1优化

最开始我用了defineAsyncComponent，并且增加了一个loading页面，在用户等待渲染的时候加载这个页面

meta: { name: '数据看板', needLogin: true, statiStical: true }, component: defineAsyncComponent({ loader: () => import('@/views/dataBoards/dataBoard.vue'), loadingComponent: AsyncLoading, delay: 0 }),

然后在数据看板的父组件预加载子组件：

// 预加载关键子组件（根据使用频率预加载） Promise.allSettled([ import('@/views/dataBoards/Performance/index'), import('@/views/dataBoards/userData/index'), import('@/views/dataBoards/dataHouse/index'), //这个是默认加载出来的子组件 ]).catch(() => { // 静默失败，预加载失败不影响主流程 })

这时候的流程是：

点击icon，立马跳转过去没有延迟，开始加载/dataHouse，展示loading页面的同时开始加载/dataHouse页面需要的依赖，加载完之后隐藏loading页面，然后地图、图表组件一一渲染出来（还不是立马渲染出来的）

然后我就研究加载顺序，为什么loading显示的时间会那么长

加载/dataHouse的顺序：

请求/dataHouse文件，下载js，顺序执行到下面这句依赖👇开始全量下载

import * as echarts from 'echarts'

这个是mb级别的大小，所以展示他的时间比较长

再梳理一下父组件dataBoard组件router-view dataHouse子组件两个的加载顺序：

• 路由跳转/dataHouse
• 先加载父组件/dataBoard，加载里面的echarts等引入
• 然后加载/dataHouse（这时候没有loading页面了，而且echarts已经被浏览器下载完了所以加载很快）
• 页面展示完成

注意defineAsyncComponent不是预加载！他只是异步组件定义，规定了如何加载，并不会提前加载！

所以第一次修改的效果就是defineAsyncComponent使路由可以立马跳转过去，并且到了dataBoard只加载dataHouse（其他的组件改成了异步，点击的时候才去加载），然后最主要的echarts下载只不过换到了在loading 页去等待，所以没多大作用。

三、最终版优化

echarts分包：

optimization: { splitChunks: { chunks: 'all', cacheGroups: { echarts: { name: 'chunk-echarts', test: /[\\/]node_modules[\\/]echarts[\\/]/, priority: 20, chunks: 'all', }, }, }, },

webpack分包优化，把echarts单独去打包

之前这个echarts是放在dataBoards里

dataBoard.js (1.5MB) ├── dataBoard 代码 (100KB) ├── 7个子组件 (245KB) └── echarts (1MB+) ← 全部打包在一起

现在单独一个包：

dataBoard.js (345KB) ← 轻量！ chunk-echarts.js (1MB+) ← 单独文件

我本来觉得这样只是改变了加载的时机，并没有影响echarts包的大小，但是这种方法其实改变了加载策略，从串行阻塞到并行下载，这样不会影响主包的加载。

而且拆包之后的发版基本不会去改动echarts这个包，那他就可以一直在用户的手机缓存里

路由懒加载

component: () => import('@ 这种写法本来就是懒加载，这里把defineAsyncComponent去掉了，因为defineAsyncComponent会有一个固定加载行为展示loading的页面，我觉得反而变慢了

我搜了一下这俩的区别，这两个本质上是一个东西，只是vue把() => import('@ 给我们封装了一下，支持传入更多的参数，所以实际上加载组件的时间应该是一样的，只不过我还传了个loading页面，这个也需要下载，渲染loading+卸载loading+组件切换，所以显的更慢了

其实这两个组合之后是可以提高首屏加载速度的（也就是我一开始什么都不改的那版，只不过我们的目的是为了提高数据看板的速度，所以有了下面这步的预加载）

首页预加载数据看板子组件

// 在 Home 页面（主页面）进行预加载 // 第一批：800ms 后加载核心模块 setTimeout(() => { Promise.allSettled([ import('@/views/dataBoards/dataBoard.vue'), // 父组件 import('@/views/dataBoards/dataHouse/index'), // 默认子组件 ]).catch(() => {}) }, 800) // 第二批：3000ms 后加载高频子组件 setTimeout(() => { Promise.allSettled([ import('@/views/dataBoards/userData/index'), import('@/views/dataBoards/userPortrait/index'), import('@/views/dataBoards/Performance/index'), ]).catch(() => {}) }, 3000)

这里到了首页后800ms就会自己去加载dataBoard所需要的依赖了，空闲进程去下载echarts，等用户点击数据看板就很丝滑了。

不过这种方法做到最后我并没有觉得很好，就是把次屏的加载时间提前移到首屏去加载的（静默在后台加载的用户感知不到），如果有更好的办法欢迎大佬们来指点