1. 背景最近、独立した開発者がUIデザインを行うのを支援するために、uideaというWebサイトを作成しました。当時は開発のみを担当していました。展開後、アクセス速度が心配であることがわかりました。結局のところ、それは小さな水道管サーバーでした。帯域幅を増やすことと比較して、コードを最初に最適化できるかどうかを確認する必要があります。これは、より費用対効果が高いです。これは最適化前のパッケージサイズです。このやつは1.72Mです。小さな水道管の読み込み時間は、直接3秒以上になります。我慢できません。 II. 目的これを最適化する必要があります。最適化の前に、大まかに目標を設定する必要があります。目標は指標で測定する必要があるため、2 つの指標を設定します。
なぜこれら 2 つの目標を設定したのでしょうか?まず、ページの読み込み時間は解決すべき最後の問題です。予備的な観点から、ページの読み込み時間に影響を与える要因は、ネットワークとパッケージサイズの2つです。ネットワークは一時的に資金が不足しており、アップグレードできないため、主な最適化はパッケージサイズに焦点を当てています。まず、パッケージサイズが何であるかを定義する必要があります。ここでは主にエントリパッケージサイズを参照します。Vueの場合、app.jsとapp.cssです。エントリが読み込まれた後、少なくともページを表示できます。 パッケージサイズはどの程度最適化すべきでしょうか?一方、vue-cli-service は 244K を超えないようにすることをお勧めします。一方、類似の Web サイトのパッケージ サイズがどれくらい大きいかを確認するためのベンチマークを見つける必要があります。次に、参照もあります。私は materialpalette を選択しました。そのパッケージ サイズは約 150k です。私の機能はより複雑なので、2 つの間の 200K を目標としました。 なぜここで目標について話す必要があるのでしょうか?なぜなら、目標は実はとても重要だからです。古いことわざにあるように、目標を目指しましょう。目標がなければ、実行プロセスの途中で諦めたり、半歩前進しただけで止まったりしがちです。 デートを例に挙げてみましょう。もしあなたの目標がガールフレンドを見つけることであれば、おそらく見つけることはできないでしょう。しかし、もしあなたの目標が特定の女の子(例えば張三)をガールフレンドとして追いかけることであれば、その女の子のために的を絞った準備をすることができるので、成功の確率は大幅に高まります。 3. 解決策目標が設定されたら、計画が決定されます Web 最適化を行うのは今回が初めてですが、以前に Android パッケージ サイズの最適化の経験があり、原則は常に同じであるため、最初に次の戦略を考えました。
1 - 3 は、最初に思い浮かぶ 3 つの最適化ソリューションです。次に、Vue の対応する最適化戦略をオンラインで検索し、最後の 2 つを追加しました。ルートの遅延読み込みなどの他のソリューションもありますが、この Web サイトの主なコンテンツはホームページに集中しているため、これは考慮しませんでした (良い点はたくさんありますが、ローカルの状況に適応するのが最善です) 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. フォローアップ全体的に、最適化の効果は明らかですが、後から実行できることもあります。
できることはまだたくさんあります。目標を達成してもそれで終わりではないこともあります。目標を維持することも考慮する必要があります。 これで、Vue パッケージサイズ最適化 (1.72M から 94K へ) の実装に関するこの記事は終了です。Vue パッケージサイズ最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: LinuxサーバのSSHクラッキング防止方法(推奨)
>>: Windows10システムにMySQL 5.7.17をインストールする
1. ロゴに代替テキストを追加するこれには 2 つの利点があります。スクリーン リーダーがロゴ画像の...
まず、ブロガーはコミュニティ バージョンをプレイしていますが、学習とテストにはこれで十分です。 Bl...
1. テストテーブルを作成する テーブル `mysql_genarate` を作成します ( `id...
Web ページのスタイル設定に関しては、プロジェクトで純粋な CSS または SCSS (および他...
序文: 正規表現のインターセプションに似た、MySql フィールドの文字列から特定の文字を抽出すると...
データベースインデックスについては皆さんもよくご存知だと思います。 インデックスは、データベース テ...
MySQL の基盤となるデータ構造が B+ ツリーであることは誰もが知っていますが、ではなぜ赤黒ツリ...
httpsを取得する方法を勉強しています。最近、Tencent Cloud が提供する無料の SSL...
1. MySQL マスタースレーブ非同期1.1 ネットワーク遅延MySQLのマスタースレーブレプリケ...
ディスク領域の管理は、システム管理者にとって重要な日常的なタスクです。ディスク領域が使い果たされると...
目次VUEとはVueのコアプラグインVueルーターヴュークスアクシオス要素UI Vue フロントエン...
目次【機能背景】 [生のSQL] 【独自SQL解析】 【分析手順】 [最適化されたSQL] 【最適化...
ユーザーとグループの管理1. ユーザーとグループの基本概念ユーザーとグループ:システム上のすべてのプ...
IE の条件付きコメントは、通常の (X)HTML コメントに対する Microsoft 独自の (...
画像をダウンロード docker プル mysql:5.7 docker pull php:7.2-...