前端优化首屏加载速度

执行npm run build，将打包代码部署上线后访问项目,会发现表现很糟糕，页面会出现长时间的空白等待，这是无法忍受的性能问题，迫切需要解决。

1、路由懒加载。

原来的路由引入组件

import Index from @/views/index.vue;
{
   
	path: '/'
	name: 'index'
	component: Index
}

现在引入路由(vue异步组件)

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
 {
   
      path: "/",
      name: "index",
      component: resolve => require(["@/views/Index"], resolve)
}

ES 提出的import方法（常用）
const HelloWorld = （）=>import(‘需要加载的模块地址’)

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
   
  routes: [
    {
   
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

2.组件懒加载

原来组件中的写法：

<template>
	<div>
		<span></span>
		<One-com></One-com>
	</div