2025.3.7

前端的构建流程

1. 开发者提交代码到 GitLab 仓库，触发 CI/CD 流程

2. GitLab CI 根据.gitlab-ci.yml 配置执行构建流程，主要包含 create_branch、build 和 test 三个阶段。

3. 构建阶段使用 Dockerfile 进行多阶段构建：第一阶段使用 node 环境安装依赖、构建代码、上传 sourcemap 到 Sentry、删除 map 文件、上传静态资源到七牛云；第二阶段使用精简环境，只复制构建产物和必要脚本

4. 构建完成后，通过 express 服务运行容器，对外暴露 5000 端口

5. 不同环境（开发、测试、生产）通过 front_env 参数区分，影响构建配置和资源上传路径

cdn 加速

CDN 加速在前端主要通过分发静态资源到边缘节点，减少延迟和提升加载速度。

1. webpack 配置 cdn 。打包的静态资源放到 cdn 上面，这样可以减少服务器的压力，加快访问速度。

2. 选择合适的 CDN 服务商，比如阿里云或 cloudflare。 根据用户分布选节点覆盖广。。然后，把 JS、CSS、图片这些静态资源上传到源服务器，绑定 CDN 域名，前端引用改成 CDN 地址，比如从 yourdomain.com/bundle.js 改成 cdn.yourdomain.com/bundle.js。

为了最大化效果，我会设置缓存策略，用 Cache-Control 设置长缓存，文件名加 hash 保证更新时刷新。比如在 KN 项目中，音视频文件用 CDN 分发，缓存一年，加载时间从 5s 降到 2s。如果有动态内容，我会用动态加速优化 API 请求。

另外，我会在构建时用 Webpack 的 publicPath 配置 CDN 路径，结合预加载关键资源，像 提前加载视频。线上还会监控命中率和加载时间，确保效果。

webpack 热更新的优化

webpack 热更新原理

service worker 离线缓存的策略

PWA 详解

强缓存和协商缓存

pm2 如果自己挂了怎么办

PM2

dockerfile 做了啥

1. 第一阶段（构建阶段）：使用 node:14.21.3-env 镜像，完成依赖安装、代码构建、sourcemap 上传到 sentry 和静态资源上传到七牛云等工作。

2. 第二阶段（运行阶段）：使用更精简的 codemao-master:12-onbuild 镜像，只复制第一阶段生成的构建产物（build 目录）和必要的运行脚本，安装 express 并通过 npm run serve 命令启动服务。

docker 相关的问题。。

前端方面的 Docker 和 Kubernetes.md

为什么有了 nginx，还用 express

官网：

1. 开发环境一致性： 在本地开发和 docker 环境中都是还用 node 生态，避免环境差异

2. 灵活性：express 可以轻松的添加中间件处理一些动态请求，而不仅仅是静态文件服务

3. 调试便利：如果出现问题，可以直接在 node.js 环境中调试，不需要查看 nginx 日志

4. 轻量级部署：对于前端应用来说，express 足够处理静态资源服务的需求，不需要额外安装 nginx。当然，在生产环境中通常会使用 nginx 作为反向代理，配合 express。

在我的项目里面：

1. 通过 getStaticPath()函数获取静态资源目录路径，默认是 build 目录；

2. 使用 fixPagesEnvironment()函数修改 HTML 文件中的环境变量标签，将其设置为当前运行环境（development 或 production）；

3. 使用 express.static 中间件提供静态文件服务；

4. 配置了一个通配路由，将所有请求都重定向到 index.html，这是为了支持前端路由；

5. 最后在 5000 端口启动服务器。这个文件的主要目的是在开发环境中提供一个简单的静态资源服务器，支持单页应用（SPA）的开发和调试。

16.6ms 是怎么算出啦的 如果是 144hz 呢

1000/ 60hz = 16.6ms

如果是 144hz，那就是 1000/144 = 6.9ms

var then = Date.now();
var count = 0;

function nextFrame() {
  requestAnimationFrame(function () {
    count++;
    if (count % 20 === 0) {
      var time = (Date.now() - then) / count;
      var ms = Math.round(time * 1000) / 1000;
      var fps = Math.round(100000 / ms) / 100;
      console.log(`count: ${count}\t${ms}ms/frame\t${fps}fps`);
    }
    nextFrame();
  });
}
nextFrame();