文章

已发布的全部长文。

• 使用 CDN 加速你的网站

  发布于2019-11-26更新于2026-09-30

  前端面试过程中有一个万能的面试题，当他们想不到还有什么面试题要问的时候，就会问这个: 如何优化你们的网站性能。 而其中 CDN 就是其中一条，而在我看来，它是最重要的一条: 配置CDN可以使网站性瞬时得到质的提升，即使静态资源打包体积过大，并且缓存策略很差。 那什么是 CDN 呢？ CDN，全称 Content Delivery Netw

• 8s 定律

  发布于2019-09-14更新于2026-09-30

  路径拥堵 中心服务器，去中心，低延迟，分布式 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

• 如何正确地进行分包

  发布于2019-08-03更新于2026-09-30

  为什么需要进行分包，一个大的 bundle.js 不好吗？ 极其不建议，可从两方面进行考虑: 1. 一行代码将导致整个 bundle.js 的缓存失效 1. 一个页面仅仅需要 bundle.js 中 1/N 的代码，剩下代码属于其它页面，完全没有必要加载 > webpack(或其他构建工具) 运行时代码不容易变更，需要单独抽离出来，比

• 什么是 CICD

  发布于2019-01-12更新于2026-09-30

  + CI ，Continuous Integration，持续集成。 + CD ，Continuous Deployment，持续部署。 CICD 一般合称，无需特意区分二者区别。从开发、测试到上线的过程中，借助于 CICD 进行一些自动化处理，保障项目质量。 CICD 与 git 集成在一起，可理解为服务器端的 git hooks :

• 前后端分离

  发布于2019-01-26更新于2026-09-30

  强大的分裂感。现在使用 React 开发业务，但是这里边 Component 我来写，你来负责 CSS。 + controller + user + views + user 由于 set-cookie 的需要， /etc/host 静态资源服务器 在线上使用性能更加强大的 nginx 。 BFF ， Backend for Fronte

• corejs

  发布于2019-05-22更新于2026-09-30

  $1 是关于 ES 标准最出名的 polyfill ，polyfill 意指当浏览器不支持某一最新 API 时，它将帮你实现，中文叫做垫片。你也许每天都与它打交道，但你毫不知情。 > 有一段时间，当你执行 npm install 并且项目依赖 core-js 时，会发现 core-js 的作者正借助于 npm postinstall 在找

• 如何维护自己的测试示例代码

  发布于2021-09-15更新于2026-09-30

  大家好，我是山月。 在我大学乃至刚毕业的两三年，在本地维护一个文件夹，维护所有的示例代码，用以新技术调研及学习一些新的 API 之类。 然而代码维护不成规矩，很多示例代码杂乱无章，写了之后再不会看第二眼。随着离职，示例代码文件夹被归为无意义且无用的代码一类，被一键格式化了。 今天，我总结下如何更好地维护自己的示例代码，不至于如同鸡肋一样食

• 前端部署的发展历程

  发布于2020-03-11更新于2026-09-30

  前端一说起刀耕火种，那肯定紧随着前端工程化这一话题。随着 react/vue/angular，es6+，webpack，babel，typescript 以及 node 的发展，前端已经在逐渐替代过去 script 引 cdn 开发的方式了，掀起了工程化这一大浪潮。得益于工程化的发展与开源社区的良好生态，前端应用的可用性与效率得到了很大提高。

• 使用 docker 高效部署你的前端应用

  发布于2020-03-10更新于2026-09-30

  Docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，运维管理。对于业务开发者而言，随着持续集成的发展，对代码质量及快速迭代的要求也越来越高。

• 如何使用 docker 部署前端

  发布于2019-08-28更新于2026-09-30

  使用 docker 部署前端最大的好处是隔离环境，单独管理： 1. 前端项目依赖于 Node v16，而宿主机无法满足依赖，使用容器满足需求 1. 前端项目依赖于 npm v8，而宿主机无法满足依赖，使用容器满足需求 1. 前端项目需要将 8080 端口暴露出来，而容易与宿主机其它服务冲突，使用容器与服务发现满足需求 假设本地跑起一个前端

