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 サーバーに配置してアクセス速度を高速化しています。

利点:

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

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を見つけて、CSS と JS を順番に挿入するように CDN Config を構成します。 ヘッドの内容を次のように変更します。

<ヘッド>
    <メタ文字セット="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
      引数を返す
    })
}

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueプロジェクトのパッケージ最適化戦略に関する簡単な説明
  • Vue プロジェクトのパッケージ化とコンパイルの最適化ソリューション
  • Vue プロジェクトのパッケージ最適化方法 (パッケージ化された js ファイルを小さくする)

<<:  CSS ブラウザ互換性の問題に対する 4 つの解決策

>>:  Zabbixを介してデータベース接続情報といくつかの拡張機能をすばやく取得します

推薦する

フラッシュプラグインを使用してPCのカメラを呼び出し、TMLページに埋め込む方法

序文この記事を書いた主な理由は、チームリーダーが、ブラウザを使用してコンピューターのカメラを呼び出し...

Vue プロジェクトがページング効果を実現

ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。 1...

MySQLはインデックスプッシュダウンを数秒で理解するのに役立ちます

目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...

ethers.js を使用して Solidity スマート コントラクトをデプロイする方法

Ethereum 上で DApps を開発したことがある場合は、フロントエンド JavaScript...

ウェブサイトに天気予報を挿入する方法

天気予報をウェブサイトに挿入すると、次のような効果が得られます。次のコードを挿入する必要があります:...

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

MySQL Community Server 5.7.19 インストール ガイド (詳細)

MySQL公式サイトのzipファイルのダウンロードリンク https://dev.mysql.co...

Tomcat でのコネクタ構成

JBoss は Tomcat を Web コンテナとして使用するため、JBoss の Web コンテ...

HTML ウェブページでのアンカー(名前付きアンカー)の使用の概要

以下の情報はインターネットから収集したものです1. アンカーは、Web ページ作成におけるハイパーリ...

ffmpeg 中国語パラメータの詳細な説明

FFMPEG 3.4.1 バージョンパラメータの詳細使用方法: ffmpeg [オプション] [[入...

DockerとDocker-Composeの使用例

Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテナ エンジンです...

div+cssとウェブ標準ページの利点

div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...

Linux (CentOS) システムで MySQL データベース ディレクトリの場所を変更する方法

CentOS システムで MySQL データベース ディレクトリの場所を変更する方法1. まず、My...

WeChatアプレットの入力レベルとテキストエリアレベルの浸透率が高すぎる問題の解決策

WeChat ミニプログラムのネイティブ コンポーネントであるカメラ、キャンバス、入力 (フォーカス...