最近新建項(xiàng)目時(shí)遇到了很多前端基礎(chǔ)建設(shè)方面的問題，于是我也化身為了webpack工程師(面向百度版)。這篇文章講一下按需引入方面的問題。

element按需引入

按照官網(wǎng)的說法 借助 babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。

npm install babel-plugin-component -D
安裝完這個(gè)插件之后在根目錄中新建.babelrc文件，并將內(nèi)容修改為

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

實(shí)際這樣操作會(huì)導(dǎo)致項(xiàng)目無法啟動(dòng)，參考了網(wǎng)上許多的文章，最初我改成了這樣：

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

不需要再額外安裝依賴。

結(jié)果我發(fā)現(xiàn)打包之后element的體積并沒有減小，表面上是按需引入，但是并沒有達(dá)到按需引入的效果，而且echarts也受到了影響，最終我參考另一篇文章改成了如下所示的樣子才得以解決：

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

package.json增加這兩項(xiàng)

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

關(guān)于按需引入組件主題這點(diǎn)，styleLibraryName我始終無法修改成我實(shí)際用的自定義主題的路徑，最后還是直接在代碼里全量引入自定義主題了。

其實(shí)最開始我還沒懷疑到這個(gè)上面，結(jié)果我用ivew+echarts的項(xiàng)目模板試了下發(fā)現(xiàn)按需引入完全沒問題，通過控制變量法可以猜測是element的鍋，果不其然。

echarts5 按需引入

項(xiàng)目中結(jié)合了vue-echarts使用，按照文檔做本來沒什么問題。但當(dāng)我使用了echarts官方的自定義主題構(gòu)建工具之后發(fā)現(xiàn)按需引入后打包的體積反而還變大了...

最后上git上提issue被告知在當(dāng)前版本(echarts5.1.2)引入主題之后確實(shí)會(huì)影響按需引入，echarts5.3會(huì)處理這個(gè)問題。好吧echarts目前只能整體引入了。

后記

最近新的項(xiàng)目還處于產(chǎn)品設(shè)計(jì)階段，而且這個(gè)時(shí)間持續(xù)了好久，所以我倒是有空把項(xiàng)目的基礎(chǔ)設(shè)施好好打磨一番，同時(shí)也發(fā)現(xiàn)了很多之前沒注意到的問題，所以 webpack工程師開始養(yǎng)成...... 同時(shí)我為了驗(yàn)證一些打包后的問題，還特地購買了云服務(wù)器，后面的話會(huì)學(xué)習(xí)一些運(yùn)維的知識。