VUE 中import和require选择和位置 echarts按需引用，提高渲染速度

import和require选择和位置
原则，按需引入，能组建中import就组件里面，不能或多组件使用才放到main.js里面，选择es6的语法import来做，这个是趋势，如果渲染有影响就使用require看看效果注意import在weabpack里面的bable编译之后会变成require

以echarts为例
如果很多页面使用就放在main.js里面

import echarts from ‘echarts’ //引入echarts
Vue.prototype.$echarts = echarts //引入组件

如果是只有一部分那就在该文件中

import echarts from ‘echarts’ //引入echarts
直接用echarts.init（他的方法）

关于选择方式，主要是加载速度的问题，这个建议使用import。另外还要做到按需引入，打包echarts时使用按需从官网上下载图例，比如你用折线图就只下这个。在组件中使用时，也要按需引入

刚刚看到一篇手记还热乎呢，楼主可以参考这个https://www.imooc.com/article/22371，简单罗列require 是赋值过程并且是运行时才执行， import 是解构过程并且是编译时执行。require可以理解为一个全局方法，所以它甚至可以进行下面这样的骚操作，是一个方法就意味着可以在任何地方执行。而import必须写在文件的顶部。require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量，而import只需要依据import中的接口在编译时引入指定模块所以性能稍高3.在commom.js 中module.export 之后 导出的值就不能再变化，但是在es6的export中是可以的。

//引入基本模板
 let echarts = require(‘echarts/lib/echarts‘)
 
// 引入饼状图组件
require(‘echarts/lib/chart/pie‘)
// 引入提示框和title组件，图例
require(‘echarts/lib/component/tooltip‘)
require(‘echarts/lib/component/title‘)
require('echarts/lib/component/legend')
Vue.prototype.$echarts = echarts //引入组件