vue页面白屏的原因及优化

尼克_张

已于 2024-07-29 15:48:29 修改

阅读量1.1w

点赞数 12

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue javascript

于 2020-10-18 12:31:23 首次发布

本文链接：https://blog.youkuaiyun.com/m0_48076809/article/details/109058909

一、原因：

单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(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')