vue 添加使用分析工具

Jsky
2019-10-19 10:24:49
前端
js Vue

分析工具

vuecli 2.x自带了分析工具，只要运行 npm run build --report

如果是 vuecli 3的话，先安装插件

cnpm intall webpack-bundle-analyzer -–save-dev

然后新建vue.config.js，对 webpack进行配置：

chainWebpack: (config) => {
    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                .end();
            config.plugins.delete('prefetch')
        }
    } }

再运行 npm run build --report

会在浏览器打开一个项目打包的情况图，便于直观地比较各个 bundle文件的大小

Jsky博客