Vue首屏优化经验分享

vue首屏优化

首屏加载慢，白屏时间长，核心思路就是减少网络传输数据量，可以从以下4个步骤考虑, 先易后难，每个步骤都是独立的。、

1. 懒加载

对路由和组件进行懒加载
第一部分借鉴博客：

1.1 路由懒加载

使用 vue-router 的时候，如果按照默认配置，所有的路由都会被打包到一个 bundle.js 文件中去（bundle 文件名一般是 app.js）。

进入 router/index.js 文件中，只需要将所有类似 import Home from ‘@/components/home’; 替换为 const Home = () => import(’@/components/home’)

其余部分不需要变。就能以最简单的形式做到根据路由来划分 webpack 打包的模块。这个时候 执行 npm run build 是就能看到多了很多小的 js 文件， 并且app.js 文件的体积也减小了
附上代码：

import Vue from 'vue'
import Router from 'vue-router'
const AdminIndex = () => import('@/components/admin-index')
const Home = () => import('@/components/home')

Vue.use(Router)

export default new Router({
   
  routes: [
    {
   
      path: '/',
      name: 'admin-index',
      component: AdminIndex
    },
    {
   
      path: '/home',
      name: 'home',
      component: Home
    }
  ]
})

1.2 组件懒加载

跟路由懒加载的形式一样，也是使用 () => import(‘xxx’) 的形式。
如果对于一个容器组件中，impo