• 团队编码规范约束最佳实践

  发布于2020-03-30更新于2026-09-30

  那什么是代码风格呢？从小的来说，有的开发喜欢带分号，有的不喜欢带分号。有的喜欢使用空格，有的喜欢使用 Tab。有的喜欢空两个空格，有的喜欢四个空格。除了这些，还有一些关于代码的优化，如避免声明未使用，避免冗余的代码逻辑等。如果你是新参加工作的人员，又恰好遇到一个代码风格混乱，密密麻麻赋值前后都不带空格的项目，只能有苦难言了。

• eslint 核心

  发布于2019-10-27更新于2026-09-30

  eslint ，对代码不仅有风格的校验，更有可读性、安全性、健壮性的校验。 关于校验分号、冒号等，属于风格校验，与个人风格有关，遵循团队标准即可，可商量可妥协。 与 prettier 不同， eslint 更多是关于代码健壮性校验，试举一例。 + Array.prototype.forEach 不要求也不推荐回调函数返回值 + A

• 浏览器中的原生 ESM

  发布于2019-08-09更新于2026-09-30

  通过 script[type=module] ，可直接在浏览器中使用原生 ESM 。这也使得前端不打包 ( Bundless ) 成为可能。 由于前端跑在浏览器中，因此它也只能从 URL 中引入 Package 1. 绝对路径: https://cdn.sykpack.dev/lodash 1. 相对路径: ./lib.js 现

• CICD 下前端的多特性分支环境部署

  发布于2020-03-11更新于2026-09-30

  无论大中小企业，多特性分支的前端环境基本上已成为了标配，即每一个功能分支都配有相应的测试环境。今天山月就循序渐进来讲解下多分支环境的实现方式，经济基础决定上层建筑，企业的基础服务建设决定实现方式，这里是基于 Docker 与 CICD 的实现。

• Git Hooks 与 Husky 原理解析与应用

  发布于2021-10-05更新于2026-09-30

  git hooks 是前端项目在本地通用的质量保障手段。 > npm script hook 也可对前端工程做质量加强，可见往日文章。 它在 git commit 、 git push 等 git 操作之前与之后可设置自动执行的脚本，被称为 git hooks 脚本。 代码在提交之前 ( pre-commit hook )，可做以下诸多校

• 什么是前端工程化

  发布于2019-01-21更新于2026-09-30

  随着 npm 及 webpack 的问世，前端的开发方式发生了天翻地覆的变化，生产力大幅提高。而生产力得以提高的一切措施都可称之为前端工程化。 随着工程化的发展，前端开发的以下界限渐渐明晰起来，我把它总结为四个方面。相互促进，相互发展。 1. 构建 1. 开发 1. 测试 1. 部署 由于涉及到方方面面，这里总结一个大纲。 + 编译原理

• html-webpack-plugin 原理解析

  发布于2019-09-12更新于2026-09-30

  在现代前端开发中，如何把打包后的 JS 资源自动注入到 html 中？ 如果最终打包生成的 main.js 既没有做 code spliting，也没有做 hash 化路径。大可以通过在 index.html 中手动控制 JS 资源。 但往往事与愿违: 1. main.js 即我们最终生成的文件带有 hash 值，如 main.8a9b3

• 网站的缓存控制策略最佳实践

  发布于2020-02-29更新于2026-09-30

  对于一个网站来讲，性能关乎用户体验，你在更短的时间内打开网站，你将会留住更多的用户。如果你的页面十秒才能打开，那再好的用户交互也是徒然。

• index.html 与 http 缓存控制

  发布于2019-02-13更新于2026-09-30

  假设在此之前你已对 http 缓存非常了解，很显然，当我们对静态资源设置 Cache-Control: max-age=7200 时，浏览器在两个小时之内将通过缓存读取静态资源，而并不会再次发送请求。 假设我们网站的目录如下，在 index.html 中会引用 main.js 和 main.css ，拥有网站 js，css，html 经典

• 如何为前端本地环境配置 https 证书

  发布于2020-07-09更新于2026-09-30

  使用某些 html API 时，https 是前置必须项，这要求我们在本地开发环境也能够配置 https。否则你要每次部署到测试环境才能预览效果，这对开发的敏捷度造成了极大的干扰。