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

Posted 2021-02-28 qcwblog

先了解一下require和import

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

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

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

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

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

懒加载1：

1 component: resolve => require([‘@/view/index.vue‘], resolve) 
2 
3 //一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用：
4 Vue.component(‘async-webpack-example‘, function (resolve) {
5   // 这个特殊的 `require` 语法将会告诉 webpack
6   // 自动将你的构建代码切割成多个包，这些包
7   // 会通过 Ajax 请求加载
8 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‘)}
  ]
})