前端工程化

本系列合计 56 篇，按推荐阅读顺序列出。

• javascript 代码是如何被压缩的

  在前端中但凡谈到打包，肯定要提及到 `webpack`，毕竟它现在已经是最为流行的打包工具。但 `webpack` 更多地是表现在 `术` 上，于是我决定写这篇文章，更多地讲解一些关于 `道` 的。 对于一个前端而言，生产环境的静态资源优化，它既是面试中的高频问题，同时也最容易成为平时工作中的 OKR/KPI。

  Published:2020年2月25日 |  at 14:00
• 如何更好地优化打包资源

  随着前端的发展，特别是 `React`，`Vue` 等构造单页应用的兴起，前端的能力得以很大提升，随之而来的是项目的复杂度越来越大。此时的前端的静态资源也越来越庞大，而毫无疑问 `javascript` 资源已是前端的主体资源，对于压缩它的体积至为重要。

  Published:2020年2月25日 |  at 01:00
• 网站的缓存控制策略最佳实践

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

  Published:2020年2月29日 |  at 06:00
• 团队编码规范约束最佳实践

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

  Published:2020年3月30日 |  at 13:07
• 在生产环境中优化你的 npm i 速度

  对于一个前端应用，或者说是一个 Node 应用，在 CICD pipeline 中，无论是构建，测试，部署，其中必不可少的环节就是依赖安装: npm i

  Published:2020年3月3日 |  at 06:00
• 使用 docker 高效部署你的前端应用

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

  Published:2020年3月10日 |  at 00:38
• CICD 下前端的多特性分支环境部署

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

  Published:2020年3月11日 |  at 00:24
• 前端部署的发展历程

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

  Published:2020年3月11日 |  at 00:57
• 如何为前端本地环境配置 https 证书

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

  Published:2020年7月9日 |  at 12:42
• 如何找到一个合适的 npm 库

  由于业务需求，我需要一个 React 的弹框组件，我应如何快速选择一个合适的 npm 库？ 在错误的网址进行搜索，事倍功半: 1. ~~某度~~ 在正确的网址进行搜索，事半功倍: 1. $1: 官方网站，权威网站 2. $1 3. $1 不要使用错误冗长的关键词搜索: ~~我需要一个 React 的弹框组件~~。 请使用正确的关键词进行搜

  Published:2021年5月23日 |  at 16:00
• Git Hooks 与 Husky 原理解析与应用

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

  Published:2021年10月4日 |  at 16:00
• ESM 大势所趋

  **由 ESM 的普及，而带来的打包工具的革命以及适用于 ESM 下一代 CDN 的发展，业务项目在生产环境开始使用原生的 ESM 代替以前的 Bundle 方案，从而导致开发体验及网站速度的大幅提升。** 核心代码就是下边这一行: 使用 HTTP Import 的方式代替以前的 Bare Import + Bundle 而 ESM 的发

  Published:2019年12月31日 |  at 16:00
