react优化——按需加载

1.按需加载echart组件,以饼图为例

import React, {Component} from 'react';
// import ReactEcharts from 'echarts-for-react';
//按需加载
import ReactEcharts from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import {
	Card,
	Button
} from 'antd'

export default class Line extends Component {

	state = {
		books:[1000,2000,1500,3000,2000,1200,800],//预订量
		sales:[800,1500,1300,2800,1500,1000,500],   //销量
	}
	getOption1 = ()=>{
		let options = {
			title:{
				text:'折线图-1',
				textStyle:{
					color:'pink'
				}

			},
			legend: {//图例组件
				data: ['存货'],
				icon:'circle'

			},
			tooltip: {  //提示框组件
				trigger: 'axis'
			},
			xAxis:{
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			},
			yAxis:{},
			series:[
				{
					name:'存货',
					type:'line', //柱形图
					data:[1000,2000,1500,3000,2000,1200,800]
				}
			]
		}
		return options
	}


	getOption2 = (books,sales)=>{
		let options = {
			title:{
				text:'折线图-2',
				textStyle:{
					color:'pink'
				}

			},
			legend: {//图例组件
				data: ['订单量','销量'],
				icon:'circle'

			},
			tooltip: {  //提示框组件
				trigger: 'axis'
			},
			xAxis:{
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			},
			yAxis:{},
			series:[    //数据源
				{
					name:'订单量',
					type:'line',
					data:books
				},
				{
					name:'销量',
					type:'line',
					data:sales
				}
			]
		}
		return options
	}

	update = ()=>{
		this.setState(state=>({
			books:state.books.map(item=>item+100),
			sales:state.sales.map(item=>item-20),
		}))
	}
	render() {
		const title = <Button type={'primary'} onClick={this.update}>更新数据</Button>
		const {books,sales} = this.state
		return (
			<div>
				<Card>
					<ReactEcharts
						echarts={echarts}
						option={this.getOption1()}
					/>
				</Card>
				<Card title={title}>
					<ReactEcharts
						echarts={echarts} // 按需加载时候需要该参数
						option={this.getOption2(books,sales)}
					/>
				</Card>
			</div>

		);
	}
}

2.打包完成后可以打开js文件夹，去对比第一次和第二次使用了按需加载的文件夹大小，明显大小不同。