vue-cli 項目實現路由懶加載

在vue 單頁應用中，若是路由不實現懶加載，那麼打包出來的文件將會很是大，加載也會很是慢。vue-router 官網也有相應的介紹，可是具體怎麼去實現仍是講的比較模糊的，下面將一步步講解配置路由懶加載。

先看一下依賴版本：

webpack 3.6.x, vue 2.5.x, babel 6.x

使用vue-cli 2.9構建的項目。

1. 首先下載babel 插件 

babel-plugin-syntax-dynamic-import 6.18.0 到本地依賴

2. 在 .babelrc中配置插件

{
    "presets": [
        ["env", {
            "modules": false,
            "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
        }],
        "stage-2"
    ],
    "plugins": [
        "transform-vue-jsx",
        "transform-runtime",
        "syntax-dynamic-import", // 配置這個插件
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
}

3. 更改打包配置 webpack.prod.conf.js

將chunkFilename的 id 改爲 name

添加 new webpack.NamedChunksPlugins()插件到plugin 中

4. 接下來就是更改router 的配置，實現按需引入

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '*',
            redirect: {
                name: 'Home'
            }
        },
        {
            path: '/home',
            name: 'Home',
            component: () => import(/* webpackChunkName: "home" */ '@/components/Home')
        },
        {
            path: '/remind',
            name: 'Remind',
            component: () => import(/* webpackChunkName: "order" */ '@/components/Remind')
        }
    ]
});

利用webpack 的特殊註釋語句來提供chunkName (須要webpack > 2.4)。

Webpack 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。