vue.js 按需加载ElementUI 和 echarts

1. vue按需加载echarts

当我们只需要 echarts 的 line 和 tooltip 模块的时候，我们会这么写：

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'

当引入了这个插件后，我们只需要写这个 ：

// eslint-disable-next-line
const echarts = equire([
  'line',
  'tooltip'
])

这个插件会自动帮我们转化为上面的形式

安装

npm i babel-plugin-equire -D

然后，在 .babelrc 文件中添加该插件

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

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

equire(modules)

• 同步加载模块，返回 echarts 对象
• 参数 modules 是一个数组，传入需要按需加载的模块名称，具体名称参见转化规则

equireAsync(modules)

• 异步加载一个模块，返回一个初始化函数
• 参数 modules 是一个数组，传入需要按需加载的模块名称，具体名称参见转化规则

用法

新建一个文件 initEcharts.js 用于初始化 echarts 模块，然后编写如下代码：

@/src/utils/initEcharts.js

// eslint-disable-next-line
const echarts = equire([
  'line',
  'tooltip'
])

export default echarts

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

import echarts from '@/src/utils/initEcharts'

这样，最后打包出来的文件就只有包含 echarts 的核心模块和 line/bar 两个图表模块

配合 code-splitting

将上面文件的 equire 替换为 equireAsync，这个时候 equireAsync() 返回的是一个函数，函数执行后会返回一个 promise对象

// eslint-disable-next-line
const initEcharts = equireAsync([
  'line',
  'tooltip'
])

export default initEcharts

在其他文件中使用：

import initEcharts from '@/src/utils/initEcharts'

initEcharts()
  .then(echarts => {
    // do somthing with echarts
  })

完整用例可以参考

 同步加载 

<template>
	<div style="width: 800px; height: 300px;" ref="chart"></div>
	</template>
	<script>
	import echarts from './initEcharts'
	export default {
	mounted () {
	const chartInstance = echarts.init(this.$refs.chart)
	var option = {
	title: {
	text: 'ECharts 入门示例'
	},
	tooltip: {},
	legend: {
	data: ['销量']
	},
	xAxis: {
	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	yAxis: {},
	series: [{
	name: '销量',
	type: 'line',
	data: [5, 20, 36, 10, 10, 20]
	}]
	}
	chartInstance.setOption(option)
	}
	}
	</script>

异步加载

<template>
	<div>
	<div style="width: 800px; height: 300px;" ref="chart"></div>
	<button @click="showChart">加载 echarts</button>
	</div>
	</template>
	<script>
	import initEcharts from './initEchartsAsync'
	export default {
	methods: {
	showChart () {
	initEcharts().then(echarts => {
	const chartInstance = echarts.init(this.$refs.chart)
	var option = {
	title: {
	text: 'ECharts 入门示例'
	},
	tooltip: {},
	legend: {
	data: ['销量']
	},
	xAxis: {
	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	yAxis: {},
	series: [{
	name: '销量',
	type: 'line',
	data: [5, 20, 36, 10, 10, 20]
	}]
	}
	chartInstance.setOption(option)
	})
	}
	}
	}
	</script>

2.vue按需加载Elementui

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

注意，不要把 .babelrc文件原来的给删掉了，不能覆盖原来的文件，要按照其文件格式把    ElementUI的按需加载模块添加进去。