本文摘自PHP中文网,作者青灯夜游,侵删。
下面Vue.js教程栏目给大家介绍一下vue+webpack2实现路由的懒加载的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):
1 |
|
第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):
1 |
|
相关阅读 >>
更多相关阅读请进入《vue》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者