Posts
All the articles I've posted.
2019 年终总结：跑步 713 公里与技术转型的一年
Published: at 16:00记录2019年的跑步历程、爬山经历和技术成长，从后端到大数据再到全栈的角色转换，包含 Spark、Scala、Kafka 等技术学习心得
ESM 大势所趋
Published: at 16:00**由 ESM 的普及，而带来的打包工具的革命以及适用于 ESM 下一代 CDN 的发展，业务项目在生产环境开始使用原生的 ESM 代替以前的 Bundle 方案，从而导致开发体验及网站速度的大幅提升。** 核心代码就是下边这一行: 使用 HTTP Import 的方式代替以前的 Bare Import + Bundle 而 ESM 的发
AST 的生成
Published: at 16:00AST 是 Abstract Syntax Tree 的简称，是前端工程化绕不过的一个名词。它涉及到工程化诸多环节的应用，比如: 1. 如何将 Typescript 转化为 Javascript (typescript) 1. 如何将 SASS/LESS 转化为 CSS (sass/less) 1. 如何将 ES6+ 转化为 ES5 (b
npm audit
Published: at 16:00如何确保所有 npm install 的依赖都是安全的？ 当有一个库偷偷在你的笔记本后台挖矿怎么办？ 比如，不久前一个周下载量超过八百万的库被侵入，它在你的笔记本运行时会偷偷挖矿。 Audit ，审计，检测你的所有依赖是否安全。 npm audit / yarn audit 均有效。 通过审计，可看出有风险的 package 、依赖库的依
资源是如何打包的
Published: at 16:00以下代码是 sum.js 与 index.js 两个代码。 以下代码是打包后的代码。
Long Term Cache
Published: at 16:00使用 webpack 等打包器进行打包时，每个资源都可生成一个带有 hash 的路径。如 + build/main.071b73.js + build/main.94474e.css + build/logo.18bac8.png 此处对添加 hash 的资源设置永久缓存，可大幅度提高该网站的缓存能力，从而大幅度提高网站的二次加载性能。
使用 CDN 加速你的网站
Published: at 16:00前端面试过程中有一个万能的面试题，当他们想不到还有什么面试题要问的时候，就会问这个: 如何优化你们的网站性能。 而其中 CDN 就是其中一条，而在我看来，它是最重要的一条: 配置CDN可以使网站性瞬时得到质的提升，即使静态资源打包体积过大，并且缓存策略很差。 那什么是 CDN 呢？ CDN，全称 Content Delivery Netw
8s 定律
Published: at 16:00路径拥堵 中心服务器，去中心，低延迟，分布式 CDN cache L2 / CDN cachd L1 DCDN/SCDN DNS/TCP/SSL/TTFB mtr/traceroute/httpstat/17测 ETag X-Cache: HIT X-Swift-CacheTime: 3600 X-Swift-SaveTime: 3600
如何正确地进行分包
Published: at 16:00*为什么需要进行分包，一个大的 bundle.js 不好吗？* 极其不建议，可从两方面进行考虑: 1. 一行代码将导致整个 bundle.js 的缓存失效 1. 一个页面仅仅需要 bundle.js 中 1/N 的代码，剩下代码属于其它页面，完全没有必要加载 > webpack(或其他构建工具) 运行时代码不容易变更，需要单独抽离出来，比
什么是 CICD
Published: at 16:00+ CI ，Continuous Integration，持续集成。 + CD ，Continuous Deployment，持续部署。 CICD 一般合称，无需特意区分二者区别。从开发、测试到上线的过程中，借助于 CICD 进行一些自动化处理，保障项目质量。 CICD 与 git 集成在一起，可理解为服务器端的 git hooks :
前后端分离
Published: at 16:00强大的分裂感。现在使用 React 开发业务，但是这里边 Component 我来写，你来负责 CSS。 + controller + user + views + user 由于 set-cookie 的需要， /etc/host 静态资源服务器 在线上使用性能更加强大的 nginx 。 BFF ， Backend for Fronte
corejs
Published: at 16:00$1 是关于 ES 标准最出名的 polyfill ，polyfill 意指当浏览器不支持某一最新 API 时，它将帮你实现，中文叫做垫片。你也许每天都与它打交道，但你毫不知情。 > 有一段时间，当你执行 npm install 并且项目依赖 core-js 时，会发现 core-js 的作者正借助于 npm postinstall 在找
如何使用 docker 部署前端
Published: at 16:00使用 docker 部署前端最大的好处是隔离环境，单独管理： 1. 前端项目依赖于 Node v16，而宿主机无法满足依赖，使用容器满足需求 1. 前端项目依赖于 npm v8，而宿主机无法满足依赖，使用容器满足需求 1. 前端项目需要将 8080 端口暴露出来，而容易与宿主机其它服务冲突，使用容器与服务发现满足需求 假设本地跑起一个前端
eslint 核心
Published: at 16:00eslint ，对代码不仅有风格的校验，更有可读性、安全性、健壮性的校验。 关于校验分号、冒号等，属于风格校验，与个人风格有关，遵循团队标准即可，可商量可妥协。 与 prettier 不同， eslint 更多是关于代码健壮性校验，试举一例。 + Array.prototype.forEach 不要求也**不推荐回调函数返回值** + A
浏览器中的原生 ESM
Published: at 16:00通过 script[type=module] ，可直接在浏览器中使用原生 ESM 。这也使得前端不打包 ( Bundless ) 成为可能。 由于前端跑在浏览器中，**因此它也只能从 URL 中引入 Package ** 1. 绝对路径: https://cdn.sykpack.dev/lodash 1. 相对路径: ./lib.js 现
什么是前端工程化
Published: at 16:00随着 npm 及 webpack 的问世，前端的开发方式发生了天翻地覆的变化，生产力大幅提高。而生产力得以提高的一切措施都可称之为前端工程化。 随着工程化的发展，前端开发的以下界限渐渐明晰起来，我把它总结为四个方面。相互促进，相互发展。 1. 构建 1. 开发 1. 测试 1. 部署 由于涉及到方方面面，这里总结一个大纲。 + 编译原理
html-webpack-plugin 原理解析
Published: at 16:00在现代前端开发中，如何把打包后的 JS 资源自动注入到 html 中？ 如果最终打包生成的 main.js 既没有做 code spliting，也没有做 hash 化路径。大可以通过在 index.html 中手动控制 JS 资源。 但往往事与愿违: 1. main.js 即我们最终生成的文件带有 hash 值，如 main.8a9b3
index.html 与 http 缓存控制
Published: at 16:00假设在此之前你已对 http 缓存非常了解，很显然，当我们对静态资源设置 Cache-Control: max-age=7200 时，浏览器在两个小时之内将通过缓存读取静态资源，而并不会再次发送请求。 假设我们网站的目录如下，在 index.html 中会引用 main.js 和 main.css ，拥有网站 js，css，html 经典
JSON Loader
Published: at 16:00在前端中，网页只能加载 javascript 脚本资源，即便在 node，也只能加载 javascript 与 json 资源。那类似 webpack 、 rollup 及 vite 这类工具是如何加载图片、JSON 资源的呢？ 在 webpack 等打包工具中，号称**一切皆是模块**。 当 webpack 在这类打包器中，需要加载 J
package-lock.json 的意义何在
Published: at 16:00packagelock.json / yarn.lock 用以锁定版本号，保证开发环境与生产环境的一致性，避免出现不兼容 API 导致生产环境报错 在这个问题之前，需要了解下什么是 semver : $1。 当我们在 npm i 某个依赖时，默认的版本号是最新版本号 ^1.2.3 ，以 ^ 开头可最大限度地使用新特性，但是某些库不遵循该依