路由懒加载解决页面白屏问题

背景：vue是单页面应用，运用webpack打包构建时会把所有的js打在一起，这样js包就会很大，造成进入首页时，需要加载的内容过多，出现长时间的白屏，这种是不利于用户体验的，所以就有了路由懒加载。

作用：路由懒加载也叫路由延时加载，就是将页面的组件进行划分当需要用到某个页面时再对其进行加载，这样按需加载路由对应的资源，可以有效的分担首页所承担的加载压力，减少首页所承担的加载压力，减少首页加载用时。

面试题：页面出现白屏的原因是什么,怎么优化？

首次进入js包太大了，需要加载的资源太多，导致了白屏问题，而路由懒加载就可以是一种优化方式。

实现方式：目前有3种方式实现路由懒加载：

1、vue的resolve异步组件

1.  
   routes: [
2.  
   {
3.  
   // 进行路由配置,规定'/'引入到home组件
4.  
   path: '/',
5.  
   component: resolve => require(['../pages/home.vue'], resolve),
6.  
   meta: {
7.  
   title: 'home'
8.  
   }
9.  
   },
10.  
    {
11.  
    path: '/msg',
12.  
    component: Msg
13.  
    },
14.  
    {
15.  
    path: '/detail',
16.  
    component: Detail,
17.  
    children: [
18.  
    {
19.  
    path: 'msg',
20.  
    component: Msg
21.  
    }
22.  
    ]
23.  
    }
24.  
    ]

2、es6中的import()

import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。

1.  
   button.addEventListener('click', event => {
2.  
   import('./dialogBox.js')
3.  
   .then(dialogBox => {
4.  
   dialogBox.open();
5.  
   })
6.  
   .catch(error => {
7.  
   /* Error handling */
8.  
   })
9.  
   });

3、webpack的require.ensure()

单独打包成自己写的名字配置（需要配置chunkFilename,和publicPath。publicPath是按需加载单独打包出来的chunk是以publicPath会基准来存放的，chunkFilename:[name].js这样才会最终生成正确的路径和名字）

1.  
   module.exports={
2.  
   entry:'./js/entry.js',
3.  
   output:{
4.  
   path:path.resolve(__dirname,"./dist"),
5.  
   filename:'js/a.bundle.js',
6.  
   publicPath:"./",
7.  
   chunkFilename:'js/[name].js'
8.  
   }
9.  
   }
10.  
     
11.  
     

这三种方式都是为了让资源能够按需加载，减少首页加载压力 

这篇好文章是转载于：学新通技术网