Vue Router 路由懒加载

路由懒加载

路由懒加载

当打包构建应用时，js包会变得非常大，影响页面加载。

结合Vue的异步组件和Webpack的代码分割功能，可以实现路由懒加载，即把不同路由对应的组件分割成不同代码块，当路由被访问的时候才加载对应组件。

Vue异步组件

将异步组件定义为返回一个Promise的工厂函数，该函数返回的Promise应该Resolve组件本身。

const Foo = () =>
  Promise.resolve({
    /* 组件定义对象 */
  })

Webpack代码分割

使用动态import语法来定义代码分块点。

import('./Foo.vue') // 返回 Promise

两者结合

能够定义一个能被Webpack自动代码分割的异步组件。

在路由配置中不需要修改，仍旧直接引用组件：

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
    routes: [{path: '/foo', component: Foo}]
})

当然，还能更简写：

const router = new VueRouter({
    routes: [{path: '/foo', component: () => import('./Foo.vue')}]
})

把组件按组分块

使用命名chunk把某个路由下的所有组件都打包在同个异步块(chunk)中。

chunkFilename

打包出来的chunk路径和命名是极其简单的1,2,3..这样的数字，如果想要定制路径和名字的话，就会涉及到filename和chunkFilename(都是output下面的属性)。

• filename   决定每个入口(entry)输出bundle的名称
• chunkFilename   决定非入口(non-entry)chunk文件的名称

module.exports = {
    //...
    output: {
        filename: '[name].[hash].bundle.js',
        chunkFilename: '[name].[hash].chunk.js',
    }
};

chunkFilename不能像filename中的name那样，可以在entry中定义。对于chunkFilename，默认[id]和[name]是一样的。

命名chunk

一个特殊的注释语法来提供chunk name。

chunkFilename不能灵活自定义，所以就有了/*webpackChunkName:''*/。

Webpack通过增加内联注释来告诉运行时，该有怎样的行为。通过向import中添加注释，可以执行诸如命名chunk或选择不同模式之类的操作。

webpackChunkName是对chunkFilename定义时[name]值的改写。

使用命名chunk按组分块

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

这里的/* webpackChunkName:"group-foo" */ 意味着 [name]为group-foo。

将Foo、Bar、Baz这三个组件分割成块并分到一个组里。

Webpack会将任何一个异步模块与相同的块名称组合到相同的异步块中。