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

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

这篇博客是我对《前端工程化体系设计与实践》做的笔记,这本书本身讲的也是比较范的东西,只是给出整体的前端搭建工程的解决方案,具体的实现细节,还是需要我们自己一个一个去查,然后结合自己的项目去深入了解。

本书的思维导图

前端工程化
体系设计与实践.jpeg

第一章 前端工程简史

image

前后端分离形态

image

工程化方案整体架构

image

第2章 脚手架

sails.js node.js全栈MVC框架
yeoman 开放的脚手架平台,不封装任何具体方案

第3章 构建

自动生成CSS Sprites功能实现借助于插件postcss-sprites

模块化开发 1.CommonJS 2.AMD/CMD--着力于浏览器的模块和规范

  1. ES6 module import export

3.6 增量更新与缓存 1)本地缓存:LocalStorage, SessionStorage

  1. http缓存策略:强制缓存和协商缓存

Expires和max-age

 image

Etag和If-none-match

 image

增量更新:

为文件加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事件至浏览器,浏览器接收到此事件之后刷新整个页面 

image

HMR Hot Module Replacement

以局部更新取代整体更新

 image

4.3.2 异步数据接口

MockServer 用node搭建的服务

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

第5章 部署

5.1 审查代码

5.2 Apache设置缓存策略

第6章 工作流

6.1 本地工作流

 image

 

6.1.2 代码分离与测试沙箱

 image

 

 

6.2 云平台工作流

 image

 

 

6.2.1 gitflow与版本管理

 image

 

猜你喜欢

转载自www.cnblogs.com/ppxyq/p/10623100.html
今日推荐