vue-router路由懒加载，提高页面性能优化

随着用Vue全家桶打造后台管理系统项目日益增大，我发现使用npm run build后台dist文件越来越大。

正好看到vue-router文档有路由懒加载介绍，个人猜想应该是和图片懒加载一个道理。

文档有对路由懒加载的说明：

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

结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载。

之前router/index.js 组件引入方式

import XXXInfoManage from "../xxx-info/xxx-manage/index.vue"; 

改为路由懒加载之后的代码：

const Foo = resolve => require(['./Foo.vue'], resolve)

或者

const Foo = () => import('./Foo');

在使用某个component的时候才会加载这个相应的组件，这样写大大减少了初始页面 js 的大小。

优化app.js体积，路由组件做异步加载。

　　

转载于:https://www.cnblogs.com/Abner5/p/7400673.html