前端優化

1. 利用工具

1.1編輯器：webstorm
1.2瀏覽器開發工具

pc端

移動端

1.3其餘工具
切圖工具：cutterman
圖片壓縮：智圖
生成雪碧圖
調試工具

2.前端工程化

（1）初始，生成基礎目錄結構和樣式庫
（2）開發，實時預覽/預編譯
（3）構建，預編譯、合併壓縮js，css，圖片、自動生成雪碧圖，base64圖片
（4）發佈，將構建後靜態文件發佈上線
（5）打包，資源路徑轉換，源碼打包

3.速度性能

雅虎

優化方向及優化手段

請求數量 ： JS、CSS文件選擇性合併，小圖片合併雪碧圖或直接生成base64圖片，拆分初始化負載--懶加載
請求帶寬 ：開啓GZip，精簡JavaScript，移除重複腳本，圖像優化
緩存利用 ：使用CDN，使用外部JavaScript和CSS，添加Expires頭，減小DNS查找，配置ETag，使AjaX可緩存
頁面結構 ：將樣式表放在頂部，將腳本放在底部，儘早刷新文檔的輸出
代碼校驗 ：避免CSS表達式，避免重定向

grunt or gulp or webpack or npm scripts

老-->新

---

pc和移動端工具選擇

---

特色：
webpack--模塊化
簡單命令可用npm scripts
複雜的用gulp 或 grunt
gulp命令比grunt簡潔直觀

參考文獻：

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

有關 Grunt - 自動化構建工具的奇技淫巧