問題背景
當前的一個項目用到了 element-ui 的部分組件,因為是隻是使用部分組件,我們只引入需要的組件,以達到減小項目體積的目的。按照 element-ui 按需引入的方法首先,安裝了 babel-plugin-component
<code>npm install babel-plugin-component -D
複製代碼/<code>
然後在根目錄下添加 . babelrc文件:
<code>{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}/<code>
接下來,我們只希望引入部分組件,比如 Table 和 TableColumn,那麼需要在 index.js 入口文件中寫入以下內容:
<code>import router from './router'
import { Table, TableColumn } from 'element-ui'
Vue.use(Table)
Vue.use(TableColumn)
new Vue({
el: '#myApp',
router,
template: `<router-view>`,
})/<code>
隨著項目業務的不斷增多,打包的Javascript文件變的非常大,影響頁面加載。於是想針對不同路由對應的組件分割成不同的代碼塊,然後當路由背訪問的時候再加載對應組件。
結合 Vue 的異步組件和 Webpack的代碼分割功能,實現路由組件的懶加載。使用 Vue-Router 官網推薦的 動態import 語法定義代碼分塊點(split point)
<code>// …
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
}
]
// …/<code>
配置好進行打包構建,報錯了,官網有段提示:
添加 syntax-dynamic-import 插件,才能使 Babel 可以正確地解析語法。安裝了插件,發現依舊報錯,仔細觀察插件需要在.
babelrc 中配置:<code>{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}/<code>
這裡跟 element-ui 的 .babelrc 的配置有衝突。只能想其他辦法解決了。
路由組件按需加載
Vue的異步加載組件(不推薦)
通過 resolve => require([‘../path’], resolve) 的方式可以實現按需加載,並且一個組件會打包成一個js文件。
<code>const App = resolve => require(['./pages/app'], resolve)
const Subtable = resolve => require(['./pages/subtable'], resolve)
/<code>
webpack2中的require.ensure() (不推薦)
通過 require.ensure() 實現按需加載,接收兩個參數,第二個參數可以指定chunkName。
<code>const App = r => require.ensure([], () => r(require('./pages/app')), 'app')
const Subtable = r => require.ensure([], () => r(require('./pages/subtable')), 'subtable')
/<code>
es提案的動態import(推薦)
雖然推薦該方法,但是在當前情況下使用報錯,目前可以採取方案一或者方案二。問題搞定,就醬吧。
閱讀更多 程序員冰河 的文章
關鍵字: 路由器 中用 JavaScript