Vue按需加载的几种方法

Vue按需加载的几种方法

为什么要使用路由的按需加载

  对于Vue这种单页面的应用，如果没有应用懒加载的，在运行webpack打包后的文件会过大，会造成进入首页时需要加载的内容过多，加载造成的白屏时间过长，即使在项目中做了loading也会不利于用户的体验。而运用了按需加载可以对界面进行划分，需要的时候加载界面可以有效的分担首页说承担 的加载压力，减少首页加载用时，也可以减轻服务器的负载。

实现方法

Vue按需加载组件-使用webpack require.ensure

  使用webpack的require.ensure技术，也可以实现按需加载。 这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。如示例中chunkName为demo1的将会打包成一个js文件，chunkName为demo2的将会打包成一个js文件。

// r就是resolve
{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo1')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo1')
}, {
  path: '/about',
  name: 'about',
  component: r => require.ensure([], () => r(require('@/components/about')), 'demo2')
}

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

• 依赖 dependencies
  这是一个字符串数组，通过这个参数，在所有的回调函数的代码被执行前，我们可以将所有需要用到的模块进行声明。

• callback
  当所有的依赖都加载完成后，webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此，我们可以进一步 require() 依赖和其它模块提供下一步的执行。

• chunkName
  chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，可以将相同名称的依赖打包在同一个JS文件中

需要注意的是，在使用 require.ensure后该模块只会下载下来，并不会执行，只有当回调函数执行后该模块才会执行

vue异步组件

  使用vue的异步组件 , 实现按需加载，每个组件生成一个js文件，实现组件的懒加载。

  {
      path: '/problem',
      name: 'problem',
      component: resolve => require(['../pages/home/problemList'], resolve)
    }

使用ES6的import ()

  官方文档推荐的直接将组件引入的方式，impor是ES6的一个语法标准，使用该方法可直接声明导入，在下面路由配置中直接去使用*（需注意该方法需要webpack版本2.4+）*

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({
    routes: [
        {
            path: '/Foo',
            name: 'Foo',
            component: Foo
        },
        {
            path: '/Aoo',
            name: 'Aoo',
            component: Aoo
        }
    ]
})