Vue-cli项目引入Echarts,引入后单独打包进chunk，导致文件过大

Question

图片描述

Vue项目引入了echarts，在组件中通过import导入，但是为什么打包的时候没有打包到公共的Vender.js里面，每个单独引入导致包过大？

Answer 1

我之前做项目的时候也遇到了这个问题，采用的解决方案是把 echarts 通过 cdn 作为外部引用，而不是直接 import 进去。

只与在代码中使用 echarts 全局变量，可以通过某些方式配置：

// webpack.base.config.js

module.exports = {
    externals: {
        "echarts": "echarts"
    },
}

可以参考：https://segmentfault.com/a/11...

Answer 2

请问楼主的一张图是用的webpack-bundle-analyzer么，求怎么配置

Answer 3

Echarts 文件7m多，当然不能打包啦，现在那么多可用的cdn，当然直接引用。。。

Answer 4

我现在是这样做的，在main.js里面导入echarts，然后挂载到Vue.prototype上，在组件通过this调用。这样会有不良影响么？