使用了 monaco-editor 后打包生成的 chunk-venders 特别大，

解决办法

vuecli 2.x自带了分析工具 只要运行npm run build —report
如果是vuecli 3的话，先安装插件

cnpm install 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')
        }
    } }

使用vue-cli-service 后 加个参数 —report

    "build": "cross-env LIMIT=8192 increase-memory-limit && vue-cli-service build --report",

可以生成report.html

或者利用webpack-bundle-analyzer分析器，分析项目依赖关系
build —> webpack.prod.conf.js

const BunldeAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugin: [
    new BunldeAnalyzerPlugin(),
]

然后运行npm run build打包命令，浏览器会出现如下页面，此时我们就能看到哪些文件里面到底包含了什么东西

优化后：