码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-17 12:37:24      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:工厂   spl   异步   打包   common   opener   targe   编译   sync   

先了解一下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‘)}
  ]
})

 

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

标签:工厂   spl   异步   打包   common   opener   targe   编译   sync   

原文地址:https://www.cnblogs.com/qcwblog/p/12718895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!