关于echart体积优化，按需构建

一、问题：在一些项目中如果使用echarts中的图表种类较少，而你使用全局的引入的话，显得不太可取，那怎么办呢？

二、解决办法：这个当然得去官网找找啦

1、在项目根目录（当然这里不是固定的）新建一个文件echarts.custom.js（当然这里也不是固定的）并添加如下内容：

// 引入 echarts 主模块。
export * from 'echarts/src/echarts';
// 引入饼图。
import 'echarts/src/chart/pie'; // 这里引入你需要的图表
// 在这个场景下，可以引用 `echarts/src` 或者 `echarts/lib` 下的文件（但是不可混用），
// 参见下方的解释：“引用 `echarts/lib/**` 还是 `echarts/src/**`”。

2、在命令行执行：

node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js

当然在这个地方你可能会出错，原因是echarts下没有下载相关依赖，cd node_modules/echarts下执行npm i 完事之后在执行上面命令
3、这个时候你需要 的文件lib/echarts.custom.min.js就打包好了，他这里使用的是构建工具rollup。这时你就可以在你需要的地方正常引入啦。例如： const { echarts } = require(’./lib/echarts.custom.min.js’)
echarts.init().setOption() // 这里就不多说了
4、如果你想使用rollup自己配置并构建的话，建议去看看rollup怎么使用，这里给个示例配置：rollup.config.js

// 这个插件用于在 `node_module` 文件夹（即 npm 用于管理模块的文件夹）中寻找模块。比如，代码中有
// `import 'echarts/lib/chart/line';` 时，这个插件能够寻找到
// `node_module/echarts/lib/chart/line.js` 这个模块文件。
import nodeResolve from 'rollup-plugin-node-resolve';
// 用于压缩构建出的代码。
import { uglify } from 'rollup-plugin-uglify';
// 用于多语言支持（如果不需要可忽略此 plugin）。
// import ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';
export default {
  name: 'myProject',
  // 入口代码文件，就是刚才所创建的文件。
  input: './src/autoDefineEcharts.js',
  plugins: [
    nodeResolve(),
    // ecLangPlugin({lang: 'en'}),
    // 消除代码中的 __DEV__ 代码段，从而不在控制台打印错误提示信息。
    uglify()
  ],
  output: {
    // 以 UMD 格式输出，从而能在各种浏览器中加载使用。
    format: 'umd',
    // 输出 source map 便于调试。
    sourcemap: true,
    // 输出文件的路径。也就是打包后的文件名字
    file: 'lib/line.min.js',
    name: 'indexxx'
  }
};

然后执行rollup --config rollup.config.js即可，这里跟webpack配置差不多。 这样之后也就可以正常引入了。