vue中通过externals的方式引入echarts（优化打包时间）

注意下webpack的版本

在vue.config.js中设置configureWebpack的externals

module.exports = {
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    open: true,
    port: 8001,
    overlay: {
      errors: true,
      warnings: true
    }
  },
  configureWebpack:{
    externals: {
      "echarts": "echarts"
    },
  },
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
  }
}

如下图 

在index.html文件中引入cdn上存储的echarts文件

 <script src="//cdn.bootcss.com/echarts/3.2.2/echarts.simple.min.js"></script>

如下图 

在需要的vue组件中使用

<template>
  <div id="e-view" style="width:500px;height:500px"></div>
</template>
<script>
import echarts from "echarts";
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      var Ea = echarts.init(document.getElementById("e-view"));
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            itemStyle: {
              normal: {
                color: "#00FF00",//折线点颜色
                lineStyle: {
                  color: "#00FF00",//折线颜色
                },
              },
            },
          },
        ],
      };

      Ea.setOption(option);
      window.addEventListener("resize", () => {
        Ea.resize();
      });
    },
  },
};
</script>
<style lang="scss">

</style>