Vue-cli3におけるWebpack設定の最適化
ディレクトリ
はじめに
定量化と分析
- 1. speed-measure-webpack-plugin
- 2, webpack-bundle-analyzer
キャッシュ
- 3番目のビルドは80%のパフォーマンス改善しか達成していません。
- 3番目のビルドは80%のパフォーマンス向上しか達成していません。
はじめに
Vue-cli 3.xでは、Webpackは深いパッケージを行っており、デフォルトの設定の多くは、これらの深い理解のためにここで、次の説明との違い。
定量化と分析
ここでは、2つのプラグインの主な導入は、それぞれ、定量的なパッケージング時間、およびパッケージング分析です。
3番目のビルドが80％のパフォーマンス向上を達成しました。
このパッケージは、各プラグインとローダーに費やされた時間を測定することができ、ビルドの完了後にそのような情報を表示します：
npm i speed-measure-webpack-plugin -D
次のようにVue-cli 2.xを使用します。
//webpack.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const config = {
//...webpack
}
module.exports = smp.wrap(config);
Vue-cli 3.xでは以下のようになります。
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin({
outputFormat: 'human'
})
module.exports = {
configureWebpack: smp.wrap({
plugins: []
})
}
このように設定した後、再度ビルドすると、上のようなメッセージが表示されます。
webpack-bundle-analyzer
これはパッキング後の各ファイルのサイズを分析するもので、バンドルのインストールを分析するのに使います：
npm i webpack-bundle-analyzer -D
Vue-cli 3.xでは、このパッケージをインストールすると、Vue-cli 3.xでビルドされたプロジェクトがすでにnode_modulesに存在するが、プロジェクトのpackage.jsonで参照されていないため、エラーが報告されます。このパッケージをnode_modulesから削除し、再インストールする必要があります。使用してください：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
configureWebpack: smp.wrap({
plugins: [
// これはすべてのプラグインの最後に置くべきである
new BundleAnalyzerPlugin()
]
})
ビルドが完了すると、ビルドされたバンドルを表示するビジュアルインターフェイスでサービスが直接開始されます。
キャッシュ
ここではキャッシュのための2つの場所も紹介します。
3番目のビルドは80%のパフォーマンス改善しか達成していません。
パフォーマンス・オーバーヘッドが大きいローダーの前にキャッシュ・ローダーを追加することで、結果をディスクにキャッシュします。
- インストール
npm install cache-loader -D
- Vue-cli 2では.x
module.exports = {
//...
module: {
//私のプロジェクトでは、babel-loaderのロードに時間がかかるので、それを`cache-loader`
rules: [
{
test: /\.jsx?$/,
use: ['cache-loader','babel-loader']
}
]
}
}
Vue-cli 3.xでは、この設定はデフォルトの設定です。それぞれ、vue-loader、babel-loaderの2つがキャッシュされ、他のはキャッシュしてから設定する必要があります。
3番目のビルドは80%のパフォーマンス向上しか達成していません。
これは、モジュールの中間キャッシュ、効率化を提供するためです。
- インストール
npm i hard-source-webpack-plugin -D
- 使用: プラグインで新規。
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
module.exports = {
configureWebpack: smp.wrap({
plugins: [
// モジュールに中間キャッシュを提供し、キャッシュ・パスは次のようになる：ノード_modules/.cache/hard-source
new HardSourceWebpackPlugin(),
new BundleAnalyzerPlugin()
]
})
}
