vue-cli3执行打包命令时候的–report参数无效

项目里的scripts脚本

1
2
3
scripts: {
"build": "vue-cli-service build && npm run test",
}

npm 执行打包命令的时候 npm run build –report 却没有生成我想要的webpack-bundle-analyzer 分析报告,官网里明确写了支持的

1
--report 和 --report-json 会根据构建统计生成报告,它会帮助你分析包中包含的模块们的大小

vue-cli-service build
刚开始找不到方向直到有一天看到大佬的文章才明白,(后面得学习从源码的角度思考问题)
找到打包命令的文件,打印args入参看下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// node_modules\@vue\cli-service\lib\commands\build\index.js
console.log(args, '——————args')
if (args.report || args['report-json']) {
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
console.log(config)
modifyConfig(webpackConfig, config => {
const bundleName = args.target !== 'app'
? config.output.filename.replace(/\.js$/, '-')
: isLegacyBuild ? 'legacy-' : ''
config.plugins.push(new BundleAnalyzerPlugin({
logLevel: 'warn',
openAnalyzer: false,
analyzerMode: args.report ? 'static' : 'disabled',
reportFilename: `${bundleName}report.html`,
statsFilename: `${bundleName}report.json`,
generateStatsFile: !!args['report-json']
}))
})
}

观察到打印的args携带的参数report: false,我发现俩个问题

  • 第一点:如果打包脚本是官方原本的命令行打包参数,即vue-cli-service build
1
2
3
scripts: {
"buildReport": "vue-cli-service build",
}
  • 第二点:同时npm执行的时候,需要在–report前面加上–,也就是要这样: npm run build -- --report
    然后我们在看打印参数
    args打印出
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
    _: [],
    modern: false,
    report: true, // 可行
    'report-json': false,
    watch: false,
    open: false,
    copy: false,
    https: false,
    verbose: false,
    clean: true,
    target: 'app',
    entry: undefined
    }
    参考npm官网 npm-run-script

总结:

1.npm run build – –report 可行
2.1.npm run build && run build test – –report 不可行
3.yarn run build –report 可行
4.yarn run build && run build test –report 不可行

参考