一、背景我接手了一个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等用户点击数据看板就很丝滑了。不过这种方法做到最后我并没有觉得很好就是把次屏的加载时间提前移到首屏去加载的静默在后台加载的用户感知不到如果有更好的办法欢迎大佬们来指点