【vue系列】当 element-ui 按需引入遇到 vue-router 路由懒加载

问题背景

当前的一个项目用到了 element-ui 的部分组件，由于是只是使用部分组件，咱们只引入须要的组件，以达到减少项目体积的目的。按照 element-ui 按需引入的方法首先，安装了 babel-plugin-component

npm install babel-plugin-component -D
复制代码

而后在根目录下添加 . babelrc文件：

{
    "presets": [["es2015", { "modules": false }]],
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
}
复制代码

接下来，咱们只但愿引入部分组件，好比 Table 和 TableColumn，那么须要在 index.js 入口文件中写入如下内容：

import router from './router'
import { Table, TableColumn } from 'element-ui'

Vue.use(Table)
Vue.use(TableColumn)

new Vue({
    el: '#myApp',
    router,
    template: `<router-view></router-view>`,
})
复制代码

随着项目业务的不断增多，打包的Javascript文件变的很是大，影响页面加载。因而想针对不一样路由对应的组件分割成不一样的代码块，而后当路由背访问的时候再加载对应组件。

结合 Vue 的异步组件和 Webpack的代码分割功能，实现路由组件的懒加载。使用 Vue-Router 官网推荐的 动态import 语法定义代码分块点（split point）

// …

const App = () => import('./pages/app')
const Subtable = () => import('./pages/subtable')
const routes = [
    {
        path: '/',
        name: 'app',
        meta: {
            title: '下属报表'
        },
        component: App
    },
    {
        path: '/subtable',
        name: 'app',
        meta: {
            title: '下属统计表'
        },
        component: Subtable
    }
]
// …
复制代码

配置好进行打包构建，报错了，官网有段提示：

添加 syntax-dynamic-import 插件，才能使 Babel 能够正确地解析语法。安装了插件，发现依旧报错，仔细观察插件须要在.babelrc 中配置：

{
 "plugins": ["@babel/plugin-syntax-dynamic-import"]
}
复制代码

这里跟 element-ui 的 .babelrc 的配置有冲突。只能想其余办法解决了。

路由组件按需加载

Vue的异步加载组件（不推荐）

经过 resolve => require([‘../path’], resolve) 的方式能够实现按需加载，而且一个组件会打包成一个js文件。

const App = resolve => require(['./pages/app'], resolve)
const Subtable = resolve => require(['./pages/subtable'], resolve)
复制代码

webpack2中的require.ensure() （不推荐）

经过 require.ensure() 实现按需加载，接收两个参数，第二个参数能够指定chunkName。

const App = r => require.ensure([], () => r(require('./pages/app')), 'app')
const Subtable = r => require.ensure([], () => r(require('./pages/subtable')), 'subtable')
复制代码

es提案的动态import（推荐）

虽然推荐该方法，可是在当前状况下使用报错，目前能够采起方案一或者方案二。问题搞定，就酱吧。😄