在Nuxt中按需引入Echarts

在Nuxt静态网页项目里，只用到echarts中的树图，先前以插件形式引入了整个包：

// ->> nuxt.config.js
...
plugins: [{
	src: '~plugins/echarts.js'
}]
...

// ->> echarts.js
import Vue from 'vue'
import echarts from 'echarts/lib/echarts'
Vue.prototype.$echarts = echarts

这样导致在项目打包时将echarts整个包都打包了，用webpack-bundle-analyzer分析可以看到，echarts占了很大一部分：

因此希望通过按需引入的方式减小打包大小，做法如下：

通过echarts官网提供的定制功能-https://echarts.baidu.com/builder.html，可以将指定模块打包，下载为js文件，引入到项目中：

// ->> nuxt.config.js
...
head: {
	script: [{
      src: 'echarts.min.js', async: true, defer: true
    }]
}
...

删除pakeage.json及原先引入echarts插件的相关代码，在使用echarts模块的地方直接使用echarts变量即可：

// 引入插件的使用
this.$echarts.init(……)

// 引入js文件的使用
echarts.init(……)

这样，使用webpack-bundle-analyzer分析包大小的时候，发现打包大小成功瘦身100多k：