【譯】如何使用webpack減小vuejs打包的大小

我在Stanley Black & Decker的工業4.0團隊工做。咱們的團隊最近爲Stanley製造工廠建立了至關於App Store的產品。工廠能夠訪問市場並根據他們在該位置生產的產品選擇他們須要的應用程序。這將構建一個自定義構建，將全部這些應用程序捆綁在一塊兒，以便工廠運行。因爲捆綁瞭如此衆多的應用程序，咱們的vue生產構建時，致使多個大小過分的警告。

咱們最初的構建規模

當咱們進行構建時，咱們收到如下2條錯誤消息：

Vue建議捆版bundles不超過244KiB。咱們只有14個資源，每一個資源都超過這個規模。此外，咱們有四個入口點也高於建議的大小。如下是我將構建的大小減半的方法。

致使大型構建包的緣由是什麼？

首先，我須要瞭解致使大型構建包大小的緣由。爲此，我安裝了webpack-bundle-analyzer。這將提供每一個包中項目大小的可視指南。

npm install --save-dev webpack-bundle-analyzer
複製代碼

接下來，我在vue.config.js文件中配置webpack來使用它。下面是個人配置文件vue.config.js的內容：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
    .BundleAnalyzerPlugin;
    module.exports = {
        configureWebpack: {
            plugins: [new BundleAnalyzerPlugin()]
        }
   };
複製代碼

安裝完插件後，我再次運行構建，我能夠看到個人構建大小是2.48MB。從圖像中我能夠看到最大的罪魁禍首是：

• vue-echarts
• vuetify
• moment
• lodash

減小Lodash的大小

Lodash佔用了70.7kb的空間。Lodash僅在咱們的框架中的全部應用程序中的兩個位置使用。這只是兩種方法的大量空間。

咱們不止加載了lodash，咱們也加載了vue-lodash。第一步是移除package.json中沒有使用到的vue-lodash。

下一步是僅從lodash導入咱們須要的兩個項目（庫）。咱們使用的是cloneDeep和sortBy。我替換了導入整個lodash庫的初始調用：

import _ from 'lodash';
複製代碼

我正在用這個只導入咱們須要的兩個項目（庫）的調用替換它。爲此，我將導入從lodash更改成lodash/core。

import { cloneDeep, sortBy } from 'lodash/core';
複製代碼

進行這一更改後，個人構建包的大小從2.48MB減小到2.42MB。這是顯示構建的當前大小的圖像。

在這裏咱們能夠看到lodash自己做爲構建包一部分的大小。

減小moment.js的大小

Moment.js在構建包中佔了234.36KB。當你查看圖片的時，該大小的絕大部分是它們支持的全部語言的國際化語言環境。咱們根本沒有使用moment.js的這一部分，因此咱們打包中包含了沒必要要部分。

幸運的是，咱們能夠刪除它。而不是使下面的調用導入全部moment.js。

import moment form 'moment';
複製代碼

咱們只能經過此調用導入日期操做代碼：

import moment from 'moment/src/moment'
複製代碼

至少在咱們的代碼庫中進行替換是一個問題。有18個地方在代碼中導入了moment.js。我本能夠在代碼中進行全局搜索和替換。可是若是咱們向框架添加一個新的應用程序，開發人員極可能會使用默認調用來導入moment.js。若是他們這樣作，那麼咱們將再次導入全部國際語言環境。

所以，權衡以後，在webpack中建立一個快捷方式的別名。該快捷方式將用moment/src/moment替換全部導入moment的調用。咱們可使用resolve和設置別名在咱們的vue.config.js文件添加該別名。這是我vue.config.js如今的樣子。

當咱們如今運行構建時，咱們的捆綁包如今已經降低到2.22MB的大小了。

當你查看圖像的moment.js時，你將看到國際化區域設置根本再也不被加載。

經過刪除moment.js中的語言環境，每當我啓動服務器運行個人代碼時都會發生錯誤，該錯誤代碼說它沒法找到./locale。在作了一些研究以後，我發現這已經成爲了moment.js的一個已知好幾年的問題，moment.js老是加載並假定locales是如今。你沒法分辨加載日期操做功能的時刻。

要解決這個問題，我使用內置的webpack IgnorePlugin忽略此消息。這是我添加到個人vue.config.js文件中的插件代碼：

new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)
複製代碼

減小Vuetify.js的大小

個人下一個目標是Vuetify.js的大小。Vuetify佔用空間500.78KB。對於一個供應商產品來講，這是一個巨大的空間。

Vuetify提供了一種他們稱之爲點菜的功能。這容許你僅導入你使用的Vuetify組件。這會減小Vuetify的大小。挑戰在於咱們有如此多的應用程序正在進行並試圖肯定咱們正在使用的組件不會改變。

在當前版本的Vuetify（當我寫這篇文章的時候版本爲1.56）中，他們提供了一個名爲vuetify-loader的產品。 它將遍歷你的代碼並肯定你正在使用的全部組件，而後將它們只導入你的構建包。 ⚠️注意：最終vuetify v2將內置此功能。 在該版本可用以前，你必須使用vuetify-loader僅導入你正在使用的組件。 Vuetify文檔說明要得到全部必需的樣式，咱們須要在stylus中導入它們。

我意識到咱們正在運行舊版本的vuetify.js。 因此我決定將個人vuetify版本升級到最新版本。我還同時安裝了style和vuetify-loader：

npm install vuetify vuetify-loader stylus stylus-loader style-loader css-loader --save
複製代碼

我導入Vuetify的插件代碼有一些主題的自定義，以使用咱們公司的調色板。 如下是我目前的Vuetify插件：

我須要將Vuetify的導入更改成從vuetify/lib導入。 我還將導入stylus以得到全部樣式。 這是個人插件代碼如今的樣子：

最後一步是告訴webpack使用vuetify-loader插件，以便它只導入咱們正在使用的組件。 我將須要的插件添加到插件數組。 這是個人vue.config.js文件：

如今，當我運行生產構建時，個人捆綁包大小爲2MB。

減小vue-echarts的大小

Vue-echarts不是我捆綁中最大的項目。 Vue-echarts運行在echarts之上。 和Vuetify同樣，我正在運行兩種產品的舊版本。 將它們升級到最新版本我運行此命令：

npm install echarts vue-echarts --save
複製代碼

我對vue-echarts GitHub repo進行了一些研究，查看全部已關閉的問題，發現最新版本的vue-echarts容許你經過更改導入的內容來加載較小的包。 之前我使用此命令導入它：

import ECharts from 'vue-echarts';
複製代碼

我改爲這種：

import ECharts from 'vue-echarts/components/ECharts.vue';
複製代碼

如今，當我運行生產構建時，個人捆綁包大小降至1.28MB。

總結

個人目標是減小爲咱們的應用程序生產而建立的包的大小。 個人構建的初始大小是2.48MB。 經過進行一些更改，我可以將構建大小減小到1.2MB。 這幾乎減小了50％。

若是要建立生產環境Vue應用程序，則應該花時間來評估構建大小。 使用webpack-bundle-analyzer肯定哪些項目佔用的空間最多。 而後開始採起必要步驟來減小這些項目的大小。 我可以經過這種方式減小捆綁中四個最大項目的大小。

但願對你有幫助，能按照這些步驟來減小生產構建包的大小。

參考和後話

• 原文：dev.to/ratracegrad…
• webpack-bundle-analyzer地址：www.npmjs.com/package/web…
• 文章首發：github.com/reng99/blog…

更多的內容，請戳個人博客進行了解，能留個star就更好了💨