秉著做任何事情都要以結果為導向的宗旨，我寫出了這篇技術文章最重要的東西
優(yōu)化前打包的js颊糜，壓縮后的體積為4.07M，Gzip之后體積為1.35M
before_gzip
而優(yōu)化之后打包的js，壓縮后的體積為1.58M根蟹，Gzip之后體積為691K，相比較優(yōu)化前減少了整整61%糟秘。
after.png
before_gzip
優(yōu)化后壓縮后的js
js共計1.58M
一简逮、做了什么
1. 優(yōu)化vue.config.js
改動點1：加入externals（擴展），對于打包的體積尿赚，這個幫助是最大的买决。
原因：externals在webpack里面是一個很重要的概念，通過externals我們可以將一些重要的庫通過cdn的形式加載到頁面當中去吼畏，這樣會提升生產環(huán)境中頁面的渲染效率
改動點2：通過html-webpack-plugin這個webpack插件將js插入到index.html當中督赤。
通過數據證明（有好多圖片都加載不出來）：
no_add.png
每加入一個庫，都會減少相應的體積
2. 去掉了mathjs這個庫
改動點：sizeCharts.vue這個頁面里面有有個計算尺碼表的方法使用了mathjs里面的format和add方法泻蚊，經過改動后使用了decimal.js這個庫替代了mathjs躲舌。
原因1：decimal這個庫的體積比mathjs要小很多，打包后mathjs是478k性雄，而decimal是30k没卸，相差接近16倍，結果可想而知秒旋。 原因2：decimal已經在某一個庫里面被引用约计，所以已經被打包進來了，所以干脆用好這個庫迁筛。
3. 去掉了vue-echarts這個庫的使用
改動點：將店鋪管理shopMange/index.vue的代碼全部注釋掉了煤蚌，這個已經跟產品討論過了
原因：店鋪管理一直沒有被真正利用起來，因為在管理員后臺有替代品，索性將其注釋尉桩，正好可以去掉vue-echarts這個庫的使用
二筒占、最后說一下由一個bug引起的‘血’案
總結：本地打包后需要打開index.html來看看是否有報錯，然后去解決報錯蜘犁。
- 剛開發(fā)完后放到開發(fā)環(huán)境上面去看了一下翰苫，部署后打開頁面直接呈空白頁面，因為控制臺直接報錯了这橙，什么錯誤呢奏窑？報了一個TypeError的錯誤，
Cannot read property 'name' of undefined點進去一看屈扎，哇擦良哲，什么鬼？一大堆的變量有q,W,Y,X,J,p,void 0,Z,t等等助隧，不管什么鬼東西筑凫，先稍微了解一下代碼結構吧。 - 并村。巍实。。編譯成這樣哩牍，一般人是不懂了棚潦，不過作為這個項目的人，往上翻了一下就看出這個就是mcommon里面的東西膝昆，報錯的原因是什么呢丸边？？荚孵？腦袋發(fā)懵妹窖。。收叶。
Z.map(function(e) { t.component(e.name, e) })打斷點一看骄呼，e為undefined，e是從Z那里map出來的判没，所以Z是從哪里來的蜓萄，上面一看，Z是由r.Input,r.InputNumber等等一系列組件組成的數組澄峰，那么r是從哪里來的呢 - 繼續(xù)往上翻嫉沽，var r = n("5f72")，哇擦俏竞，這是什么意思绸硕。 嗯堂竟。在這個地方打一下斷點，刷新頁面移上去彈窗顯示f Element()臣咖，哦，原來是引入了element漱牵，既然引入了element夺蛇，那么為什么會報錯呢 算了，試試看下mcommon項目源碼酣胀，引入element-ui刁赦，沒有任何問題，那為啥還報錯闻镶？
- 控制臺打印window.Element()甚脉，報錯，打印window.Element铆农，顯示? Element() { [native code] } 確實是一個函數牺氨，但是函數里面空空如也，趕緊去查看head里面是否引入了element墩剖，嗯嗯猴凹，引入了，那么為什么會是空的呢岭皂，看看iview有沒有郊霎，打印window.iview，一大串爷绘。书劝。。 這是怎么回事土至，去官方網站也打印看看购对，奇怪了，也是Element() { [native code]}陶因，嗯嗯嗯洞斯？？坑赡？
- 烙如。。毅否。5分鐘后亚铁，還是沒有想出辦法來，還是得從mcommon著手螟加。 突然徘溢，一道精光閃過吞琐，我感覺血液有些沸騰，因為我看到了一個關鍵的變量：$ELEMENT然爆。難道站粟？
- 趕緊，控制臺里面打印一下window.ELEMENT曾雕，哈哈奴烙，原來是這樣。剖张。切诀。 迅速將vue.config.js里面的externas里面的Element改成ELEMENT，保存搔弄，打包幅虑，刷新頁面一氣呵成，完美顾犹，原來這么簡單啊倒庵。
- 很多bug往往就是這么頑皮，原來人家暴露出來的全局變量是ELEMENT炫刷，就是這么簡單哄芜，其實只要是細致一點也許早就將這個報錯解決了
仍然存在的問題
- emoji里面的圖片通過base64之后體積上漲了33%左右，如何破局” 這個問題其實是需要加入壓縮圖片的loader柬唯，因為目前圖片是只有打包认臊，并沒有進行壓縮，但是我暫時沒有有效的辦法去解決锄奢，后面第二次優(yōu)化的時候把這個問題解決失晴。
- mcommon可否減少打包體積，現在有40多k拘央？ 這個問題可以去看看rollup的打包過程涂屁，然后看看是否有優(yōu)化的地方，或者看看有沒有更好的打包辦法灰伟。
本次優(yōu)化提示：
- iview的版本有所不同拆又，本地使用的是3.0.1，線上使用的是3.4.1栏账，所以涉及到使用iview的地方會不會有點問題帖族，雖然我已經測試完沒有發(fā)現問題，但是還是需要同事們一起幫忙看看挡爵，以免有所遺漏竖般。
