Vue パッケージサイズの最適化の実装 (1.72M から 94K)

1. 背景

最近、独立した開発者がUIデザインを行うのを支援するために、uideaというWebサイトを作成しました。当時は開発のみを担当していました。展開後、アクセス速度が心配であることがわかりました。結局のところ、それは小さな水道管サーバーでした。帯域幅を増やすことと比較して、コードを最初に最適化できるかどうかを確認する必要があります。これは、より費用対効果が高いです。これは最適化前のパッケージサイズです。このやつは1.72Mです。小さな水道管の読み込み時間は、直接3秒以上になります。我慢できません。

II. 目的

これを最適化する必要があります。最適化の前に、大まかに目標を設定する必要があります。目標は指標で測定する必要があるため、2 つの指標を設定します。

• ページの読み込み時間は少なくとも 1 秒以内である必要があります。速ければ速いほど良いです。
• パッケージサイズは200k以内に制限されています

なぜこれら 2 つの目標を設定したのでしょうか?まず、ページの読み込み時間は解決すべき最後の問題です。予備的な観点から、ページの読み込み時間に影響を与える要因は、ネットワークとパッケージサイズの2つです。ネットワークは一時的に資金が不足しており、アップグレードできないため、主な最適化はパッケージサイズに焦点を当てています。まず、パッケージサイズが何であるかを定義する必要があります。ここでは主にエントリパッケージサイズを参照します。Vueの場合、app.jsとapp.cssです。エントリが読み込まれた後、少なくともページを表示できます。

パッケージサイズはどの程度最適化すべきでしょうか?

一方、vue-cli-service は 244K を超えないようにすることをお勧めします。一方、類似の Web サイトのパッケージ サイズがどれくらい大きいかを確認するためのベンチマークを見つける必要があります。次に、参照もあります。私は materialpalette を選択しました。そのパッケージ サイズは約 150k です。私の機能はより複雑なので、2 つの間の 200K を目標としました。

なぜここで目標について話す必要があるのでしょうか?なぜなら、目標は実はとても重要だからです。古いことわざにあるように、目標を目指しましょう。目標がなければ、実行プロセスの途中で諦めたり、半歩前進しただけで止まったりしがちです。

デートを例に挙げてみましょう。もしあなたの目標がガールフレンドを見つけることであれば、おそらく見つけることはできないでしょう。しかし、もしあなたの目標が特定の女の子（例えば張三）をガールフレンドとして追いかけることであれば、その女の子のために的を絞った準備をすることができるので、成功の確率は大幅に高まります。

3. 解決策

目標が設定されたら、計画が決定されます

Web 最適化を行うのは今回が初めてですが、以前に Android パッケージ サイズの最適化の経験があり、原則は常に同じであるため、最初に次の戦略を考えました。

1. コードの難読化
2. リソースはCDNに配置します。開発しやすいため、リソースはassets配下に配置し、直接requireします。これも大きなポイントです。
3. 役に立たないライブラリを削除し、類似の機能を持つライブラリを統合し、いくつかのライブラリだけを使用して自分で実装できるかどうかを確認します。
4. gzip 圧縮
5. サードパーティのライブラリもCDN上に配置されます

1 - 3 は、最初に思い浮かぶ 3 つの最適化ソリューションです。次に、Vue の対応する最適化戦略をオンラインで検索し、最後の 2 つを追加しました。ルートの遅延読み込みなどの他のソリューションもありますが、この Web サイトの主なコンテンツはホームページに集中しているため、これは考慮しませんでした (良い点はたくさんありますが、ローカルの状況に適応するのが最善です)
合計5つの最適化戦略が設定されました。これから始めます

IV. 実行

1. コードの難読化

コード難読化についてはあまり語りません。一方ではパッケージサイズを節約できますが、他方では逆コンパイルの難しさが増す可能性があります。インターネットで Vue 難読化の設定を検索しました (結局、巨人の肩の上に立たなければなりません)。試してみるとうまくいきました。設定は次のとおりです。

const CompressionWebpackPlugin = require('compression-webpack-plugin');
モジュール.エクスポート = {
 Webpack を構成する: (config) => {
  // uglifyjs-webpack-plugin をインポートします
  UglifyPlugin = require('uglifyjs-webpack-plugin'); を設定します。

  process.env.NODE_ENV == 'production'の場合{
   // 圧縮と難読化 config.mode = 'production'
   //各依存パッケージを別々のjsファイルにパッケージ化します。let optimize = {
    最小化ツール: [新しいUglifyPlugin({
     醜いオプション: {
      警告: 偽、
      圧縮: {
       drop_console: true、
       drop_debugger: false、
       pure_funcs: ['console.log']
      }
     }
    })]
   }
   オブジェクト.assign(config, {
    最適化
   })
  } それ以外 {
   // 開発環境の設定を変更 config.mode = 'development'
}
  }
 }
}

