webpack-bundle-analyzer插件的使用方式

webpack-bundle-analyzer打包文件分析工具

这是一个webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件的功能是生成代码分析报告，帮助提升代码质量和网站性能

1 npm install --save-dev webpack-bundle-analyzer //安装webpack-bundle-analyzer

2 npm install cross-env –save -dev //解决 'NODE_ENV' 不是内部或外部命令，也不是可运行的程序或批处理文件 的报错

 1 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 2 /* webpack.base.conf.js文件中 */
 3 module.exports = vuxLoader.merge(webpackConfig, {
 4   plugins: [
 5     new BundleAnalyzerPlugin({
 6       analyzerMode: "server",
 7       analyzerHost: "127.0.0.1",
 8       analyzerPort: 8888, // 运行后的端口号
 9       reportFilename: "report.html",
10       defaultSizes: "parsed",
11       openAnalyzer: true,
12       generateStatsFile: false,
13       statsFilename: "stats.json",
14       statsOptions: null,
15       logLevel: "info"
16     })
17   ]
18 });
19 
20 /* package.json文件中 */
21 "scripts": {
22     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open --hot",
23     "start": "npm run dev",
24     "unit": "jest --config test/unit/jest.conf.js --coverage",
25     "e2e": "node test/e2e/runner.js",
26     "test": "npm run unit && npm run e2e",
27     "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
28     "build": "node build/build.js",
29     "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
30   }

运行

npm run analyz