Vue.js中用webpack合并打包多個(gè)組件并實(shí)現(xiàn)按需加載

前言

隨著移動(dòng)設(shè)備的升級(jí)、網(wǎng)絡(luò)速度的提高，用戶對(duì)于web應(yīng)用的要求越來(lái)越高，web應(yīng)用要提供的功能越來(lái)越。功能的增加導(dǎo)致的最直觀的后果就是資源文件越來(lái)越大。為了維護(hù)越來(lái)越龐大的客戶端代碼，提出了模塊化的概念來(lái)組織代碼。webpack作為一種模塊化打包工具，隨著react的流行也越來(lái)越流行。

使用 Vue 開(kāi)發(fā)項(xiàng)目時(shí)，如果要使用其單文件組件特性，必然要使用 webpack 或者 browserify 進(jìn)行打包，對(duì)于大型應(yīng)用，為了提升加載速度，可以使用 webpack 的 code split 功能進(jìn)行分割打包，生成較小的模塊并按需加載，這在 Vue 文檔及 vue-router 文檔中均有介紹：Async Components、Lazy Loading。

webpack 的 code split 可以使用 webpack 的 require.ensure 特殊語(yǔ)法或者使用 AMD 風(fēng)格的 callback-require 語(yǔ)法，以 AMD 風(fēng)格的 callback-require 語(yǔ)法為例——

全局注冊(cè) Async Component：

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
Vue.component('async-webpack-example', myAsyncComponent)

局部注冊(cè) Async Component，單文件組件中 script 塊內(nèi)容：

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}

// Vue 擴(kuò)展實(shí)例選項(xiàng)，其他選項(xiàng)略
export default {
 components: {
 'async-webpack-example': myAsyncComponent
 }
}

在使用 vue-router 時(shí)，為實(shí)現(xiàn)不同路由下的組件異步加載，在路由映射中可以使用同樣的方式來(lái)設(shè)置路由項(xiàng)的 component 屬性。

這里的 myAsyncComponent 被定義為一個(gè)工廠函數(shù)，在需要時(shí)才會(huì)以 Vue 或者 vue-router 定義的用于解析組件選項(xiàng)的 resolve 回調(diào)函數(shù)（是的，在 Vue 和 vue-router 中有兩個(gè)不同的解析組件選項(xiàng)的函數(shù)）為參數(shù)執(zhí)行 callback-require 函數(shù)（resolve 回調(diào)函數(shù)的參數(shù)是組件選項(xiàng)），這樣，在執(zhí)行打包腳本時(shí)，my-async-component.vue 文件會(huì)被單獨(dú)打包成一個(gè)文件，并且僅當(dāng)該組件被使用時(shí)才會(huì)加載。

當(dāng)要求異步加載的組件較多時(shí)，將會(huì)生成更多的單個(gè)文件，對(duì)于前端性能而言，雖然每個(gè)文件更小了，但可能意味著更多的網(wǎng)絡(luò)連接建立和關(guān)閉的開(kāi)銷，因此在前端優(yōu)化的實(shí)踐中，通常需要在文件數(shù)量和單個(gè)文件大小之間取得平衡。

本文介紹如何將多個(gè)組件合并打包成一個(gè)單獨(dú)的文件，一方面可以減少代碼塊的數(shù)量，另一方面，如果合并打包的這些組件在不同地方多次重復(fù)使用，由于 Vue 的緩存機(jī)制，可以加快后續(xù)組件的加載速度，并且如果這些通用組件長(zhǎng)時(shí)間不會(huì)變化（如 UI 相關(guān)的組件），打包生成的文件也長(zhǎng)期不會(huì)變化，可以充分利用瀏覽器的緩存功能，實(shí)現(xiàn)前端加載速度的優(yōu)化。

