問題背景

當前的一個專案用到了 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（推薦）

雖然推薦該方法，但是在當前情況下使用報錯，目前可以採取方案一或者方案二。問題搞定，就醬吧。