echarts的地图json文件使用cdn

在main.js中全局引入echarts并注册地图

// main.js
import echarts from 'echarts'
import china from 'echarts/map/json/china.json' 
import world from 'echarts/map/json/world.json' 

Vue.prototype.$echarts = echarts
echarts.registerMap('china', china)
echarts.registerMap('world', world)

console.log(echarts.getMap('world'))
console.log(echarts.getMap(china))

使用analyz进行分析会发现两个json文件被打包进venders中，包挺大的

优化：

步骤一：

开发环境继续使用

// main.js

import echarts from 'echarts'

Vue.prototype.$echarts = echarts
if (process.env.NODE_ENV === 'development') {
  const world = require('echarts/map/json/world.json')
  const china = require('echarts/map/json/china.json')
  echarts.registerMap('world', world)
  echarts.registerMap('china', china)

console.log(echarts.getMap('world'))
console.log(echarts.getMap(china))
}

步骤二：

build的时候将echarts和两个json文件都使用cdn的方式引入

// vue.config.js

const assetsCDN = {
  externals: {
    echarts: 'echarts',
  },
  css: [],
  js: [
    '//cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js',
    '//cdn.jsdelivr.net/npm/echarts@4.8.0/map/js/world.js',
    '//cdn.jsdelivr.net/npm/echarts@4.8.0/map/js/china.js'
  ]
}
const isProd = process.env.NODE_ENV === 'production'

const vueConfig = {
  configureWebpack: {
    externals: isProd ? assetsCDN.externals : {}
  },
}

注：world.js、china.js中包含了地图json和注册地图逻辑，可以使用getMap进行验证

 

在main.js中输出查看

// main.js

console.log(echarts.getMap('world'))
console.log(echarts.getMap(china))

没注册地图则为null，注册了打印下面这段