背景

无意间看到了公司的书架上面有这么一本书，然后借来看看。花了一个星期看完了，我自己感觉还不错吧，记录一下，推荐朋友也读读。下次再看看还有没有别的书，再借来读读

书讲了一些什么？

有点儿像历史书，讲了前端工程化的发展历史。可能是我喜欢历史吧，看起来很带劲，这种书也是我第一次读，正好也是我想了解的。从前端工程简史 => 手脚架 => 构建 => 本地开发服务器 => 部署 => 工作流 => 前端工程化的未来

简史

大前端是因为大前端不接触数据库操作，大前端不负责真正的Web服务层，而是中间层，主要解决的是HTML渲染问题

前端工程师的技能栈：

硬技能： HTML/CSS/Javascript（计算机体系的理论知识，数据结构，算法软件工程等基础知识决定前端工程的上限 => 数据结构/算法/软件工程/基础知识

软技能： 用户体验，用户体验是web产品吸引用户的第一道菜也是前端工作产出的重点（内容的快速展现，减少用户等待，保证操作流畅度，减少设备的耗电，完成业务需求是保证了量，提升产品性能需求是保证了质，二者缺一不可，比如回车键提交表单，空内容不要发送请求 => 性能优化策略/浏览器渲染原理/javascript引擎工作原理

扩展技能： 服务端知识，web产品运行原理 => HTTP 协议/web应用基本架构模型

传统的网站渲染流程是浏览器主动发起请求，然后服务器生成HTML文档后发送给浏览器，浏览器接到响应之后将HTML文档渲染为可视网页（优点节省客户资源，缺点每访问一个页面都发发送请求，服务器进行路由匹配生成HTML文档再发给浏览器，消耗服务器大量的计算资源

单页面应用：渲染/路由交给客户端，服务端只提供渲染HTML所需要的JSON数据，（优点，减少服务器的资源渲染，JSON数量体积小，减少网络请求，可以离线使用，页面路由前端控制快速灵活，缺点，浏览器需要等待javascript文件加载后才可以渲染，用户等待过程页面空白，数据格式差异，路由逻辑冲突，不利于SEO搜索引擎优化

我们现在一般用的都是单页面应用，我从业以来写的也都是单页面应用，我自己觉得开发体验还不错。也是前后端分离的基础

前后端分离的角度

开发：缩短开发周期，并行开发

测试：快速定位

部署： 简化部署流程，增强应用程序的健壮性，分离静态文件和动态文件，方便出问题回滚（JS/CSS/图片等静态资源部署到静态服务器，HTML模板中间层代码部署到web服务器

部署的时候注意了单页面SPA项目中的html文件要与其他的静态资源文件设置不同的缓存策略，比如HTML使用协商缓存304，其他静态资源使用强缓存200

客户端的缓存可以分两种：

1. 利用本地存储，localStorage/sessionStorage（代码架构层面优化

2. 利用HTTP缓存策略（需要服务器配合，不同的资源使用不同的缓存策略

增量更新是目前大部分前端团队采用的缓存更新方案，结合HTTP策略，既能保证用户在第一时间获取到最新资源，又可以减少网络资源消耗（构建文件产出hash指纹，构建更新HTML文件对其静态资源的引用

强缓存和协商缓存都是将资源缓存到本地，强缓存是根据过期时间决定使用本地缓存还是请求新的资源，协商缓存是每次都会发出请求，经过服务器对比之后采用本地缓存还是新资源，具体哪一种缓存策略用HTTP协议首部决定

HTTP协议头部

Expires和max-age是强缓存策略的关键信息，Expires所指的时间是以服务端时间为准，但是客户端判断是否过期是将客户端本地时间和此做对比，若客户端时间被修改了，则可能出现Expires控制缓存资源失效 max-age指缓存的时间跨度

Cache-control ：

no-cache是先于服务器确认返回是否发生变化，没有可以使用缓存副本，

no-store，禁止缓存，每次像服务器发起请求，并且下载完整响应

public：浏览器以及中间缓存器可以无限缓存，不常用

private：可以被浏览器缓存，但是不能被中间任何中间器缓存包括CDN

Etag，是服务器为资源分配的字符串形式唯一性标示，作为响应头部信息返回给浏览器，当上诉均过期之后，将Etag值通过If-none-match作为请求发送给服务器，未改变返回304，以及改变请求新的资源

工程化

前端工程化是目标是解放生产力提高效率

加入构建流程（解决浏览器兼容性问题，提升css 弱编程的能力

加入本地开发服务器（Mock服务，前后端同时开发

静态资源动态资源分离部署，变化的资源后面加上hash，刷新后请求最新的资源

工程化！=工具化，工程化是一系列工具规范的组合，规范为蓝本，工具为实现，工具是媒介

构建

手脚架内容没啥好讲的，都是过去的历史，讲了怎么发展到如今的，如今vite就是一个很不错的构建工具，vue，react都有了自己的手脚架，webpack这个构建工具相对于之前用的都很少了。感慨如今的技术发展之快呀，但是构建还是有点东西可以让我们学习的

有些源代码是没有办法在浏览器环境运行的，构建工作的核心是将其转化为宿主可执行代码 ES规范转译，css语法转译，HTML模板渲染

依赖打包，即模块化减少HTTP请求，资源嵌入，base64格式嵌入文档，文件压缩，hash指纹