Vueプロジェクトのフロントエンドを最適化およびパッケージ化するための必須のボーナスアイテム

Vueプロジェクトのフロントエンドを最適化およびパッケージ化するための必須のボーナスアイテム

序文

Vue プロジェクトが開発された後、プロジェクトをパッケージ化してリリースする前に、プロジェクトの最適化という重要な操作が行われます。これはプログラマーにとってもプラスになります。この記事の手順に従って、プロジェクトを最適化する方法を確認してください。

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

1. ルートの遅延読み込みが必要なのはなぜですか?

プロジェクトを実行したところ、ページに入るとすぐにすべての js ファイルと css ファイルが読み込まれることがわかりました。このプロセスは非常に時間がかかります。
ページを開いたときに、該当ページの対応する js ファイルと css ファイルを読み込むと、ページの読み込み速度が大幅に向上します。

2. ルートの遅延読み込みを実装する方法

Vue 公式ドキュメント: ルーティングの遅延読み込み

コードは次のとおりです(例):

{
    パス: '/login',
    コンポーネント: () => import('@/views/login/index'),
    非表示: true
  },

3. ルートの遅延読み込みにおけるマジックコメント

コメントに webpackChunkName を指定することで、このファイルの名前をカスタマイズできます。

コードは次のとおりです(例):

コンポーネント = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")

2. パッケージサイズを分析する

1. 需要

パッケージ化されたファイル内の各ファイルのサイズを知りたいです。コードを分析して最適化できるようにするためです。

2. パッケージ分析ファイルの生成方法

ターミナルで npm run preview -- --report を実行します。このコマンドは、エントリ ポイント main.js から依存関係分析を実行し、各パッケージのサイズを分析します。最後に、生成された dist フォルダーに report.html ファイルが生成されます。これを開くと、プロジェクトで使用されているファイルが占めるスペースを確認できます。
(効果図は以下のとおりです)

3. Webpack構成ではパッケージ化は除外される

1. 需要

生成されたパッケージ ファイルから、あまり使用されないパッケージを除外します。

たとえば、上図に示す xsxl.js と element.js は、生成されるファイルから除外できます。

2. 包装を除外する

vue.config.js を見つけて、次のように外部項目を追加します。

コードは次のとおりです(例):

Webpack を構成する: {
  //シングルページアプリケーションのタイトルを設定します。ページ名: name,
  外部: {
     /**
      * 外部オブジェクト属性の解析。
      * 基本フォーマット:
      * 「パッケージ名」: 「プロジェクトで導入された名前」
      *  
    */
    'vue': 'vue',
    '要素-ui': 'ElementUI',
    'xlsx': 'XLSX'
  },
  解決する: {
    エイリアス: {
      '@': 解決('src')
    }
  }
}

IV. オンラインリソースの引用

1. 需要

前の手順を実行した後、生成されたパッケージは大幅に小さくなりました。ただし、これらの依存パッケージがないと、プロジェクトをオンラインで実行することはできません。次に、コードの操作をサポートするために、ネットワーク内のリソースを参照する必要があります。

2. CDN

  • CDN の正式名称は「Content Delivery Network」で、中国語ではコンテンツ配信ネットワークと呼ばれます。アクセス速度を上げるために使用します
  • 一部の静的リソース(CSS、.js、画像、ビデオ)をサードパーティの CDN サーバーに配置すると、アクセスが高速化されます。

利点:

  1. アプリケーションパッケージのサイズを縮小する
  2. 静的リソースへのアクセスを高速化する
  3. ブラウザキャッシュを使用して変更されていないファイルを長期間キャッシュする

3. 実装手順

注: 開発環境では、ファイル リソースは引き続きローカルの node_modules から取得できますが、プロジェクトがオンラインの場合にのみ外部リソースを使用する必要があります。この時点では、環境変数を使用して区別することができます。詳細は以下の通りです。

コードは次のとおりです(例):

vue.config.js ファイル内:

外部を {} にします
cdn = { css: [], js: [] } とします。
const isProduction = process.env.NODE_ENV === 'production' // 本番環境かどうかを判定する if (isProduction) {
  外部 = {
      /**
      * 外部オブジェクト属性分析:
      * 「パッケージ名」: 「プロジェクトで導入された名前」
    */
      'vue': 'vue',
      '要素-ui': '要素',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css スタイルシート],
    js: [
      // 最初に vue が必要です。
      'https://unpkg.com/[email protected]/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // 要素 UI js
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', // xlsx
    ]
  }
}

