前端工具链的形成是前端发展的一个体现，从开始的html、css、js三剑客就可以搞定一个项目，到现在各类工具百花齐放协助开发，越发庞大的前端项目，越是需要一套完整的开发管理流程，前端工程化被提出来。工程化下工具链也就产生了 现在的项目都有着一些通用的需求： 代码类型管理 代码风格管理 代码依赖管理 代码热更新、预编译 项目统一的构建打包 项目产物的压缩混淆 对应的产生了一系列解决方法 静态类型语言 - typescript 问题：javascript令人喜欢的点在于它的灵活，弱类型等，但是在大型项目，多人协作情况下，类型的不统一，随意修改，导致错误的发生。 代码风格检查 -...
2021, Dec 13 — 1 minute read目标 编写类似vue-cli、create-react-app的脚手架插件，熟悉npm包的开发流程，熟悉node在npm里的使用。阅读部分插件源码。 前置工作 学习方式 视频教程为辅助，倍速单节课大体逻辑后，编写代码，再将视频代码做比对。 脚手架设计 具体实现主体框架与模板库的代码。 技术主要关注点 脚手架的可扩展性 多包管理 node相关知识 npm 发布流程 脚手架的可扩展性 可以拿vue-cli做例子，除了vue...
2021, Dec 03 — 1 minute readlerna add 添加注意点 关于使用 lerna add 添加外部包导致内部包引用被删除 将版本改为本地包版本号 优先匹配本地包 lerna clean 清除 lerna bootstrap –hoist...
2021, Oct 31 — 1 minute read本次小结从工作内容、工作外学习两个个维度去记述一下。 工作内容 我这边主要是负责当前业务线与主站的维护。 业务线方面 技术栈：nest、react、less、antd、dva、pug、styles。 业务线的代码基本已经摸透，毕竟代码也就是几个月前的才搭建的，所用的技术除去服务器端渲染还是用原有的pug，其他的和主流已经接轨。从技术栈上说是略超出已有知识的，毕竟没有写过胶水层，不过感觉也没什么，毕竟原理就那样，怎么变还是那个逻辑。在其中遇到的问题很少是代码实现上的，基本是业务逻辑，代码的阅读与重构。感觉自己的优势可能是在框架代码的使用上，毕竟antd，dva用过一段时间，对里面的api比较熟悉。 成果：可能是对公共区域的公共组件的js，style的抽离（写在common.less里的组件css，直接吐了，明明是对A组件的css，然后B组件直接复制组件结构代码的吧，样式也没有隔离，然后再对B组件单独写样式覆盖，看到吐血），公共表单组件的重构。 主站方面 技术栈：太多 主站的代码，讲道理，我没怎么研究，因为太未知了，太大，都知道里面是大佬写的（啊啊啊啊看到hax的代码了），写的很好，就是无从下口，现在是跟着业务以及测试的反馈来接触上面的代码，渐渐的有点掌握寻找代码的窍门了（真的难找，router=>controller=>template，然后代码又改版，改版后的代码也混在一起，第一版、第二版、第三版代码都混在一起，真的容易找漏），改代码都不是问题，现在的感觉，业务再怎么变也就那样，有点想参加开源项目，或者技术项目，只想体验一下。 成果：对主站的逻辑大体了解，gulp的执行稍稍理解，从零搭建wabpack框架，理解到组件化的编程在多年以前就已经在大佬们玩转。 工作外学习 说到这个就有点尴尬，其实主动学习的不多，学习也是为了完成工作，还是个工具的使用者的水平吧，太菜了就。 nest 刷了一遍文档，现在自己跑个服务简简单单，controller、service、module一写，项目就跑起来了，再写写pipe、filter，完善了，做胶水层够了，如果再涉及到模板渲染，就加个pug，wabpack配置一下，简简单单。作为使用者应该戳戳有余，如果让我独立去搭建一个类似业务线的架子，我想问题基本上没有吧。...
2021, Apr 05 — 1 minute read什么是 ssr (Server Side Rendering) 服务器端渲染，顾名思义是将渲染的工作放在 Server 端进行。 而与之对应的是 CSR ，客户端渲染，也就是目前 Web 应用中主流的渲染模式，一般由 Server 端返回的初始...
2021, Apr 05 — 1 minute read昨天在编写react时发现了一件怪事，在useEffect内的定时器里的函数无法访问最新的state里的值，遇到这个问题第一反应当然是函数执行时因为闭包里引用的刚开始定义是的值，所以没更新，于是对函数进行useCallBack，把函数内所有用上的依赖定义上。 const TipModal = () => { const [progress, setProgress] = useState(0); const [type, setType]...
2021, Mar 24 — 2 minute read介于前天有关web性能优化相关，想到webpack相关的知识有些遗忘，在此记录一下。 代码分离 代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。 入口起点：使用 entry 配置手动地分离代码。 webpack.config.js entry: { index: './src/index.js', another: './src/another-module.js', }...
2021, Jan 22 — 2 minute read现在的业务往往是B/S架构。 客户端页面通过http请求与服务器端通信，在这个循环里，前端能做的点有两个 网络请求方面 CDN(Content Delivery NetWork) 在各个地方搭建相关服务器，由中心服务器来对各服务器做数据同步。DNS会解析到最近的IP进行TCP/IP链接，发起http请求。 浏览器缓存 首先这方面是从服务器端进行设置，相关内容会放在response的头信息里。缓存分强缓存、协商缓存。强缓存则请求头里带有cache-control:max-age=时长、expires: 过期时间，浏览器一般只接受其中之一，接收到则一定缓存。协商缓存有请求头带有if-none-match:浏览器中该文件的标签，服务器端会拿取当前文件的etag与请求头中的标签对比，相同则返回304标识可用。请求头带有if-modified-since:最后一次更新时间，响应头信息中带有last-modified:最后一次更新时间，源头服务器认定的资源做出修改的日期及时间。 通过两个时间比较觉得是否需要更新文件。 http2 http1每次请求都要进行一次http链接（三次握手四次挥手），同时浏览器最多发送6个并行的请求，http2则会复用原有链路进行通信。http1是用文本形式携带信息，http2数据压缩后以帧的形式发送信息。 webpack 通过webpack配置可以有效减小生成的包的大小。...
2021, Jan 20 — 1 minute read