Vue懒加载的学习

文章参考

  1. VUE2组件懒加载浅析
  2. VUE+Webpack 实现懒加载的三种方式
  3. 路由懒加载

问题描述

在工作中,要实现一个‘打印’的功能,结果打印内容显示出来大概需要40秒。
由于我是做的单页面,代码打包之后大概有8M左右的样子,因此浏览器会先加载这8M的代码,然后根据逻辑和CSS渲染出需要打印的页面,对浏览器来说非常耗资源(CPU和内存),因此,采取的优化方式是对组件采用异步加载的方式

Vue官方写法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: () => import('./components/Home.vue') },
      { path: '/item/:id', component: () => import('./components/Item.vue') }
    ]
  })
}

commonjs写法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: resolve => require(['./components/Home.vue'],resolve) },
      { path: '/item/:id', component: resolve => require(['./components/Item.vue'],resolve) }
    ]
  })
}

使用建议

建议使用Vue官方推荐的使用方法,如果对第二种commonJS写法不理解,就需要了解Nodejs中require的用法

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