未加星标

Vue按需加载的具体实现

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
概念(懒加载)

当打包构建应用时,javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,嗯,这样就更加高效了。

场景

xxx项目作为一个单页面应用,采用组件化的开发模式,每次启动首页都会加载全部组件,但此时只是访问了首页而已,就造成了大量组件污染加载的情况。

目的

只在访问当前页面时加载对应组件,避免页面组件全部加载。(按需加载)

实现

app.vue

<template>
<div id="app">
<router-view/>
</div>
</template>

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import 'babel-polyfill'
import {Promise} from 'es6-promise-polyfill'
import App from '../components/app'
// 定义路由,每个路由映射一个组件。
const Routers = [
{
path: '/', // 路径
component: resolve => require(['../components/member/index], resolve) // 异步加载组件
},
{
path: '/login',
component: resolve => require(['../components/member/login'], resolve)
}
]
const RouterConfig = {
routes: Routers
}
// 创建router实例,并传递路由配置。
const router = new VueRouter(RouterConfig);
// 创建并挂载根实例。
new Vue({
el:'#app',
router,
// 将h作为createElement的别名是一个通用惯例。
render: h =>(App)
})

注意:

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,例如['moduleA','moduleB'],第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部使用这些模块。
示例代码中使用了异步的方式加载组件,其中require函数负责异步引入将要渲染的组件,而resolve则负责异步回调渲染组件。
babel-polyfill:对Promise进行转码编译;

npm install --save babel-polyfill
es6-promise-polyfill 解决Promise兼容性问题。关于不太了解Promise的同学请移步这里

npm install --save es6-promise-polyfill

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJava常大
tags: 加载,组件,gt,router,lt,polyfill,resolve,Promise,import,require,路由,异步,vue,components
分页:12
转载请注明
本文标题:Vue按需加载的具体实现
本站链接:https://www.codesec.net/view/569828.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(89)