《前端工程化体系设计与实践》-笔记
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与版本管理