webpack 構成外部構成項目

Webpack を構成する: {
  //シングルページアプリケーションのタイトルを設定します。ページ名: name,
  外部: 外部、
  解決する: {
    エイリアス: {
      '@': 解決('src')
    }
  }
}

html-webpack-plugin 経由で index.html に挿入されます:

vue.config.js ファイルで設定します。

チェーンWebpack(config) {
  config.plugin('preload').tap(() => [
    {
      rel: 'プリロード',
      ファイルブラックリスト: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      含める: '初期'
    }
  ])
  //cdn 変数を挿入します (パッケージ化時に実行されます)
  config.plugin('html').tap(args => {
    args[0].cdn = cdn // プラグインにcdnを設定する argsを返す
  })
  // 残りは省略します...
}

public/index.html を見つけて、CDN Config を設定して css と js を順番に挿入します。

ヘッドの内容を次のように変更します。

<ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>

      <!-- スタイルをインポート -->
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="スタイルシート" href="<%=css%>">
        <% } %>


    <!-- JS をインポート -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>
  </head>

5. console.log をパックして削除する

1. 需要

プロジェクトがパッケージ化されて起動したら、コード内のすべてのconsole.logを削除します。

2. コードデモンストレーション

vue.config.js ファイルで設定します。

コードは次のとおりです(例):

チェーンWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      引数を返す
    })
}

要約する

これで、Vue プロジェクトの最適化とパッケージ化のフロントエンドに不可欠なボーナス項目に関するこの記事は終了です。Vue プロジェクトの最適化とパッケージ化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue.js パッケージ化プロジェクトの後の空白ページの解決策
  • Vueプロジェクトの最適化とパッケージ化の詳細な説明
  • Vueプロジェクトをパッケージ化してリリースする手順
  • Vueプロジェクトのパッケージングと展開の実際のプロセスの記録
  • Vueプロジェクトのパッケージ化の詳細な説明

<<:  DockerにTomcatコンテナを追加したときにホームページにアクセスできない問題の解決方法

>>:  MySQL 8の新機能である降順インデックスの基礎となる実装の詳細な説明

推薦する

SQL 面接の質問: 時間差の合計を求める (重複は無視)

ある会社の BI 職の面接を受けたとき、面接で SQL に関する質問がありました。一見すると非常に簡...

期間限定フラッシュセール機能を実装するJavaScript

この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...

Vue3 がコンポーネント通信に mitt を使用する手順

目次1. インストール2. プロジェクトにインポートしてマウントする3. 使用Vue2.x はコンポ...

nginx プロキシでの複数の 302 応答の解決策 (nginx Follow 302)

proxy_intercept_errors と recursive_error_pages を使...

CSS3で線形グラデーションを実装するためのコードの詳細な説明

序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...

MySQL カウントを向上させる方法のまとめ

多くのプログラマーは MySQL に精通していると思います。多くの人が count の使い方と、最適...

Javascript 共通高階関数の詳細

目次1. 一般的な高階関数1.1、フィルター1.2、地図1.3、減らすHigher Order fu...

Windows Server 2019 のセットアップ方法 (画像とテキスト付き)

1. Windows Server 2019 のインストールVmware に Windows Se...

JavaScript の parseInt() の魔法についての簡単な説明

原因このブログを書いた理由は、今日Leetcodeの日課問題をやっていたからです。文字列を整数(at...

Windows での MySQL の使用: 自動スケジュールバックアップの実装

1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...

MySQL セレクトキャッシュメカニズムの使用に関する詳細な説明

MySQL クエリ キャッシュはデフォルトでオンになっています。ある程度、クエリの効果は向上しますが...

jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...

HTML の一般的でないタグ optgroup、sub、sup、bdo のサンプルコード

Optgroup は、ドロップダウン リストのコンテンツをより整理するために、select タグで使...

私の CSS フレームワーク - base.css (ブラウザのデフォルト スタイルをリセット)

コードをコピーコードは次のとおりです。 @文字セット "utf-8"; /* @...

ホームページのデザインはウェブデザイナーのレベルを最もよく反映する

私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...