echart 优化打包体积

参考完档： https://echarts.apache.org/v4/zh/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts

备注：本文使用的echart版本为4.x

在vue-cli3 使用echart，打包出来的东西实在太大，可以下面是优化方法：

 

步骤一，在线生成所需要的echart文件

echart 在线构件地址：https://echarts.apache.org/zh/builder.html  （必须选择版本）

下载后会生成echarts.min.js文件， 放在 public 文件夹下面；

步骤二，引入下载的文件：

<script src="<%= BASE_URL %>echarts.min.js"></script>

 全局引用：

Vue.prototype.$echarts = window.echarts;

效果：

查看打包体积：

安装插件：cnpm install webpack-bundle-analyzer --save-dev

配置：vue.config.js （完成后执行npm run build  浏览器会自动弹出打包分析）

  chainWebpack: config => {
    // 打包时，分析打包大小的插件
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
   
    // 压缩图片
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      .end();

    // 配置别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'));
  },

效果图：