Vue.js實戰——Vue+ElementUI bug定位及按需引用壓縮優化_19

一、問題

1. 使用ElementUI後，相關圖標出不來；
2. 在項目中部分頁面的css中使用了backgroud-image:url(xxx/xxx.jpg)，在生產環境中不顯示；
3. ElementUI體積過大，導致Webpack打包後的js有1M多；

二、目標

1. 找出原因，解決該bug；
2. 找到替代方案，方便兼容幾種類型的圖片加載；
3. ElementUI改成按需加載；

三、方案

1. 在DEV模式下，訪問項目，發現會報："failed to decode downloaded font…"異常（圖片來自互聯網）。
   此時才搞明白，ElementUI的圖標出不來就是因爲字體加載不出來所致。解決字體的加載就解決該問題了。
   
   解決網上資料，有人說是引用路徑不對，結果我發現是在ElementUI的css中引入字體的，我們根本沒法直接改動。後面看到有人說可能是自己的file-loader重複定義衝突所致，仔細一看，果不其然！去掉後面重複的一個url-loader和file-loader後，問題徹底解決。
   
2. 問題2的原因是css-loader在加載時，會先校驗圖片路徑正不正確，而生產環境和DEV環境下，圖片的相對路徑並不一致。而且 backgroud-image:url(…)這種圖片引用方式會直接把圖片導出來，和import img from ‘xxx.jpg’這種方式效果一致。import這種方式要求圖片放在根路徑下。
   代碼結構如下：
   
   所以在DEV模式能夠正常加載，但是生產環境就無法加載。網上說的修改publicPath的方案並不能解決我的問題。最後我只能讓背景圖片存在根目錄，其它圖片在assets目錄下。我的publicPath爲’’。
   
   至此，問題2算是解決了，但是沒有找出更好的替代方案。比如圖片全部都在assets下，不需要單獨處理背景圖片…後續繼續努力吧！
3. 問題3比較好解決。曾經在其它項目中有過按需引用的經驗。好在官方文檔也比較給力。詳細步驟如下：
   a. 修改vue啓動的js。改成自己實際用到的ElementUI組件：
   
   b. 修改項目的.babelrc文件爲：

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

四、效果

1. js由1.4M變成了900k：
   全量引用時：
   
   按需引用後：
   

五、總結

1. 先確定目標再去做，做的時候儘量按照完美的方案來做，比如按需引用，對功能沒有任何影響，但是加載也會變快；
2. 多去甄別不同的方案，每個人的情況也不盡相同，要有自己的認知，一般來說越簡潔越好。

六、參考

[1] https://element.eleme.io/#/zh-CN/component/quickstart
[2] https://segmentfault.com/q/1010000019424211/