Vueを減らす方法.JSの束のサイズ

私は、スタンリーブラックとデッカーの業界4.0チームに取り組みます.当社のチームは最近、スタンリーの製造工場の世界のApp Storeの相当を作成しました.工場は、市場を訪問することができますし、その場所で生産されている製品に基づいて必要なアプリケーションを選択します.これは、これらのアプリケーションのすべてを一緒にバンドルされるカスタムビルドを作成します.このような大量のアプリケーションのバンドルのために、私たちの生産のためのVue - buildは過剰なサイズに関する複数の警告をもたらしました.

最初のビルドのサイズ
ビルドを行うと、次の2つのエラーメッセージが得られます.

Vueは、バンドルは244キブのサイズを超えていないことをお勧めします.私達は14の資産だけを持っている.また、推奨サイズ以上の4つのエントリポイントがあります.ここで私たちは半分のビルドのサイズを小さくした.

何が大きなビルドの束を引き起こしている?
最初に大きなビルドバンドルのサイズを引き起こしているのかを理解する必要がありました.それをするために、私はCount - Webpack束アナライザをインストールしました.これは、各束の項目のサイズに視覚的なガイドを提供します.npm install --save-dev webpack-bundle-analyzer次に、vueをvueで使用するように設定します.設定.jsファイル.これが私のVueです.設定.jsファイルは次のようになります.

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

ビルドを再度ビルドするときにプラグインがインストールされているので、ビルドは2.48 MBです.私が見ることができるイメージから、サイズで最も大きい犯人は明らかです:

Vueチャート

ブットファイファイ

瞬間

ロダッシュ

LODARのサイズを減らす
ロダッシュはスペースの70.74 KBを取っていました.Lodashは、我々のフレームワークのアプリケーションのすべての2つの場所でのみ使用されます.それはちょうど2つの方法のための多くのスペースです.

ロワールをロードしただけでなく、Vue lodashもロードしました.最初のステップはVue lodashをパッケージから削除することでした.それが必要でなかったので、JSON.
次のステップは、ライブラリ全体をロードする代わりにlodashから必要な2つの項目だけをインポートすることでした.我々は、使用していたcloneDeep ○○sortBy . 私は、全体のlodashライブラリをインポートしていた最初の呼び出しを置き換えます:import _ from 'lodash';私は、我々が必要とするちょうど2つのアイテムを輸入するこの呼び出しと取り替えます.そのためには、lodashからimport/coreに移行します.import { cloneDeep, sortBy } from 'lodash/core';この1つの変更を行うと、2.48 MBから2.42 MBまで私のビルドバンドルのサイズを減らしました.ビルドの現在のサイズを示すイメージです.

ここでは、ビルドバンドルの一部としてLODLE自体のサイズを見ることができます.


モーメントの縮小js
瞬間.JSは、我々の束でサイズで234.36 KBを占めています.あなたがイメージを見るとき、そのサイズの圧倒的な最大の部分は彼らが支えるすべての言語のための国際化ロケールです.我々は、瞬間のこの部分を使用しません.JSのすべてのようにこれは私たちの束に含まれている多くの死んだ重量です.
幸いにも、我々はそれを削除することができます.代わりにすべての瞬間をインポートします.この呼び出しによるjs :import moment form 'moment';このコールだけで日付操作コードをインポートできます.import moment from 'moment/src/moment'少なくともこの種のコードベースでこの置換を行う際にキャッチがあります.現在18箇所あります.JSはコードにインポートされます.私は、世界的な検索をして、コードで交換することができました.しかし、我々がフレームワークに新しいアプリケーションを加えるならば、開発者はインポート瞬間へのデフォルトの呼び出しを使用するのは全く可能です.jsそうすれば、再び国際化ロケールをインポートすることになるでしょう.
それで、トレードオフはWebpackのショートカットエイリアスを作成することでした.ショートカットは'モーメント'を'モーメント/src/モーメント'にインポートするすべての呼び出しを代用します.私たちのVueでその別名を加えることができます.設定.解決を使用しているファイルとエイリアスを設定するJSファイル.これが私のVueです.設定.JSファイルは今のように見えます.

私が現在生産のために我々のビルドを走らせるとき、我々の束は現在サイズで2.22 MBに落ちました.

あなたが瞬間を見るとき.イメージのJSは、国際化のロケールがもはやロードされていないことがわかります.