先上效果圖，在使用 vue-router 的 SPA 應(yīng)用中，將除根路由之外的路由項(xiàng)對(duì)應(yīng)的 ComponentA、ComponentB、ComponentC 等三個(gè)組件合并打包成一個(gè)文件。初次加載頁(yè)面時(shí)，從開(kāi)發(fā)者工具的 Network 面板上可以看到，此時(shí)未加載包含 ComponentA、ComponentB、ComponentC 這三個(gè)組件的 0.a5a1bae6addad442ac82.js 文件，當(dāng)點(diǎn)擊 Page A 鏈接時(shí)，加載了該文件，然后再點(diǎn)擊 Page B、Page C 鏈接時(shí)，沒(méi)有重新加載該文件。

我們首先通過(guò) vue-cli 命令行工具使用 webpack 項(xiàng)目模板創(chuàng)建一個(gè)包含 vue-router 的項(xiàng)目，在其 src/components 目錄下創(chuàng)建一個(gè) CommonComponents 目錄，在該目錄中創(chuàng)建 ComponentA、ComponentB、ComponentC 這三個(gè)組件。

同時(shí)在 CommonComponents 目錄下創(chuàng)建 index.js，其內(nèi)容如下：

exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./ComponentB')
exports.ComponentC = require('./ComponentC')

這樣，我們只需要使用 webpack 的 require.ensure 特殊語(yǔ)法或者使用 AMD 風(fēng)格的 callback-require 語(yǔ)法異步加載 CommonComponents 目錄下的 index.js，在使用 webpack 進(jìn)行打包時(shí)，就可以實(shí)現(xiàn)將 ComponentA、ComponentB、ComponentC 這三個(gè)組件合并打包。以 AMD 風(fēng)格的 callback-require 語(yǔ)法為例示范如下，這里的 callback 回調(diào)函數(shù)的形式?jīng)]有任何特殊要求。

require(['component/CommonComponents'], function (CommonComponents) {
 // do whatever you want with CommonComponents
})

component/CommonComponents 模塊加載成功時(shí)，這里的回調(diào)函數(shù)中的 CommonComponents 參數(shù)將會(huì)是一個(gè)包含 ComponentA、ComponentB、ComponentC 這三個(gè)組件選項(xiàng)的對(duì)象。

在定義異步解析組件時(shí)，我們使用的是一個(gè)工廠函數(shù) resolve => {require(['./my-async-component'], resolve)}，如果需要在路由配置文件中添加 component 屬性為 ComponentA 組件的路由項(xiàng)，應(yīng)該定義什么樣的工廠函數(shù)呢？記住這里的 resolve 是一個(gè)用于解析組件選項(xiàng)的回調(diào)函數(shù)，其參數(shù)是所獲取的組件選項(xiàng)，而上一段代碼中的 CommonComponents 恰好是包含若干個(gè)組件選項(xiàng)的對(duì)象，因此我們可以將 CommonComponents 的子屬性作為參數(shù)用于 resolve 調(diào)用，我們編寫一個(gè)函數(shù) getCommonComponent，用于根據(jù)組件名稱返回獲取相應(yīng)的組件選項(xiàng)的工廠函數(shù)。

let getCommonComponent = componentName => resolve => require(['components/CommonComponents'], components => resolve(components[componentName]))

在組件模板或者路由映射等使用其中某一個(gè)組件的地方，可以使用類似于 getCommonComponent('ComponentA') 這樣的函數(shù)調(diào)用進(jìn)行組件設(shè)置，在路由映射中的使用示例如下：

routes: [
 {
 path: '/',
 name: 'Hello',
 component: Hello
 },
 {
 path: '/a',
 name: 'A',
 component: getCommonComponent('ComponentA')
 },
 {
 path: '/b',
 name: 'B',
 component: getCommonComponent('ComponentB')
 },
 {
 path: '/c',
 name: 'C',
 component: getCommonComponent('ComponentC')
 }
]

最終打包生成的文件列表如下圖所示，其中的 0.a5a1bae6addad442ac82.js 包含了 ComponentA、ComponentB、ComponentC 這三個(gè)組件。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。