《前端工程化體系設計與實踐》-筆記
阿新 • • 發佈：2019-03-29
ket ive font bbb ebp jpeg 前端工程 ati 瀏覽器
github 地址：https://github.com/boijs/boi
這篇博客是我對《前端工程化體系設計與實踐》做的筆記，這本書本身講的也是比較範的東西，只是給出整體的前端搭建工程的解決方案，具體的實現細節，還是需要我們自己一個一個去查，然後結合自己的項目去深入了解。
本書的思維導圖
第一章 前端工程簡史
前後端分離形態
工程化方案整體架構
第2章 腳手架
sails.js node.js全棧MVC框架
yeoman 開放的腳手架平臺，不封裝任何具體方案
第3章 構建
自動生成CSS Sprites功能實現借助於插件postcss-sprites
模塊化開發 1.CommonJS 2.AMD/CMD--著力於瀏覽器的模塊和規範
- ES6 module import export
3.6 增量更新與緩存 1）本地緩存：LocalStorage, SessionStorage
- 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搭建的服務
- Local模式
- Proxy模式 express-http-proxy
- DefinePlugin和環境變量
第5章 部署
5.1 審查代碼
5.2 Apache設置緩存策略
第6章 工作流
6.1 本地工作流
6.1.2 代碼分離與測試沙箱
6.2 雲平臺工作流
6.2.1 gitflow與版本管理
《前端工程化體系設計與實踐》-筆記