我在Stanley Black & Decker的工業(yè)4.0團(tuán)隊(duì)工作。我們的團(tuán)隊(duì)最近為Stanley制造工廠創(chuàng)建了相當(dāng)于App Store的產(chǎn)品。工廠可以訪問(wèn)市場(chǎng)并根據(jù)他們?cè)谠撐恢蒙a(chǎn)的產(chǎn)品選擇他們需要的應(yīng)用程序。這將構(gòu)建一個(gè)自定義構(gòu)建，將所有這些應(yīng)用程序捆綁在一起，以便工廠運(yùn)行。由于捆綁了如此眾多的應(yīng)用程序，我們的vue生產(chǎn)構(gòu)建時(shí)，導(dǎo)致多個(gè)大小過(guò)度的警告。
我們最初的構(gòu)建規(guī)模
當(dāng)我們進(jìn)行構(gòu)建時(shí)，我們收到以下2條錯(cuò)誤消息：
Vue建議捆版bundles不超過(guò)244KiB。我們只有14個(gè)資源，每個(gè)資源都超過(guò)這個(gè)規(guī)模。此外，我們有四個(gè)入口點(diǎn)也高于建議的大小。以下是我將構(gòu)建的大小減半的方法。
導(dǎo)致大型構(gòu)建包的原因是什么？
首先，我需要了解導(dǎo)致大型構(gòu)建包大小的原因。為此，我安裝了webpack-bundle-analyzer。這將提供每個(gè)包中項(xiàng)目大小的可視指南。
npm install --save-dev webpack-bundle-analyzer
接下來(lái)，我在vue.config.js文件中配置webpack來(lái)使用它。下面是我的配置文件vue.config.js的內(nèi)容：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
安裝完插件后，我再次運(yùn)行構(gòu)建，我可以看到我的構(gòu)建大小是2.48MB。從圖像中我可以看到最大的罪魁禍?zhǔn)资牵?/p>
- vue-echarts
- vuetify
- moment
- lodash
減少Lodash的大小
Lodash占用了70.7kb的空間。Lodash僅在我們的框架中的所有應(yīng)用程序中的兩個(gè)位置使用。這只是兩種方法的大量空間。
我們不止加載了lodash，我們也加載了vue-lodash。第一步是移除package.json中沒(méi)有使用到的vue-lodash。
下一步是僅從lodash導(dǎo)入我們需要的兩個(gè)項(xiàng)目（庫(kù)）。我們使用的是cloneDeep和sortBy。我替換了導(dǎo)入整個(gè)lodash庫(kù)的初始調(diào)用：
import _ from 'lodash';
我正在用這個(gè)只導(dǎo)入我們需要的兩個(gè)項(xiàng)目（庫(kù)）的調(diào)用替換它。為此，我將導(dǎo)入從lodash更改為lodash/core。
import { cloneDeep, sortBy } from 'lodash/core';
進(jìn)行這一更改后，我的構(gòu)建包的大小從2.48MB減少到2.42MB。這是顯示構(gòu)建的當(dāng)前大小的圖像。
在這里我們可以看到lodash本身作為構(gòu)建包一部分的大小。
減少moment.js的大小
Moment.js在構(gòu)建包中占了234.36KB。當(dāng)你查看圖片的時(shí)，該大小的絕大部分是它們支持的所有語(yǔ)言的國(guó)際化語(yǔ)言環(huán)境。我們根本沒(méi)有使用moment.js的這一部分，所以我們打包中包含了不必要部分。
幸運(yùn)的是，我們可以刪除它。而不是使下面的調(diào)用導(dǎo)入所有moment.js。
import moment form 'moment';
我們只能通過(guò)此調(diào)用導(dǎo)入日期操作代碼：
import moment from 'moment/src/moment'
至少在我們的代碼庫(kù)中進(jìn)行替換是一個(gè)問(wèn)題。有18個(gè)地方在代碼中導(dǎo)入了moment.js。我本可以在代碼中進(jìn)行全局搜索和替換。但是如果我們向框架添加一個(gè)新的應(yīng)用程序，開發(fā)人員很可能會(huì)使用默認(rèn)調(diào)用來(lái)導(dǎo)入moment.js。如果他們這樣做，那么我們將再次導(dǎo)入所有國(guó)際語(yǔ)言環(huán)境。
因此，權(quán)衡之后，在webpack中創(chuàng)建一個(gè)快捷方式的別名。該快捷方式將用moment/src/moment替換所有導(dǎo)入moment的調(diào)用。我們可以使用resolve和設(shè)置別名在我們的vue.config.js文件添加該別名。這是我vue.config.js現(xiàn)在的樣子。
當(dāng)我們現(xiàn)在運(yùn)行構(gòu)建時(shí)，我們的捆綁包現(xiàn)在已經(jīng)下降到2.22MB的大小了。
當(dāng)你查看圖像的moment.js時(shí)，你將看到國(guó)際化區(qū)域設(shè)置根本不再被加載。
通過(guò)刪除moment.js中的語(yǔ)言環(huán)境，每當(dāng)我啟動(dòng)服務(wù)器運(yùn)行我的代碼時(shí)都會(huì)發(fā)生錯(cuò)誤，該錯(cuò)誤代碼說(shuō)它無(wú)法找到./locale。在做了一些研究之后，我發(fā)現(xiàn)這已經(jīng)成為了moment.js的一個(gè)已知好幾年的問(wèn)題，moment.js總是加載并假定locales是現(xiàn)在。你無(wú)法分辨加載日期操作功能的時(shí)刻。
要解決這個(gè)問(wèn)題，我使用內(nèi)置的webpack IgnorePlugin忽略此消息。這是我添加到我的vue.config.js文件中的插件代碼：
new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)
減少Vuetify.js的大小
我的下一個(gè)目標(biāo)是Vuetify.js的大小。Vuetify占用空間500.78KB。對(duì)于一個(gè)供應(yīng)商產(chǎn)品來(lái)說(shuō)，這是一個(gè)巨大的空間。
Vuetify提供了一種他們稱之為點(diǎn)菜的功能。這允許你僅導(dǎo)入你使用的Vuetify組件。這會(huì)減少Vuetify的大小。挑戰(zhàn)在于我們有如此多的應(yīng)用程序正在進(jìn)行并試圖確定我們正在使用的組件不會(huì)改變。
在當(dāng)前版本的Vuetify（當(dāng)我寫這篇文章的時(shí)候版本為1.56）中，他們提供了一個(gè)名為vuetify-loader的產(chǎn)品。 它將遍歷你的代碼并確定你正在使用的所有組件，然后將它們只導(dǎo)入你的構(gòu)建包。 ??注意：最終vuetify v2將內(nèi)置此功能。 在該版本可用之前，你必須使用vuetify-loader僅導(dǎo)入你正在使用的組件。 Vuetify文檔說(shuō)明要獲得所有必需的樣式，我們需要在stylus中導(dǎo)入它們。
我意識(shí)到我們正在運(yùn)行舊版本的vuetify.js。 所以我決定將我的vuetify版本升級(jí)到最新版本。我還同時(shí)安裝了style和vuetify-loader：
npm install vuetify vuetify-loader stylus stylus-loader style-loader css-loader --save
我導(dǎo)入Vuetify的插件代碼有一些主題的自定義，以使用我們公司的調(diào)色板。 以下是我目前的Vuetify插件：
我需要將Vuetify的導(dǎo)入更改為從vuetify/lib導(dǎo)入。 我還將導(dǎo)入stylus以獲得所有樣式。 這是我的插件代碼現(xiàn)在的樣子：
最后一步是告訴webpack使用vuetify-loader插件，以便它只導(dǎo)入我們正在使用的組件。 我將需要的插件添加到插件數(shù)組。 這是我的vue.config.js文件：
現(xiàn)在，當(dāng)我運(yùn)行生產(chǎn)構(gòu)建時(shí)，我的捆綁包大小為2MB。
減少vue-echarts的大小
Vue-echarts不是我捆綁中最大的項(xiàng)目。 Vue-echarts運(yùn)行在echarts之上。 和Vuetify一樣，我正在運(yùn)行兩種產(chǎn)品的舊版本。 將它們升級(jí)到最新版本我運(yùn)行此命令：
npm install echarts vue-echarts --save
我對(duì)vue-echarts GitHub repo進(jìn)行了一些研究，查看所有已關(guān)閉的問(wèn)題，發(fā)現(xiàn)最新版本的vue-echarts允許你通過(guò)更改導(dǎo)入的內(nèi)容來(lái)加載較小的包。 以前我使用此命令導(dǎo)入它：
import ECharts from 'vue-echarts';
我改成這種：
import ECharts from 'vue-echarts/components/ECharts.vue';
現(xiàn)在，當(dāng)我運(yùn)行生產(chǎn)構(gòu)建時(shí)，我的捆綁包大小降至1.28MB。
總結(jié)
我的目標(biāo)是減少為我們的應(yīng)用程序生產(chǎn)而創(chuàng)建的包的大小。 我的構(gòu)建的初始大小是2.48MB。 通過(guò)進(jìn)行一些更改，我能夠?qū)?gòu)建大小減少到1.2MB。 這幾乎減少了50％。
如果要?jiǎng)?chuàng)建生產(chǎn)環(huán)境Vue應(yīng)用程序，則應(yīng)該花時(shí)間來(lái)評(píng)估構(gòu)建大小。 使用webpack-bundle-analyzer確定哪些項(xiàng)目占用的空間最多。 然后開始采取必要步驟來(lái)減少這些項(xiàng)目的大小。 我能夠通過(guò)這種方式減少捆綁中四個(gè)最大項(xiàng)目的大小。
希望對(duì)你有幫助，能按照這些步驟來(lái)減少生產(chǎn)構(gòu)建包的大小。
參考和后話
- 原文：https://dev.to/ratracegrad/how-to-reduce-your-vue-js-bundle-size-with-webpack-4gpf
- webpack-bundle-analyzer地址：https://www.npmjs.com/package/webpack-bundle-analyzer
- 文章首發(fā)：https://github.com/reng99/blogs/issues/42
更多的內(nèi)容，請(qǐng)戳我的博客進(jìn)行了解，能留個(gè)star就更好了??
