vue按需加载

问题

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

需求

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

解决

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

文档资料：
异步组件：组件-Vue.js
路由懒加载：懒加载·GitBook

在项目中的具体实现

路由懒加载

在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引入。

import routes from './router/router'