移動前端優化，應該找對乾爹！

個人目錄

1：webpack文章推薦

2：葉小釵文章推薦

3：個人項目優化

 

1>> 若是說前端構建的嗲是grunt，那麼乾爹就是gulp，以及新干爹（webpack）：

Webpack可以和 grunt、gulp、karma 等已有工具很好地集成。而Webpack本身並不提供模塊的下載，但它能夠和已有的包管理器很好的配合，咱們依然能夠用npm、Bower、component等來管理你的Web開發資源，同時在Webpack中加載它們。

文章推薦以下：

 Webpack 爲Web開發而生的模塊管理器 ：http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/

 

2>> 前端有太多的優化手段值得考慮以及深思，以前看過葉哥前端的最佳實踐，以爲很受啓發，文章推薦以下：

 淺談移動前端的最佳實踐：http://www.cnblogs.com/yexiaochai/p/4219523.html

 

3>>我就講我在個人spa項目中，針對項目優化的一個點進行介紹:  針對請求作優化，作好模塊化的工做

若是說MVVM的親爹是knockout,那麼它的乾爹估計就是 Angular、Avalon 、Vue、React 等等，選擇好一個好的mvvm框架對於項目優化維護也是很重要的，這裏小菜我就不針對各個框架的好壞進行說明，孰優孰劣我以爲實踐+適合的場景是最好的檢驗方法，我項目裏選用的框架是Vue + Webpack，本身一直很關注它，以爲它很專一。

webpack.config.js 文件配置以下：

 

webpack.config.js 的命令:

• webpack 來執行一次開發的編譯
• webpack -p for building once for production (minification)
• webpack -p 來針對發佈環境編譯(壓縮代碼)
• webpack --watch 來進行開發過程持續的增量編譯(飛快地!)
• webpack -d 來生成 SourceMaps

我以爲移動優化中，其中最值得去作的優化是，針對請求作優化，那麼就必須得針對項目作好模塊化了。

好比說:開發的時候是這個樣子：

index.css
index.js
template.html

最終發佈是這個樣子：
build1.js

由3個請求,合併成1個，這個優化是最明顯的。

截圖如圖1:

    

截圖如圖2：