ホームページ >ウェブフロントエンド >jsチュートリアル >Webpack パフォーマンスの最適化
Webpack パフォーマンスの最適化
- 小云云オリジナル
- 2018-01-04 14:08:331885ブラウズ
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('fs'),
webpack = require("webpack");
var vendors = [
'vue',
'vue-router',
'vuex'
];
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('./dist/manifest.json')
})
]webpack.dll.config.js ファイルが正常に実行されたことを確認した後、webpack -p を実行してプロジェクトをパッケージ化します。
Dllファイルにパッケージ化されたファイルが、バンドルファイルに直接入れられるのではなく、委任（委任）されていることがわかります。
このようにして、すべてのリソースをパッケージ化し、生成された dist ディレクトリは次のようになります:
ただし、dist フォルダーを完全なプロジェクトにするためには、作成した HTML ファイルがまだ必要です。 Pack.js という名前のファイルがある場合は、nodejs の fileSystem を使用して HTML ファイルを変更およびコピーします。
pack.js
var fs = require('fs');
fs.readFile('./index.html', 'utf8', (err, data) => {
if (!err) {
var dataStr = data.toString(),
timestamp = (new Date()).getTime();
dataStr = dataStr
.replace('bundle.js', 'bundle.js?v='+timestamp)
.replace('<!-- dll -->', '<script src="./dist/Dll.js?v='+ timestamp +'"></script>');
fs.writeFile('./dist/index.html', dataStr, (error) => {
if (!error) {
console.log('HTML file copy successfully');
} else {
console.log(error);
}
});
} else {
console.log(err);
}
});モジュールのエントリ html にプレースホルダー文字 b77a9b994ab1dbd000a29af0dd12365f を追加する必要があります。pack.js の機能は HTML ファイルを dist にコピーすることです。 directory に移動し、 b77a9b994ab1dbd000a29af0dd12365f を 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 つ作成しました。
関連する推奨事項:
mockjs を使用して vue、vuecli、webpack でバックエンド データをシミュレートする
webpack 構成のバックエンド レンダリングの詳細な説明
以上がWebpack パフォーマンスの最適化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。