Vue.js 学习笔记十三：Vue Router 之路由懒加载

最新推荐文章于 2021-08-26 21:00:33 发布

stary1993

最新推荐文章于 2021-08-26 21:00:33 发布

阅读量100

点赞数 1

分类专栏： Vue.js 学习笔记文章标签： vue js

本文链接：https://blog.csdn.net/qq_27875933/article/details/118099727

版权

54 篇文章 10 订阅

订阅专栏

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

首先，我们知道路由中通常会定义很多不同的页面。一般情况下，是放在一个 js 文件中。但是，页面这么多放在一个 js 文件中，必然会造成这个页面非常的大。如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白的情况。这个时候使用路由懒加载就可以了。

路由懒加载的主要作用就是将路由对应的组件打包成一个个的 js 代码块，只有在这个路由被访问到的时候，才加载对应的组件。

懒加载有以下方式：

方式一：结合 Vue 的异步组件和 Webpack 的代码分析。

const About = resolve => { 
	require.ensure(['../views/about'], () => { 
		resolve(require('../views/about')) 
	})
};

方式二：AMD 写法。

const About = resolve => require(['../views/about'], resolve);

方式三（推荐）：在 ES6 中，我们可以有更加简单的写法来组织 Vue 异步组件和 Webpack 的代码分割。

const About = () => import('../views/about')

关注