《前端工程化体系设计与实践》-笔记

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与版本管理