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の新機能である降順インデックスの基礎となる実装の詳細な説明

推薦する

MySQLワームレプリケーションの基本知識

ワームは、その名前が示すように、自ら複製し、その数は倍増、つまり指数関数的に増加します。 MySQL...

HTML に画像が存在しない場合にデフォルトの画像を表示する方法の例

画像リンク <img src="" /> jsを使用してURLが有効...

CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...

Linux nohup コマンドの原理と例の分析

nohup コマンドUnix/Linux を使用する場合、通常はプログラムをバックグラウンドで実行す...

Reactイベントメカニズムソースコード分析

目次原理ソースコード分析委任されたイベントバインディングすべてのサポートされているイベントを聴くネイ...

MySQLで論理SQLを置き換える際の落とし穴を回避する方法の詳細な説明

重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...

ウェブサイトメンテナンスページのリスト構築のヒント

また、多くの場合、メンテナンスのために Web サイトを少なくとも数分間オフラインにする必要がありま...

一般的なMySQLストレージエンジンの長所と短所

目次すべてのストレージエンジンを表示InnoDB ストレージ エンジンMyISAM ストレージエンジ...

Centos7 の起動プロセスと Systemd での Nginx の起動構成

Centos7 の起動プロセス: 1.post(電源投入時のセルフテスト) 電源投入時のセルフテスト...

プライベートレジストリ内の画像を照会または取得する方法

Dockerはプライベートレジストリ内のイメージを照会または取得するために、 docker 検索 1...

Oracle を MySQL に置き換える際の問題と解決策

目次移行ツールアプリケーション変換mysql8.0 ドライバ パッケージを追加データソース構成の変更...

WeChatアプレット仮想リストの応用例

目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...

CentOS 8.0.1905 は ZABBIX 4.4 バージョンをインストールします (検証済み)

Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...

HTMLデータ送信投稿_PowerNode Java Academy

HTTP/1.1 プロトコルで指定されている HTTP リクエスト メソッドには、OPTIONS、...