vue-router懒加载或者按需加载

80437700 2020-04-17

先了解一下require和import

require 是 CommonJS(在Node中实现), 运行时调用,理论上可以运用在代码的任何地方

import 是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法,编译时调用,必须放在文件开头

require 是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量

import 是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require

结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。

懒加载1:

component: resolve => require([‘@/view/index.vue‘], resolve) 

//一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用:
Vue.component(‘async-webpack-example‘, function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包,这些包
  // 会通过 Ajax 请求加载
require([‘./my-async-component‘], resolve) 

用require这种方式引入的时候,会将你的component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js

懒加载2:推荐使用这种方式(需要webpack > 2.4)

首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):

1 const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):

1 import(‘./Foo.vue‘) // 返回 Promise

结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const router = new VueRouter({
  routes: [
    { path: ‘/foo‘, component: () => import(‘./Foo.vue‘)}
  ]
})

相关推荐