• AST 的生成

  AST 是 Abstract Syntax Tree 的简称，是前端工程化绕不过的一个名词。它涉及到工程化诸多环节的应用，比如: 1. 如何将 Typescript 转化为 Javascript (typescript) 1. 如何将 SASS/LESS 转化为 CSS (sass/less) 1. 如何将 ES6+ 转化为 ES5 (b

  Published:2019年12月31日 |  at 16:00
• npm audit

  如何确保所有 npm install 的依赖都是安全的？ 当有一个库偷偷在你的笔记本后台挖矿怎么办？ 比如，不久前一个周下载量超过八百万的库被侵入，它在你的笔记本运行时会偷偷挖矿。 Audit ，审计，检测你的所有依赖是否安全。 npm audit / yarn audit 均有效。 通过审计，可看出有风险的 package 、依赖库的依

  Published:2019年12月31日 |  at 16:00
• 资源是如何打包的

  以下代码是 sum.js 与 index.js 两个代码。 以下代码是打包后的代码。

  Published:2019年12月31日 |  at 16:00
• Long Term Cache

  使用 webpack 等打包器进行打包时，每个资源都可生成一个带有 hash 的路径。如 + build/main.071b73.js + build/main.94474e.css + build/logo.18bac8.png 此处对添加 hash 的资源设置永久缓存，可大幅度提高该网站的缓存能力，从而大幅度提高网站的二次加载性能。

  Published:2019年12月31日 |  at 16:00

• 前端中的AB测试与流量控制

  撰写中

• 使用 CDN 加速你的网站

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

  Published:2019年12月31日 |  at 16:00
• 8s 定律

  路径拥堵 中心服务器，去中心，低延迟，分布式 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:2019年12月31日 |  at 16:00
• 如何正确地进行分包

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

  Published:2019年12月31日 |  at 16:00
• 什么是 CICD

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

  Published:2019年12月31日 |  at 16:00
• 前后端分离

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

  Published:2019年12月31日 |  at 16:00

• config-in-packagejson

  撰写中

• corejs

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

  Published:2019年12月31日 |  at 16:00
• 如何维护自己的测试示例代码

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

  Published:2021年9月14日 |  at 16:00
• 如何使用 docker 部署前端

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

  Published:2019年12月31日 |  at 16:00
• eslint 核心

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

  Published:2019年12月31日 |  at 16:00
• 浏览器中的原生 ESM

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

  Published:2019年12月31日 |  at 16:00

• extract-css

  撰写中

• 什么是前端工程化

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

  Published:2019年12月31日 |  at 16:00
• html-webpack-plugin 原理解析

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

  Published:2019年12月31日 |  at 16:00
• index.html 与 http 缓存控制

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

  Published:2019年12月31日 |  at 16:00
• JSON Loader

  在前端中，网页只能加载 javascript 脚本资源，即便在 node，也只能加载 javascript 与 json 资源。那类似 webpack 、 rollup 及 vite 这类工具是如何加载图片、JSON 资源的呢？ 在 webpack 等打包工具中，号称**一切皆是模块**。 当 webpack 在这类打包器中，需要加载 J

  Published:2019年12月31日 |  at 16:00
• package-lock.json 的意义何在

  packagelock.json / yarn.lock 用以锁定版本号，保证开发环境与生产环境的一致性，避免出现不兼容 API 导致生产环境报错 在这个问题之前，需要了解下什么是 semver : $1。 当我们在 npm i 某个依赖时，默认的版本号是最新版本号 ^1.2.3 ，以 ^ 开头可最大限度地使用新特性，但是某些库不遵循该依

  Published:2019年12月31日 |  at 16:00
• monorepo 的发展

  monorepo 即一个 repo，多个 package。 + lerna + npm v7 + yarn + pnpm + react + vue + babel + eslint 当 node

  Published:2019年12月31日 |  at 16:00
• dev 与 devDep 的区别

  当 require('package-hello') 时，假设 package-hello 是一个 npm 库，我们是如何找到该 package 的？ 1. 寻找当前目录的 node_modules/package-hello 目录 1. 如果未找到，寻找上一级的 ../node_modules/package-hello 目录，以此递归

  Published:2019年12月31日 |  at 16:00

• npm-build

  撰写中

• 生产环境中使用 npm ci 代替 npm i

  乍一眼看 npm ci ，CI，恩，看这名字就很适合放在持续集成中。事实也是如此，它更快，更严格，也更适合于放在 CI 中，至于为什么这么说，将会在以下分别做介绍。 npm ci 基于一个独立的库 $1 安装依赖，而它拥有和 npm install 兼容的 API。当它安装依赖时，默认是缓存优先的，它会充分利用缓存，从而加速装包。 直接从

  Published:2019年12月31日 |  at 16:00

• 如何

  撰写中

• 如何对 npm 包进行升级

  npm 的版本号为 semver 规范，由 [major, minor, patch] 三部分组成，其中 + major: 当你发了一个含有 Breaking Change 的 API + minor: 当你新增了一个向后兼容的功能时 + patch: 当你修复了一个向后兼容的 Bug 时 假设 react 当前版本号为 17.0.1 ，

  Published:2019年12月31日 |  at 16:00
• 如何对 npm package 进行发包

  在发布公共 package 之前，需要在 $1进行注册一个账号。 随后，在本地(需要发包的地方)执行命令 npm login ，进行交互式操作并且登录。 发布一个 npm 包之前，填写 package.json 中以下三项最重要的字段。假设此时包的名称为 @shanyue/just-demo 之后执行 npm publish 发包即可。

  Published:2019年12月31日 |  at 16:00
• name、version 与 semver 字段

  name 与 version 字段几乎是 main 指 npm package 的入口文件，当我们对某个 package 进行导入时，实际上导入的是 main 字段所指向的文件。 main 是 CommonJS 时代的产物，也是最古老且最常用的入口文件。 随着 ESM 且打包工具的发展，许多 package 会打包 N 份模块化格式进行分

  Published:2019年12月31日 |  at 16:00
• 如何临时修复 node_modules 某个库的紧急问题？

  假设 lodash 有一个 Bug，影响线上开发，应该怎么办？ 答: 三步走。 1. 在 Github 提交 Pull Request，修复 Bug，等待合并 1. 合并 PR 后，等待新版本发包 1. 升级项目中的 lodash 依赖 很合理很规范的一个流程，但是它一个最大的问题就是，太慢了，三步走完黄花菜都凉了。 此时可直接上手修改

  Published:2019年12月31日 |  at 16:00
• 软链接和硬链接

  假设我们有一个文件，称为 hello 通过 ln -s 创建一个软链接，通过 ln 可以创建一个硬链接。 他们的区别有以下几点: 1. 软链接可理解为指向源文件的指针，它是单独的一个文件，仅仅只有几个字节，它拥有独立的 inode 1. 硬链接与源文件同时指向一个物理地址，它与源文件共享存储数据，它俩拥有相同的 inode 它解决了 np

  Published:2019年12月31日 |  at 16:00

• react-perf

  撰写中

• 前端工程化实践

  1. $1 1. $1 1. $1 1. $1 1. $1 1. $1 1. $1 1. $1 1. $1 以下 TODO 1. [如何部署 SSR 应用]() 1. [图片处理与工程化]() 1. $1 1. [CDN 下 index.html 应如何安放]() 1. $1 1. [使用 CICD 构造你的前端质量保障体系]() 1.

  Published:2019年12月31日 |  at 16:00

• require-resolve

  撰写中

• 部署时仅仅传输更改文件或新文件

  撰写中

• script

  撰写中

• sourcemap

  撰写中

• Redux TechStack

  + combineReduers + bindActionCreator + connect + Provider + mapStateToProps + mapDispatchToProps + redux + react-redux + redux-thunk + redux-saga + redux-actions + resele

  Published:2019年12月31日 |  at 16:00
• style

  在打包器，比如 webpack 中，需要借用 loader 将非 JS 资源转化成可识别为 Javascript 的 module。 在 webpack 中，处理 css 稍微比较费劲，需要借用两个 loader 来做成这件事情: 1. $1: 处理 CSS 中的 url 与 @import ，并将其作为模块引入 1. $1: 将样式注入

  Published:2019年12月31日 |  at 16:00

• 如何提高对技术的敏感度

  撰写中

• Tree Shaking

  class 是否可以 Tree Shaking + CONCATENATED MODULE Tree Shaking 指基于 ES Module 进行静态分析，通过 AST 将用不到的函数进行移除，从而减小打包体积。 有例为证: > 以下示例可在 $1 中进行在线演示 最终打包过程中， sub 没有被引用到，将不会对它进行打包。以下为打包

  Published:2019年12月31日 |  at 16:00
• 如何提升 webpack 的构建速度

  使用 $1 可评估每个 loader/plugin 的执行耗时。 webpack5 内置了关于缓存的插件，可通过以下配置开启。它将 Module 、 Chunk 、 ModuleChunk 等信息序列化到磁盘中，二次构建避免重复编译计算，编译速度得到很大提升。 如对一个 JS 文件配置了 eslint 、 typescript 、 bab

  Published:2019年12月31日 |  at 16:00
• Code Spliting

  Code Spliting 往往归为两个方面: 1. 通过 splitChunksPlugin 提取公共子模块，把第三方模块打包为 vendor.js 。一般被称作 Bundle Spliting 。 1. 通过 import() 动态加载模块，进行按需加载。一般被称作 Code Spliting 。 Code Spliting 可显著提

  Published:2019年12月31日 |  at 16:00