【vue系列】當 element-ui 按需引入遇到 vue-router 路由懶加載

問題背景

當前的一個項目用到了 element-ui 的部分組件,由於是隻是使用部分組件,咱們只引入須要的組件,以達到減少項目體積的目的。按照 element-ui 按需引入的方法首先,安裝了 babel-plugin-componentjavascript

npm install babel-plugin-component -D
複製代碼

而後在根目錄下添加 . babelrc文件:java

{
    "presets": [["es2015", { "modules": false }]],
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
}
複製代碼

接下來,咱們只但願引入部分組件,好比 Table 和 TableColumn,那麼須要在 index.js 入口文件中寫入如下內容:webpack

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文件變的很是大,影響頁面加載。因而想針對不一樣路由對應的組件分割成不一樣的代碼塊,而後當路由背訪問的時候再加載對應組件。web

結合 Vue 的異步組件和 Webpack的代碼分割功能,實現路由組件的懶加載。使用 Vue-Router 官網推薦的 動態import 語法定義代碼分塊點(split point)npm

// …

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
    }
]
// …
複製代碼

配置好進行打包構建,報錯了,官網有段提示:element-ui

添加 syntax-dynamic-import 插件,才能使 Babel 能夠正確地解析語法。安裝了插件,發現依舊報錯,仔細觀察插件須要在.babelrc 中配置:bash

{
 "plugins": ["@babel/plugin-syntax-dynamic-import"]
}
複製代碼

這裏跟 element-ui.babelrc 的配置有衝突。只能想其餘辦法解決了。babel

路由組件按需加載

Vue的異步加載組件(不推薦)

經過 resolve => require([‘../path’], resolve) 的方式能夠實現按需加載,而且一個組件會打包成一個js文件。app

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(推薦)

雖然推薦該方法,可是在當前狀況下使用報錯,目前能夠採起方案一或者方案二。問題搞定,就醬吧。😄

相關文章
相關標籤/搜索