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'));
  },

效果圖：