前端代碼優化（持續更新...）

 前言

這個迭代開發需求比較少，就打算着手對項目進行一些優化，主要從代碼優化和性能優化兩個方面入手。僅以此篇隨筆記錄一下一些優化的要點，前端優化的路程漫漫，持續更新...

 

1.css優化重構

1）提升代碼性能

　　a.儘可能將樣式寫在單獨的css文件裏面；單獨css文件的好處：（1）內容和樣式分離，易於管理和維護；（2）減小頁面體積；（3）css文件能夠被緩存、重用，維護成本下降

　　b.不使用@import；import並非引入代碼到<style></style>裏面，而是發起新的請求得到樣式資源，而且沒有加scoped；把@import改爲<style src=""></style>引入外部樣式，就能夠解決樣式是全局的問題

　　c.避免使用複雜的選擇器，層級越少越好；建議選擇器的嵌套最好不要超過三層，簡潔的選擇器不只能夠減小css文件大小，提升頁面的加載性能，瀏覽器解析時也會更加高效，也會提升開發人員的開發效率，下降了維護成本。

　　d.精簡頁面的樣式文件，去掉不用的樣式；無效樣式會形成（1）樣式文件偏大，影響加載速度（2）瀏覽器會進行多餘的樣式匹配，影響渲染時間的問題。正確的處理方法是根據當前頁面須要的css去合併那些當前頁面用到的CSS文件；合併成一個文件有一個優勢：樣式文件會被瀏覽器緩存，進入到其餘頁面樣式文件不用再去下載。

　　e.利用CSS繼承減小代碼量；CSS中存在繼承屬性和非繼承屬性，區別是該屬性的初始值是否使用父元素同屬性的計算值。非繼承屬性能夠經過指定值爲inherit來實現繼承。常見的能夠繼承的屬性好比：color，font-size，font-family等等

2）提升代碼的可維護性

　　a.命名與備註：命名要規範，見名思意

　　b.提取重複樣式：提取相同的樣式成爲一個單獨的類再引用，這樣不只能夠精簡CSS文件大小，並且CSS代碼變少，更易於重用和維護

　　c.書寫順序：顯示屬性-->自身屬性-->文本屬性

　　　　（1）位置屬性(position, top, right, z-index, display, float等)
　　　　（2）大小(width, height, padding, margin)
　　　　（3）文字系列(font, line-height, letter-spacing, color- text-align等)
　　　　（4）背景(background, border等)
　　　　（5）其餘(animation, transition等)

2.不生成map文件

vue項目打包以後的js會自動生成map文件

map文件做用：項目打包後，代碼是壓縮加密的，若是運行時報錯，輸出的錯誤信息沒法準確得知是哪裏代碼報錯；map能夠像未加密代碼同樣，輸出是哪一行哪一列有錯。

若是不須要，能夠找到config/index.js文件，修改productionSourceMap：false

不生成map文件能夠減小dist包的大小，加快部署時間。

3.vue路由懶加載

使用require或import實現路由按需加載；

require將會告訴 webpack自動將代碼切割成多個包，這些包會經過 Ajax 請求加載

使用import關鍵字引入，這個import('XXX')函數會返回一個Promise對象