Vueページの初回読み込み最適化の全プロセス

序文

今日、私が開発したブログシステムをオンラインでリリースしましたが、構築したdistフォルダをクラウドサーバーのルートディレクトリに放り込んだだけなので、最初にページに入ったときに非常に遅くなりました。そのため、最適化する必要があります。

最適化前のサイズ

1. 画像の最適化

開発を容易にするために、アセットに背景画像として jpg を追加しましたが、画像の読み込みに 10 秒以上かかりました。そのため、画像をスペースにアップロードし、代わりにネットワークアドレスを使用しました。

2. .mapファイルの生成を無効にする

ビルドの dist フォルダーには、多数の .map ファイルがあります。これらのファイルは主に、オンラインでのコードのデバッグとスタイルの表示に使用されます。基本的にローカルでデバッグされ、オンラインで変更する必要がないため、これらのファイルを生成することは禁止されています。

vue.config.js にこの文を追加します。

3. ルーティングの遅延読み込み

4. CDNがパブリックライブラリを導入

    <link rel="スタイルシート" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="外部 nofollow" >
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>

    //cdn インポート configureWebpack: {
        外部: {
            'vue': 'vue',
            '要素-ui': '要素',
            'vue-router': 'VueRouter',
            'vuex': 'vuex',
            'アクシオス': 'アクシオス'
        }
    }

ネットではimportをコメントアウトできると書いてありますが、自分でやるとエラーになります。コメントアウトしないとパッケージ化されないという情報もあります。

しばらく操作すると、最終ファイルには大きな効果がありますが、app.jsはまだ非常に大きいです

5. GZIP圧縮

これを終えた後、最初の 4 つのステップは簡単だと感じました。1.4m の app.js を 100kb 以上に削減しましたが、残りは言うまでもありません。

 Webpack の設定: config => {
        戻る {
            //CDN を構成する
            外部: {
                'vue': 'vue',
                '要素-ui': '要素',
                'vue-router': 'VueRouter',
                'vuex': 'vuex',
                'アクシオス': 'アクシオス'
            },
            //gzip圧縮プラグインを設定する: [
                新しい圧縮Webpackプラグイン({

                    テスト: 新しい正規表現('\.(js|css)$'),
                    閾値: 10240、
                    最小比率: 0.8
                })
            ]、
        }
    }

サーバーも設定する必要があります。そうしないと、GZIPファイルが認識されません。

//GZIP 圧縮モジュールを設定します。const compression = require('compression');
//すべてのミドルウェアの前に app.use(compression()) を導入します。

上記の最適化を行った後でも、最悪のサーバーでも問題なく動作します。

比較すると結果は明らかです!!!

6. ページの遅延読み込みにはvue-routerを使用する

ここでのページの遅延読み込みとは、現在ページ A にアクセスすると、ページ A 内のものだけがリクエストされ、他のページのものはリクエストされないことを意味します。

具体的な手順は、vue-router の公式 Web サイトに明確に記載されています。必要な場合は、以下を参照してください。

vue-router によるページの遅延読み込みの実装

要約する

Vue ページの最初の読み込みの最適化に関するこの記事はこれで終わりです。Vue ページの最初の読み込みの最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: