前端性能优化-按需引入Echarts组件

一.安装

echarts官网

//npm安装最新稳定版
npm install echarts --save

二.自动按需引入

1. 安装插件
   babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

npm i babel-plugin-import -D

2. 配置

.babelrc 中添加该插件

{
   
  "plugins": [
  	 // other plugins
  	 ...
  	 
    "equire"
  ]
}

引入这个插件后，在 babel 编译时会注入两个全局函数：equire 和 equireAsync

equire(modules)
同步加载模块，返回 echarts 对象 参数 modules
是一个数组，传入需要按需加载的模块名称，具体名称参见转化规则
equireAsync(modules)
异步加载一个模块，返回一个初始化函数
参数 modules 是一个数组，传入需要按需加载的模块名称，具体名称参见转化规则

三.使用

新建initEcharts.js文件,我的文件放在了utils下

// @/src/utils/initEcharts.js
const echarts = equire([
  // 写上需要的组件
  // 'bar', //柱状图
  // 'pie', //饼图
  'line', //折线图
  // 'legend', //图例
  'title', //标题
  'tooltip' //提示工具
])

export default echarts

在需要用到 echarts 的地方引入 initEcharts.js 文件

import echarts from '../../utils/initEcharts'

组件中按需引入

<template>
  <div>
    <div :id="idCanvas" style="width:460px;height:350px;margin:auto;"></div>
  </div>
</template>

<script>

import echarts from '../../utils/initEcharts'
export default {
   
	data() {
   
	    return {
   
	      charts: "",
	      opinionData: [], //y轴
	      timeData: [], //x轴
	    };
	},
   methods: {
   
    drawLine(id) {
   
      let that =