《前端工程化體系設計與實踐》-筆記

github 地址：https://github.com/boijs/boi

這篇博客是我對《前端工程化體系設計與實踐》作的筆記，這本書自己講的也是比較範的東西，只是給出總體的前端搭建工程的解決方案，具體的實現細節，仍是須要咱們本身一個一個去查，而後結合本身的項目去深刻了解。

本書的思惟導圖

第一章 前端工程簡史

先後端分離形態

工程化方案總體架構

第2章 腳手架

sails.js node.js全棧MVC框架
yeoman 開放的腳手架平臺，不封裝任何具體方案

第3章 構建

自動生成CSS Sprites功能實現藉助於插件postcss-sprites

模塊化開發 1.CommonJS 2.AMD/CMD--着力於瀏覽器的模塊和規範

3. ES6 module import export

3.6 增量更新與緩存 1）本地緩存：LocalStorage, SessionStorage

2. http緩存策略：強制緩存和協商緩存

Expires和max-age

 

Etag和If-none-match

 

增量更新：

爲文件加hash值

hash和chunkhash

contenthash是由ExtractTextPlugin插件提供

3.7.2 compiler compilation

第4章 本地開發服務器

Mock服務

json-server

4.2 動態構建

webpack-dev-middleware

lazy-是否開啓惰性模式

watchOptions-監聽細節配置

Livereload 跟HMR的區別

Livereload 的原理是在瀏覽器和服務器之間建立websocket鏈接，服務器端在執行完動態編譯以後發送reload事件至瀏覽器，瀏覽器接收到此事件以後刷新整個頁面 

HMR Hot Module Replacement

以局部更新取代總體更新

 

4.3.2 異步數據接口

MockServer 用node搭建的服務

1. Local模式
2. Proxy模式 express-http-proxy
3. DefinePlugin和環境變量

第5章 部署

5.1 審查代碼

5.2 Apache設置緩存策略

第6章 工做流

6.1 本地工做流

 

 

6.1.2 代碼分離與測試沙箱

 

 

 

6.2 雲平臺工做流

 

 

 

6.2.1 gitflow與版本管理