vue单页面的首屏优化

一：缩小webpack打包生成体积

1.尽量按需引入，不要在main.ts里全局引入
2.webpack-bundle-analyzer可以知道生成的包中哪个依赖占据着空间，哪个库占用的空间最多

二：使用cdn

使用cdn把一些必要的库在index.html里面引入进去,这样也能加快加载速度。

三：动态路由分块加载

这种优化，就是将每个组件的js代码独立出来，在使用到这个组件时，才向服务器请求文件，并且请求过一次后就会缓存下来，再次使用到这个组件时，就会使用缓存，不再发送请求。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
  mode: 'history',
  linkActiveClass: 'router-link-active',
  routes: [
    {
      path: '/',
      // 这里只需要把原来从外部引入的组件换成以下的语句就可以了
      component: resolve => require(['./views/map/Main.vue'], resolve)
	  //component: () => import('./views/map/Main.vue')
    },
  ]
})

参考：
1.Vue单页面应用首屏加载时间优化