webpack 包大小分析
阿新 • • 發佈:2020-12-14
webpack-bundle-analyzer檔案大小分析工具
Angular cli 與webpack-bundle-anglyzer結合分析包大小。
一.安裝
npm install --save-dev webpack-bundle-analyzer
二.配置
webpack.config.js
if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) }
上面的配置是監聽build的引數,來動態判斷是否需要分析包大小,也可以直接使用這個plugin
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const config = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [new BundleAnalyzerPlugin() ] }; module.exports = config;
三.啟動
npm run-script build --report // 這一種是使用report引數來動態判斷是否需要包大小分析。
// 如果是直接使用plugins的話,就直接使用npm run-script build就可以了
瀏覽器開啟127.0.0.1:8888地址可以看到一下效果圖