简单的做一下vue依赖可视化，项目优化---组件异步引入。

最近的大屏项目，首屏会加载基本大半的依赖，打包的时候，单个js的文件有30M大小。文件太大的话，部分电脑还不会缓存。这样就形成了页面首屏加载缓慢，刷新页面还不会走缓存也会很缓慢。

开始做一下简单的优化。

首先就是查看加载的js中有什么。

通过npm run build -- --report 来生成分析图。

通过分析图知道了，文件中比较大的依赖是cesium、echarts、openlayers。

cesium是通过二次封装的vue-cli-plugin-cesium 引入的，而且首屏虽然没有第一时间显示三维地图。但是引入三维地图的组件后，就会在打包的时候判定为即将访问的资源，并且在首屏时加载依赖。而vue-cli-plugin-cesium为默认全局引入，不可以设置为局部引入。这个时候就想到了组件的异步引入。

也就是

const Page = () => import('@/components/page')
// 或者是
const Page = resolve => require(['@/components/page'], page)


components:{
    Page
}

但是这样的异步引入，修改的只是子组件的渲染时机，还是会被判定为即将访问的资源

所以需要使用到

const Page = r => require.ensure([], () => r(require('@/components/Page')), 'Page')

components:{
    Page
}

使用require.ensure的话，会将组件内使用到的依赖与其他依赖分开打包，并且在加载该组件的时候才会加载。

echarts的话使用的表格类型很少。可以使用按需引入。

let echarts = require("echarts/lib/echarts");
// 按需引入需要的组件模块
require("echarts/lib/chart/gauge");
// 引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

openlayers因为也不是首屏即将展示，和cesuim的处理方式想通。

这样的话。首屏的js被压缩到了8M左右。

但是打开三维组件，或者是openlayers组件的话，也会二次加载10M左右的相关依赖。

整体用户的体验还是不太好。

最后需要配合GZIP，开启GZIP压缩后，首屏的js就被进一步的压缩到了1M左右。相关依赖也压缩到了不到2M。

这次简单的优化结束。