可視化分析パッケージサイズwebpack-bundle-analyzer

可視化分析パッケージサイズwebpack-bundle-analyzer
パッケージ化されたファイルがどのように含まれているか、サイズの割合がどのようになっているか、モジュールに関係が含まれているか、依存項目が含まれているか、ファイルが重複しているか、圧縮されたサイズがどのようになっているかを直感的に分析することができます.これらに対して、ファイル分割などの操作を行うことができます.

分析内容:図に示すように、パッケージ化されたファイルにはどれが含まれているか、サイズの割合はどうか、モジュールには関係が含まれているか、依存項目が含まれているか、ファイルが重複しているかどうか、圧縮後のサイズは

である.

手順は以下の通りである:1.インストール:npm install webpack-bundle-analyzer --save-dev 2.構成:

webpack.config.js:

//       
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 
module.exports = { 
plugins: [ 
//    BundleAnalyzerPlugin 
new BundleAnalyzerPlugin(), 
    ], 
};   

feflow.js:(fellowフレームを使用する場合)

//    bundle              npm run analyze
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

builderOptions.webpackConfig.config.plugins.push(
//    BundleAnalyzerPlugin
new BundleAnalyzerPlugin(),

);

package.jsonのscriptで補う:

"analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build”

運転:npm run analyze

最後にhttp://127.0.0.1:8888
第3歩のこの点は補足します:1台のコンピュータを交換した後に、npm run buildだけ必要として、自動的に開けることができますhttp://127.0.0.1:8888/

の効果は以下の通りです: