Echarts的按需加载

Posted 2020-12-10 zxuedong

Echarts的按需加载

 

1.第一种按需加载的方式，需要我们手动引入比较麻烦

 

// 第一种按需加载的方法

// 在utils目录下新建一个initEcharts.js配置一下echarts

// 注意按需加载的路径
import echarts from ‘echarts/lib/echarts‘

// 按需加载的模块
import ‘echarts/lib/chart/bar‘
import ‘echarts/lib/component/legend‘
import ‘echarts/lib/component/title‘

export default echarts


// 在main.js中引入使用

import echarts from ‘./utils/initEcharts‘

Vue.prototype.$echarts = echarts

 

2.使用 babel-plugin-equire 插件实现按需加载

 

// 先安装 babel-plugin-equire 插件

npm i babel-plugin-equire -D

// 然后在 babel.config.js 中配置插件

module.exports = {
  presets: [
    ‘@vue/cli-plugin-babel/preset‘
  ],
  plugins: [
    [
      ‘component‘,
      {
        libraryName: ‘element-ui‘,
        styleLibraryName: ‘theme-chalk‘
      }
    ],

    // 注册使用一下
    ‘equire‘
  ]
}

// 注意：此时需要重新启动一下项目


// 在 utils 下的 initEcharts.js 中按需加载

// eslint-disable-next-line    此英文是为了取消eslint的报错
const echarts = equire([
  ‘bar‘,
  ‘legend‘,
  ‘title‘
])

export default echarts