Vue プロジェクトのパッケージ化と最適化の実装手順

Vueプロジェクトのパッケージ化、起動、最適化

プロジェクトが完了したら、プロジェクトをオンラインで開始します。パフォーマンスを向上させるために、多くの場合、いくつかの最適化処理を実行します。

Vueプロジェクトのパッケージ化

スキャフォールディング プロジェクトにはデフォルトのパッケージ化コマンドがあります。プロジェクトをパッケージ化するには、npm run bulid と入力できます。

ターミナルを開き、プロジェクトのルートディレクトリに切り替えます

コマンドを入力してください: npm run build

現在のプロジェクトのルートディレクトリにdistフォルダが生成され、パッケージ化されたファイルが含まれます。

プロジェクトホスティング

パッケージ化されたプロジェクトをホストするシンプルなノードサーバーを作成し、サーバープロジェクトへのアクセスをシミュレートすることができます。

1. サーバーのルート ディレクトリとして新しいディレクトリを作成し、小さな黒いウィンドウで node init -y を実行して初期化を実行し、npm i express を実行して express パッケージをダウンロードし、app.js ファイルを作成して次のコードをコピーします (express パッケージを使用してサーバーを開きます)

2. パッケージ化したdistディレクトリをノードサーバーディレクトリにコピーします。

3. リソースはdistディレクトリにあるので、静的リソースホスティングを使用してリソースを提供し、distディレクトリをリソースホスティングディレクトリとして使用できます。

エクスプレスサーバーの作成

var express = require('express')
定数パス = require('path')

// 2. サーバーを作成する var app = express();

// 静的リソースのホスティング // すべての静的リソースを public などの指定されたディレクトリに配置し、次の構成を追加することもできます app.use(express.static('dist'))
app.use('/'、express.static(path.join(__dirname、'dist')))

// 3. サーバーを起動し、ポートをリッスンします app.listen(3001, () => {
  コンソールログ('http://127.0.0.1:3001')
})

サーバーを起動する

サーバーディレクトリでターミナルを開き、node app.jsと入力します。

ブラウザにサーバーアドレスを入力してください

プロジェクトの共通最適化

プロジェクトがパッケージ化された後、以前に使用されたデプロイメント依存パッケージとプロジェクトで使用された外部リソースがパッケージ化されます。

以前に多くのパッケージを導入したり、不必要なパッケージを導入したりすると、プロジェクトのサイズが大きくなり、ユーザーが正常にアクセスするためにさらに多くのデータを要求することになり、ユーザーエクスペリエンスに悪影響が出るため、パッケージ化プロセスを最適化する必要があります。

一般的に言えば、コードの最適化の観点からプロジェクトを最適化することも、CDN のような方法を使用してプロジェクトを最適化することもできます。

スキャフォールディングは、プロジェクトリソースの分布（占有率）を確認できるコマンドを提供します: npm run build – --report

プロジェクトレポートファイルを生成する

npm 実行ビルド – --report 

レポートページを開く

1. レポート ページでは、ブロックが大きいほど、テンプレートが占めるボリュームが大きくなります。
2. モジュールが大きな容積を占める場合は、製品にパッケージしないことを検討する必要がある。

CDNアクセラレーションの最適化

cdn: CDN の本質は、メディア リソース、動的および静的画像 (Flash)、HTML、CSS、JS などのコンテンツをより近くの IDC にキャッシュし、ユーザーがリソースを共有して、サイト間の応答時間を短縮するなどのニーズを満たすことです。オンライン ゲーム アクセラレータの本質は、高帯域幅のコンピューター ルームを確立し、マルチノード サーバーを設定することで、ユーザーのために加速することです。

大容量モジュールを使用し、CDN を利用して対応するリソースを提供すると、自社のサーバーにかかる負荷が軽減され、より高速で優れたリソース応答が実現します。

設定ファイル

スキャフォールディングプロジェクトで、独自のプロジェクト構成を追加する場合は、ルートディレクトリにvue.config.jsファイルを追加し、このファイルにカスタム構成を実装できます。

パッケージング時には、この構成は足場構成と組み合わされます

パッケージ除外を追加する

モジュール.エクスポート = {
    Webpack を構成する: {
        外部:{
            'vue': 'vue',
            '要素-ui': '要素',
            '羽根ペン': '羽根ペン'
        }
    },
}

ご覧のとおり、パッケージ化されたプロジェクトのサイズは大幅に縮小されましたが、問題は解決されていません。これらのパッケージがないと、パッケージ化されたプロジェクトを実行できません。

これは、パッケージ化されたプロジェクトに Vue パッケージがないため、エラーが発生するためです。これらのリソースを提供するには、CDN を使用する必要があります。

CDNのユーザーカスタマイズを追加

vue.config.jsに次のコードを追加します。

cdn = {とする
  css: [
    //要素UI CSS
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css', // スタイルシート // リッチテキストボックスプラグインスタイル 'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css'
  ]、
  js: [
    // 最初に vue が必要です。
    'https://unpkg.com/vue/dist/vue.js', // vuejs
    // 要素 UI js
    'https://unpkg.com/element-ui/lib/index.js', // 要素UI
    // リッチ テキスト ボックス プラグイン 'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
  ]
}

プラグインを通じてページにリソースを自動的に追加する

プラグインにリソースをマウントする

モジュール.エクスポート = {
  // 次の構成のパッケージが将来プロジェクトにパッケージ化されないことを示すためにパッケージ化除外を追加します。configureWebpack: {
    外部:{
            'vue': 'vue',
            '要素-ui': '要素',
            '羽根ペン': '羽根ペン'
        }
  },
  //CDNリソースをプラグインチェーンにマウントするWebpack (config) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      引数を返す
    })
  }
}

プラグインを使用して、指定された CDN リソースをページに追加し、プロジェクトのパブリック インデックス (プロジェクトがパッケージ化される前のインデックス ファイル) に次のコードを追加します。

CSSインポートを追加する（ヘッド構造内）

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

js インポートを追加する (body 構造内)

<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>

再梱包、OK

実稼働段階でのみ CDN を使用するように設定する

プロジェクトを開発する際には、実際にはCDNを使用する必要はありません。CDNを使用すると、ページの読み込み効率が低下し、ローカル開発には適していません（ネットワーク接続が必要です）。

環境変数に応じて対応する処理を実行し、製品が使用されている場合にのみ、プラグインが対応するリソース ファイルを HTML ページに自動的に挿入するようにすることができます。

const isProd = process.env.NODE_ENV === 'production' // 本番環境ですか? let externals = {
  'vue': 'vue',
  '要素-ui': '要素',
  '羽根ペン': '羽根ペン'
}


cdn = {とする
  css: [
    //要素UI CSS
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css', // スタイルシート // リッチテキストボックスプラグインスタイル 'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css'
  ]、
  js: [
    // 最初に vue が必要です。
    'https://unpkg.com/vue/dist/vue.js', // vuejs
    // 要素 UI js
    'https://unpkg.com/element-ui/lib/index.js', // 要素UI
    // リッチ テキスト ボックス プラグイン 'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
  ]
}

cdn = isProd ? cdn : { css: [], js: [] }
外部 = isProd ? 外部: {}


モジュール.エクスポート = {
  // 次の構成のパッケージが将来プロジェクトにパッケージ化されないことを示すためにパッケージ化除外を追加します。configureWebpack: {
    外部
  },
  // 
  チェーンWebpack（設定）{
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      引数を返す
    })
  }
}

これで、vue プロジェクトのパッケージ化と最適化の実装手順に関するこの記事は終了です。vue プロジェクトのパッケージ化と最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。