vue 复杂首页加载速度优化

复杂首页加载优化

• 图片，请求，路由懒加载都没有优化空间了；那只能从页面本身开刀了

采用异步组件的形式将组件按需导入

	data() {
		return {
			isMounted: false,
		}
	},
	components: {
      BannerZone, // 横幅
      Tpl1: () => import('@/views/tpl1'), // 组件1
      Tpl2: () => import('@/views/tpl2'), // 组件2
      Tpl3: () => import('@/views/tpl3'), // 组件3
      Tpl4: () => import('@/views/tpl4'), // 组件4
      Tpl5: () => import('@/views/tpl5'), // 组件5
      Tpl6: () => import('@/views/tpl6'), // 组件6
      Tpl7: () => import('@/views/tpl7') // 组件7
    },
    mounted() {
		this.isMounted = true
	}

• html部分-界面中优先展示必须的界面；逻辑类的耗时的可以等主界面加载完毕再开始加载，可以根据需要自行调整

	。。。。。。省略主界面静态样式部分
	<Tpl1 v-if="isMounted" />
	<Tpl2 v-if="isMounted" />
	<Tpl3 v-if="isMounted" />
	<Tpl4 v-if="isMounted" />
	<Tpl5 v-if="isMounted" />
	<Tpl6 v-if="isMounted" />
	<Tpl7 v-if="isMounted" />