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