2. CDNにリソースを配置する

このステップも簡単に実行できます。すべてのリソースは Alibaba Cloud OSS に配置され、数分で完了します。

3. 未使用ライブラリの削除

このステップには時間がかかりました。開発時に、GitHub で多数のライブラリを検索し、yarn add でインポートしただけだったからです。今度は、それらを再度分割する必要があります。

パッケージのステータスを確認するには、パッケージコマンドの後に --report を追加します。

糸ビルド --レポート

まず、ElementUi (gzip 圧縮後約 158k) を削除します。開発中は、ElementUi と Vuetify が混在していました。実際は、Vuetify だけで十分です。その後、インターフェイスにいくつかの小さな変更を加えれば完了です。

次に、lodash があります。私はその中でいくつかのメソッドしか使用していませんでしたが、全体のサイズは小さくなく、gzip 圧縮後は約 25k です。そこで、lodash のソース コードを探して、使用されているいくつかのメソッドを抽出するつもりでしたが、lodash のコードはネストが深く、参照が深すぎるため、抽出したくありませんでした。私は単にこのライブラリを削除し、それらを置き換えるより純粋な実装をいくつか見つけました。私の時間のほとんどは、lodash のソース コードを読むことに費やされました。

それから、vuescroll があります。カスタム スクロールバー スタイルを実装するときに、怠けてこのライブラリを直接使用しました。このライブラリのサイズがまだ小さくないことが分かりました。gzip 圧縮後、約 20k になりました。私はそれをやめて、自分でスタイルを書きました (この出来事は、今怠けていると、将来他の方法で報いを受けることになるということを教えてくれます 0_0)
これにより、いくつかの大きなライブラリが廃止されました。

4. gzip圧縮

これはオンラインで見つけた解決策です。vue.config.jsにいくつかの設定を追加するだけで、nginxでも対応する設定を行う必要があります。

// vue.config.js
モジュール.エクスポート = {
 Webpack を構成する: (config) => {
  process.env.NODE_ENV == 'production'の場合{
   // ...
   // 圧縮
   config.plugins.push(新しいCompressionWebpackPlugin({
    アルゴリズム: 'gzip'、
    テスト: /\.js$|\.html$|\.json$|\.css/,
    閾値: 10240、
    最小比率: 0.8
   }))
  }
  // ...
 }
}
// nginx は次の設定を直接オンにします gzip_static on;

パッケージ化後、.gzファイルが生成され、nginxは自動的に.gzファイルを使用します。

5. サードパーティのライブラリをCDNに置く

ここでは主に Vuetify ライブラリを扱います。結局 gzip すると 50k 近くになります。CDN に置いた方が早いでしょう。まずはパッケージ構成から Vuetify を削除します。

モジュール.エクスポート = {
 // ...
 Webpack を構成する: (config) => {
  process.env.NODE_ENV == 'production'の場合{
   // サードパーティのライブラリはパッケージ化されていないので、CDN を使用します
   config.externals = {
    vuetify: 「Vuetify」
   }
  } それ以外 {
   // 開発環境の設定を変更 config.mode = 'development'
   config.externals = {
    vuetify: 「Vuetify」
   }
  }
 }
}

次に、index.htmlにvuetify cssとjsを手動で読み込みます。

<link href="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.css" rel="外部nofollow" rel="スタイルシート">
<script src="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.js"></script>

実際には、もっと良い方法がいくつかあります。webpack パラメータを介して index.html に渡し、ejs を介してインポートすることができます。これは比較的簡単なので、ここでは行いません。

5. 効果

上記の戦略により、最終的なパッケージサイズは1.72Mから94kに最適化されます。

VI. フォローアップ

全体的に、最適化の効果は明ら​​かですが、後から実行できることもあります。

• より洗練された最適化により、Webpackを組み合わせてより深いカスタマイズが可能になるはずです。
• 前述の CDN 上のサードパーティ ライブラリを統合します。結局のところ、それらを index.html に直接配置すると、分散しすぎて、プロジェクト構造が適切ではなく、その後の開発にも役立ちません。
• サードパーティライブラリの参照仕様やリソース導入仕様など、その後のコード開発を標準化するためにできることはまだたくさんあります。
• 各展開の前にパフォーマンステストを実施し、主にページの読み込み速度が標準を満たしているかどうかを確認します。

できることはまだたくさんあります。目標を達成してもそれで終わりではないこともあります。目標を維持することも考慮する必要があります。

これで、Vue パッケージサイズ最適化 (1.72M から 94K へ) の実装に関するこの記事は終了です。Vue パッケージサイズ最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。