vue 按需加载

问题

一个单页面应用，采用组件化的开发模式，没有采用懒加载，运用webpack打包，每次启动首页都会加载全部组件，但此时只是访问了首页而已，就造成了大量组件污染加载的情况。

需求

只在访问当前页面时加载对应组件，避免页面组件全部加载。

解决

我们可以通过实现路由懒加载和异步组件解决问题。

在项目中的具体实现

路由懒加载

在vue项目中使用路由懒加载非常简单，我们要做的就是把路由对应的组件定义成异步组件:

router.js

// 单独引入 import App from '../App'  // 其他路由异步加载 // require.ensure 是 Webpack 的特殊语法，用来设置 code-split point，实现代码分割 const home = r => require.ensure([], () => r(require('../page/home/home')), 'home') const city = r => require.ensure([], () => r(require('../page/city/city')), 'city')  export default [{     path: '/',     component: App, //顶层路由，对应index.html     children: [ //二级路由。对应App.vue         //地址为空时跳转home页面         {             path: '',             redirect: '/home'         },         //首页城市列表页         {             path: '/home',             component: home         },         //当前选择城市页         {             path: '/city/:cityid',             component: city             // or             //component: resolve => { require(['../page/city/city'], resolve); }         }     ] }]

注意

文档：webpack 如何使用 require.ensure() 进行代码拆分。

// require.ensure()语法： require.ensure(dependencies: String[], callback: function(require), chunkName: String)

require接收三个参数：

第一个参数是一个数组，表示所依赖的模块，例如['moduleA', 'moduleB']
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用
chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的文件束(bundle)。
如上述例子中的home和city组件，分别被打包到两个chunk中，每个组件加载时都只会加载自己对应的代码，可以加快渲染速度！

main.js

最后，不要忘记在main.js将router引入。