element-ui以及echarts按需引入问题

最近新建项目时遇到了很多前端基础建设方面的问题，于是我也化身为了webpack工程师(面向百度版)。这篇文章讲一下按需引入方面的问题。

element按需引入

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

npm install babel-plugin-component -D
安装完这个插件之后在根目录中新建.babelrc文件，并将内容修改为

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

实际这样操作会导致项目无法启动，参考了网上许多的文章，最初我改成了这样：

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

不需要再额外安装依赖。

结果我发现打包之后element的体积并没有减小，表面上是按需引入，但是并没有达到按需引入的效果，而且echarts也受到了影响，最终我参考另一篇文章改成了如下所示的样子才得以解决：

{
  "presets": [["@vue/cli-plugin-babel/preset"]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

package.json增加这两项

"devDependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
}

关于按需引入组件主题这点，styleLibraryName我始终无法修改成我实际用的自定义主题的路径，最后还是直接在代码里全量引入自定义主题了。

其实最开始我还没怀疑到这个上面，结果我用ivew+echarts的项目模板试了下发现按需引入完全没问题，通过控制变量法可以猜测是element的锅，果不其然。

echarts5 按需引入

项目中结合了vue-echarts使用，按照文档做本来没什么问题。但当我使用了echarts官方的自定义主题构建工具之后发现按需引入后打包的体积反而还变大了...

最后上git上提issue被告知在当前版本(echarts5.1.2)引入主题之后确实会影响按需引入，echarts5.3会处理这个问题。好吧echarts目前只能整体引入了。

后记

最近新的项目还处于产品设计阶段，而且这个时间持续了好久，所以我倒是有空把项目的基础设施好好打磨一番，同时也发现了很多之前没注意到的问题，所以 webpack工程师开始养成...... 同时我为了验证一些打包后的问题，还特地购买了云服务器，后面的话会学习一些运维的知识。