怎樣開發和部署前端代碼
概念：
304 協商緩存 需和服務器通信一次
本地緩存 通過更新資源路徑，讓游覽器主動加載新資源
只有文件變化，才會導致相應url 變更，文件級別的精確緩存控制
提升網站性能
靜態資源和動態網頁分集群部署
靜態資源部署在各個CDN節點上
前端工程中關于靜態資源緩存要面臨的優化和部署問題：
先上線靜態資源還說先上線頁面？
這里面存在時間間隔，會導致期間用戶訪問頁面發生錯亂的問題
用非覆蓋式發布解決，先部署靜態資源，再灰度部署頁面
靜態資源優化方案，基本上要實現這么幾個東西：
- 配置超長時間的本地緩存 —— 節省帶寬，提高性能
- 采用內容摘要作為緩存更新依據 —— 精確的緩存控制
- 靜態資源CDN部署 —— 優化網絡請求
- 更資源發布路徑實現非覆蓋式發布 —— 平滑升級
靜態資源路徑md5化
web pack html-webpack-plugin
基于web pack 前端工程環境搭建
webapp/ # webapp根目錄
- src/ # 開發目錄
- css/ # css資源目錄
- img/ # webapp圖片資源目錄
- js/ # webapp js&jsx資源目錄
- components/ # 標準組件存放目錄
- foo/ # 組件foo
- css/ # 組件foo的樣式
- js/ # 組件foo的邏輯
- tmpl/ # 組件foo的模板
index.js # 組件foo的入口
- bar/ # 組件bar
- foo/ # 組件foo
- lib/ # 第三方純js庫
... # 根據項目需要任意添加的代碼目錄
- components/ # 標準組件存放目錄
- tmpl/ # webapp前端模板資源目錄
a.html # webapp入口文件a
b.html # webapp入口文件b
- assets/ # 編譯輸出目錄，即發布目錄
- js/ # 編譯輸出的js目錄
- img/ # 編譯輸出的圖片目錄
- css/ # 編譯輸出的css目錄
a.html # 編譯輸出的入口a
b.html # 編譯處理后的入口b
- mock/ # 假數據目錄
app.js # 本地server入口
routes.js # 本地路由配置
webpack.config.js # webpack配置文件
gulpfile.js # gulp任務配置
package.json # 項目配置
README.md # 項目說明
webpack的三個概念：模塊（module）、入口文件（entry）、分塊（chunk）
load npm模塊
資源引用
一切資源都被當作模塊
require() 時還可以在 資源path 前面指定loader，可覆蓋配置文件里的配置
require("!style!css!less!bootstrap/less/bootstrap.less");
// “bootstrap.less”這個資源會先被"less-loader"處理，
// 其結果又會被"css-loader"處理，接著是"style-loader"
// 可類比pipe操作
webpack原理
內部實現了一個全局的webpackJsonp()用于加載處理后的資源，并且把資源進行重新編號，每一個資源成為一個模塊，對應一個id，后邊是模塊的內部實現。
對圖片的輸出：
//24:
//function(module, exports) {
module.exports = "data:image/png;base64,...";
/***/
}
對css文件
默認內嵌到js里邊，運行時用style標簽內聯。可以使用ExtractTextPlugin插件將css提取用link標簽引入
