由于项目历史遗留, echarts与lodash都是全部打包到vendor里面的，但是显然我们并不需要全部的功能，希望改成按需加载的方式，记录下改造的过程。

首先是echarts：

最开始所有组件都是

1
import echarts from 'echarts'

这样的引入方式，按照官网的按需引入方法改成类似

1
2
3
4
import echarts from 'echarts/lib/echarts'
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

这样的样子，但是组件太多，这样的方法手工改明显不可取，而且往后还要使用echarts的时候也还需要这样繁琐的引入，明显不是我们所需要的样子，思考了下，新建了一个echarts.js文件，在里面批量引入所需要的echarts组件再导出，这样明显会好很多：

1
2
3
4
5
6
7
export default Promise.all([
  import(/* webpackChunkName: "echarts" */ 'echarts/lib/echarts'),
  import(/* webpackChunkName: "echarts" */ 'echarts/lib/chart/bar'),

  import(/* webpackChunkName: "echarts" */ 'echarts/lib/component/tooltip'),
  import(/* webpackChunkName: "echarts" */ 'echarts/lib/component/title'),
])

所有需要引入echarts的组件引入这个文件就ok啦，如果需要增加echarts组件的引入，只需要在这里加就好，很方便。

其次是lodash：

还是历史遗留，import _ from 'lodash'与var _ = require('lodash')交杂其中，所幸require写法的不多，将其改为import的写法，然后引入babel插件babel-plugin-lodash，一步到位。