Webpack パフォーマンスの最適化-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Webpack パフォーマンスの最適化

小云云

Jan 04, 2018 pm 02:08 PM

webwebpackパフォーマンス

Webpack のパフォーマンスを最適化する方法はたくさんありますが、この記事で dll を個別に説明する理由は、dll が最も単純で、最も粗雑で、非常に効果的な最適化方法だからです。この記事では主に webpack パフォーマンス最適化 DLL の詳細な説明を紹介します。これが非常に優れていると思いますので、参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

通常のパッケージ化プロセスでは、jquery、bootstrap、react、react-router、redux、antd、vue、vue-router、vuex など、参照する多くのライブラリもバンドルファイルにパッケージ化されます。これらのライブラリの内容は基本的に変更されないため、これらを各パッケージに追加することは間違いなくパフォーマンスを大幅に無駄にします。

Dll テクノロジーは、インポートされたすべてのライブラリを最初に dll.js ファイルにパッケージ化し、自分で書き込んだコンテンツを Bundle.js ファイルにパッケージ化することで、その後のパッケージ化ではバンドル部分の処理のみが必要になります。

Vue プロジェクトを例に挙げて、まず webpack.dll.config.js という名前のファイルを作成します

var path = require("path"),
　　fs = require(&#39;fs&#39;),
　　webpack = require("webpack");

var vendors = [
　　&#39;vue&#39;, 
　　&#39;vue-router&#39;, 
　　&#39;vuex&#39;
];

module.exports = {
　　entry: {
　　　　vendor: vendors
　　},
　　output: {
　　　　path: path.join(__dirname, "dist"),
　　　　filename: "Dll.js",
　　　　library: "[name]_[hash]"
　　},
　　plugins: [
　　　　new webpack.DllPlugin({
　　　　　　path: path.join(__dirname, "dist", "manifest.json"),
　　　　　　name: "[name]_[hash]",
　　　　　　context: __dirname
　　　　})
　　]
};

このファイルの機能は、vue、vue-router、および vuex をマージして Dll という名前のファイルにパッケージ化することです。 .js 静的リソースパッケージを作成し、Dll.js 内のモジュールへの参照を容易にするために、manifest.json ファイルも生成します。

webpack コマンドを実行すると、デフォルトでこのディレクトリ内の webpack.config.js または webpackfile.js という名前のファイルが実行されることに注意してください。したがって、--config コマンドを使用してファイルを手動で指定し、最後に -p コマンドを追加して Dll.js を圧縮する必要があります。

$ webpack --config webpack.dll.config.js -p

このようにして、追加の dist フォルダーがプロジェクトのルートディレクトリに追加されます。このフォルダーには、圧縮された Dll.js ファイルとmanifest.json ファイルが含まれています。

manifest.json ファイルの内容は次のとおりです。各モジュールに参照用の ID を付けます。

{
 "name": "vendor_2beb750db72b1cda4321",
 "content": {
  "./node_modules/process/browser.js": {
   "id": 0,
   "meta": {}
  },
  "./node_modules/vue-router/dist/vue-router.esm.js": {
   "id": 1,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
  "./node_modules/vue/dist/vue.runtime.esm.js": {
   "id": 2,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
//.......

最後に、webpack.config.js に参照を追加します。 plugins 属性に DllReferencePlugin プラグインを追加し、manifest.json ファイルへの参照パスを指定します。

//...
plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require(&#39;./dist/manifest.json&#39;)
  })
]

webpack.dll.config.js ファイルが正常に実行されたことを確認した後、webpack -p を実行してプロジェクトをパッケージ化します。

Dllファイルにパッケージ化されたファイルが、バンドルファイルに直接入れられるのではなく、委任（委任）されていることがわかります。

このようにして、すべてのリソースをパッケージ化し、生成された dist ディレクトリは次のようになります:

ただし、dist フォルダーを完全なプロジェクトにするためには、作成した HTML ファイルがまだ必要です。 Pack.js という名前のファイルがある場合は、nodejs の fileSystem を使用して HTML ファイルを変更およびコピーします。

pack.js

var fs = require(&#39;fs&#39;);

fs.readFile(&#39;./index.html&#39;, &#39;utf8&#39;, (err, data) => {
  if (!err) {
    var dataStr = data.toString(),
    timestamp = (new Date()).getTime();
  
    dataStr = dataStr
          .replace(&#39;bundle.js&#39;, &#39;bundle.js?v=&#39;+timestamp)
          .replace(&#39;<!-- dll -->&#39;, &#39;<script src="./dist/Dll.js?v=&#39;+ timestamp +&#39;"></script>&#39;);

    fs.writeFile(&#39;./dist/index.html&#39;, dataStr, (error) => {
      if (!error) {
        console.log(&#39;HTML file copy successfully&#39;);
      } else {
        console.log(error);
      }
    });
  } else {
    console.log(err);
  }
});

モジュールのエントリ html にプレースホルダー文字を追加する必要があります。pack.js の機能は HTML ファイルを dist にコピーすることです。 directory に移動し、を Dll.js を参照するスクリプトタグに置き換え、ファイルを参照した後にタイムスタンプを追加します。

<!-- .... -->
<body>
<p id="demo" class="container"></p>

<!-- dll -->
<script src="./bundle.js"></script>
</body>
</html>

webpack -p パッケージングを実行後、以下のコマンドを入力してpack.jsを実行すると、distディレクトリにhtmlファイルが生成されます。

$ node pack.js

内容は次のとおりです:

<!-- .... -->
<body>
<p id="demo" class="container"></p>

<script src="./dist/Dll.js?v=1488250309725"></script>
<script src="./bundle.js?v=1488250309725"></script>
</body>
</html>

このようにして、dist フォルダーは、手動操作を必要としない、完全な圧縮され難読化されたプロジェクトとしてオンラインで直接デプロイできます。

実際のプロジェクトテンプレートの参照アドレスは以下の通りです。筆者は React と Vue の二刀流開発者なので、yomen(yo) などによる後のスキャフォールディングツール用のテンプレートを 2 つ作成しました。

webpack3 のローダー分析

webpack 構成のバックエンドレンダリングの詳細な説明

以上がWebpack パフォーマンスの最適化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Java vs JavaScript：開発者向けの詳細な比較May 16, 2025 am 12:01 AM

Javaandjavascriptaredistinctlanguages：javaisusedforenterpriseandmobileapps、whilejavascriptisforinteractivewebpages.1）javaiscompiled、staticatically、andrunsonjvm.2）javascriptisisterted、dynamsornoded.3）

JavaScriptのデータ型：ブラウザとNodejsに違いはありますか？May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1）グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2）バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3）パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント：//および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments：シングルライン（//）およびマルチライン（//）

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。