目录
路由懒加载
当打包构建应用时,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')