Advertisement

Vue页面出现卡顿的原因与优化

阅读量:

一、原因:

单页面应用的网页代码是通过JavaScript生成的。由于在首次屏幕展示时需要加载大量JavaScript文件(包括app.js和vendor.js),因此在网络速度较慢的情况下会导致一段时间内出现部分页面无法显示的情况。

二、解决办法:

1、路由懒加载,组件懒加载

1.路由懒加载

复制代码
    // 1、Vue异步组件技术:
    {
      path: '/home',
      name: 'Home',
      component: resolve => require(['../views/home.vue'], resolve)
    }
    
    // 2、es6提案的import()
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home.vue')
    }
    
    // 3、webpack提供的require.ensure()
    {
      path: '/home',
      name: 'Home',
      component: r => require.ensure([],() =>  r(require('../views/home.vue')), '

全部评论 (0)

还没有任何评论哟~