时间:2021-05-26
一、 什么是懒加载
懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。
二、为什么需要懒加载
在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时
三、如何与webpack配合实现组件懒加载
1、在webpack配置文件中的output路径配置chunkFilename属性
output: { path: resolve(__dirname, 'dist'), filename: options.dev ? '[name].js' : '[name].js?[chunkhash]', chunkFilename: 'chunk[id].js?[chunkhash]', publicPath: options.dev ? '/assets/' : publicPath },chunkFilename路径将会作为组件懒加载的路径
2、配合webpack支持的异步加载方法
复制代码 代码如下:
npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015
四、具体实例中实现懒加载
1、路由中配置异步组件
export default new Router({ routes: [ { mode: 'history', path: '/my', name: 'my', component: resolve => require(['../page/my/my.vue'], resolve),//懒加载 }, ]})2、实例中配置异步组件
components: { historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载 //historyTab: () => import('../../component/historyTab/historyTab.vue') },3、全局注册异步组件
Vue.component('mideaHeader', () => { System.import('./component/header/header.vue')})五、配置异步组件实现懒加载的问题分析
1、多次进出同一个异步加载页面是否会造成多次加载组件?
答:否,首次需要用到组件时浏览器会发送请求加载组件,加载完将会缓存起来,以供之后再次用到该组件时调用
2、在多个地方使用同一个异步组件时是否造成多次加载组件?如:
//a页面export default { components: { historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载 },}//b页面export default { components: { historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载 },}答:否,理由同上
3、如果在两个异步加载的页面中分别同步与异步加载同一个组件时是否会造成资源重用? 如:
//a页面import historyTab from '../../component/historyTab/historyTab.vue';export default { components: { historyTab },}//b页面export default { components: { historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载 },}答: 会, 将会造成资源重用, 根据打包后输出的结果来看, a页面中会嵌入historyTab组件的代码, b页面中的historyTab组件还是采用异步加载的方式, 另外打包chunk;
解决方案: 组件开发时, 如果根页面没有导入组件的情况下,而是在其他异步加载页面中同时用到组件, 那么为实现资源的最大利用,在协同开发的时候全部人都使用异步加载组件
4、在异步加载页面中载嵌入异步加载的组件时对页面是否会有渲染延时影响?
答:会, 异步加载的组件将会比页面中其他元素滞后出现, 页面会有瞬间闪跳影响;
解决方案:因为在首次加载组件的时候会有加载时间, 出现页面滞后, 所以需要合理的进行页面结构设计, 避免首次出现跳闪现象;
六、懒加载的最终实现方案
1、路由页面以及路由页面中的组件全都使用懒加载
优点:(1)最大化的实现随用随载
(2)团队开发不会因为沟通问题造成资源的重复浪费
缺点:(1)当一个页面中嵌套多个组件时将发送多次的http请求,可能会造成网页显示过慢且渲染参差不齐的问题
2、路由页面使用懒加载, 而路由页面中的组件按需进行懒加载, 即如果组件不大且使用不太频繁, 直接在路由页面中导入组件, 如果组件使用较为频繁使用懒加载
优点:(1)能够减少页面中的http请求,页面显示效果好
缺点:(2)需要团队事先交流, 在框架中分别建立懒加载组件与非懒加载组件文件夹
3、路由页面使用懒加载,在不特别影响首页显示延迟的情况下,根页面合理导入复用组件,再结合方案2
优点:(1)合理解决首页延迟显示问题
(2)能够最大化的减少http请求, 且做其他他路由界面的显示效果最佳
缺点:(1)还是需要团队交流,建立合理区分各种加载方式的组件文件夹
七、采用第三种方案进行目录结构设计
八、具体代码实现设计
1、路由设计:
import Router from 'vue-router';import Vue from 'vue';Vue.use(Router);export default new Router({ routes: [ { mode: 'history', path: '/home', name: 'home', component: resolve => require([URL], resolve),//懒加载 children: [ { mode: 'history', path: '/home/:name', name: 'any', component: resolve => require(['../page/any/any.vue'], resolve),//懒加载 }, ] }, { mode: 'history', path: '/store', name: 'store', component: resolve => require(['../page/store/store.vue'], resolve),//懒加载, children: [ { mode: 'history', path: '/store/:name', name: 'any', component: resolve => require(['../page/any/any.vue'], resolve),//懒加载 }, ] }, { mode: 'history', path: '/my', name: 'my', component: resolve => require(['../page/my/my.vue'], resolve),//懒加载, children: [ { mode: 'history', path: '/my/:name', name: 'any', component: resolve => require(['../page/any/any.vue'], resolve),//懒加载 }, ] }, ]})(1)首层的路由根组件分别对应的tab页面
(2)根目录后跟着各个子路由页面,子路由采用动态路由配合路由的编程式导航再加上vuex,最优化提高开发效率
直接贴上代码:
/** * Created by ZHANZF on 2017-3-20. *///vuex配置import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({ state: { //路由组件存储器 routers: {} }, getters: { routers: state => { return state.data; } }, mutations: { //动态增加路由 addRouter: (state, data) => { state.routers = Object.assign({}, state.routers, { [data.name]: data.component }); } }, actions: { acMethods({commit}) { } },}) //根目录中注册路由组件window.midea = { registerRouter(name, component) { Store.commit('addRouter', { name: name, component: component }) }};//页面使用路由导航 openAnyPage() { midea.registerRouter('module', resolve => {require(['../module/module.vue'], resolve)});//懒加载 this.$router.push({path: '/home/module', query: {title: this.title}});}//页面中使用动态组件 <template> <component :is="currentRouter" :moduleName="title"></component> </template><script src="./any.js">export default { data () { return { routeName: '', currentRouter: '', title: '', } }, created() { this.routeName = this.$route.params.name; this.title = this.$route.query.title; this.currentRouter = this.$store.state.routers[this.routeName]; }, methods: { }}</script>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近研究了vue性能优化,涉及到vue异步组件和懒加载。一番研究得出如下的解决方案。原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件
本文实例讲述了Vue2.0实现组件之间数据交互和通信操作。分享给大家供大家参考,具体如下:Vue2.0组件之间数据交互和通信。Vue2.0废弃了dispatch
vue-router路由懒加载和权限控制,今天刚好搞了一个基于nodetoken验证的小demo所以下面介绍下,路由懒加载1、为什么要使用路由懒加载呢用vue.
本文介绍了vue的路由懒加载,分享给大家,具体如下:我们可以把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件。component可以
未使用懒加载importVuefrom'vue';importRouterfrom'vue-router';importHelloWorldfrom'@comp