でロケールを削除します.JSは、私のサーバーを起動するたびにエラーを導入しました../locale . 若干の研究をした後に、私はこれが瞬間に既知の問題であったということを発見しました.その瞬間の数年の間のJS.JSは常にロードして、ロケールが存在すると仮定します.あなたは、ちょうど日付操作機能をロードするために、瞬間を言うことができません.
これを解決するために、私はこのメッセージを無視するためにビルトインWebpack Ignorepluginを使用します.ここで私は私の角Vueに追加されたプラグインのコードです.設定.jsファイル

new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)

Vuetifyのサイズの縮小js
ターゲットにしたい次は、Vuetifyのサイズです.jsVuetifyスペースで500.78 KBを取っている.それは、1つのベンダー製品のためのスペースの膨大な量です.

Vuetifyは、彼らがA -カートを呼び出す機能を提供します.これにより、使用するVuetifyコンポーネントだけをインポートできます.これは、大きさvuetifyを減らします.課題は、多くのアプリケーションを通過し、私たちが使用しているだけのコンポーネントを決定しようとしていることが起こっていないことです.
Vuetify(バージョン1.56の現在のバージョンでは、私はこの記事を書いた)彼らは製品を提供しています.それはあなたのコードを通過し、使用しているすべてのコンポーネントを決定し、それらをビルドバンドルにだけインポートします.注意:最後にVuetify V 2は、この機能を内蔵しているでしょう.あなたが使用しているだけのコンポーネントをインポートするVuetifyローダを使用する必要がありますので、そのリリースまで利用可能です.すべての必要なスタイルを取得するには、我々はスタイラスでそれらをインポートする必要がありますVuetifyドキュメントの状態.
私は、我々がVuetifyの古いバージョンを走らせていると理解しました.jsそれで、私は最新バージョンにVuetifyの私のバージョンをアップグレードすることに決めます.私も、スタイルとVuetifyローダを同時にインストールしますnpm install vuetify vuetify-loader stylus stylus-loader style-loader css-loader --saveVuetifyをインポートする私のプラグインのコードは、当社のカラーパレットを使用するテーマのいくつかのカスタマイズがあります.Vuetifyの現在のプラグインは次のようになります.

私はVuetify/インポートからインポートするVuetifyのインポートを変更する必要があります.また、すべてのスタイルを得るためにスタイラスをインポートします.プラグインのコードが次のようになります.

最後のステップは、私たちが使用しているコンポーネントのみをインポートするように、Vuetifyローダープラグインを使用するようにWebPackに伝えることです.プラグインを必要とし、プラグインの配列に追加します.これが私の変です.設定.JSファイル

今、私が私のビルドのために私のビルドを実行するとき、私の束サイズは2 MBです.


Vue echartのサイズの縮小
Vue eChartは私が私の束に持っている最大の項目ではありません.Vue eChart eChartの上に実行されます.Vuetifyのように、私は両方の製品の古いバージョンを実行しています.このコマンドを実行する最新バージョンの両方をアップグレードするには、次のコマンドを実行します.npm install echarts vue-echarts --save私はVue eChart GitthubレポはVue eChartの最新バージョンがあなたがインポートするものを変更することによって小さな束を読み込むことができることを見つけるためにすべての閉じられた問題を見ていくつかの研究を行った.以前はこのコマンドを使ってインポートしました.import ECharts from 'vue-echarts';次のように変更します.import ECharts from 'vue-echarts/components/ECharts.vue';私が生産のためにビルドを走らせる今、私のバンドルサイズは1.28 MBまで下がっています.


結論
私の目標は、我々のアプリケーションの生産のために作成された束のサイズを減らすことでした.ビルドの初期サイズは2.48 MBでした.いくつかの変更を加えることで、ビルドサイズを1.2 MBまで削減できました.これは約50 %のサイズの縮小です.
あなたが生産Vueアプリケーションを作成しているならば、あなたはあなたの造りサイズを評価するために時間がかかるべきです.Webpackバンドルアナライザを使用して、どの項目が最も多くのスペースを消費しているかを確認します.その後、これらの項目のサイズを減らすために必要な手順を開始します.私はこのように私の束の4つの最大項目のサイズを小さくすることができました.
うまくいけば、生産のためのビルドのサイズを減らすためにこれらのステップに従うことができます.何か質問やコメントがあれば、下に投稿してください.読書ありがとうございます.

トレーニングコース
私は、私のウェブサイトCodeprepにトレーニングコースをつくります.私は、Vue、Webpack、Flexbox、機能的なプログラミングとより多くのトレーニングコースを持っています.Check it out here.