如何知道 window 的 load 事件已经触发
介绍了通过 document.readyState 属性判断页面加载状态，解决懒加载脚本嵌套导致的问题。提供了基于 Promise 的 windowLoaded 方法，在页面加载完成或超时后返回状态。方法适用于优化页面性能及脚本加载逻辑。附参考链接便于深入了解相关 API 和实现细节。
分类： JavaScript
PWA 实践/应用（Google Workbox）
桌面端 PWA 应用：
"PWA 实践/应用（Google Workbox）"继续阅读
npm i 和 npm ci 区别
对比了 npm i 和 npm ci 的差异。npm i 安装或更新依赖，适用于开发环境；npm ci 删除 node_modules 后按 package-lock.json 精准安装，适合 CI/CD 场景。npm ci 确保版本一致，安装速度更快，但强依赖 package-lock.json 文件。
短链接生成原理
介绍了短链接的生成与访问流程。通过将长链接转换为 MD5 HASH 值，检查数据库是否存在对应记录，若无则存入数据库并返回自增 ID。ID 转换为 26 进制字符串作为短链接的 Key。访问短链接时，服务器解析 Key，重定向至长链接。提供了 Node.js 代码示例，展示了 SQL 结构及 10 进制到 26 进制的转换方法。
使用 Webpack 插件 webpack-bundle-analyzer 优化代码体积
介绍了如何安装、配置和启动 Webpack Bundle Analyzer，用于分析 Webpack 打包后的文件结构。通过安装插件 (webpack-bundle-analyzer)，在 Webpack 配置中添加 BundleAnalyzerPlugin，并使用命令行启动分析工具。该工具可视化展示打包结果，帮助优化资源分配和减小文件体积。
The "new Function" syntax[转]
介绍了通过 `new Function` 创建函数的语法与特点，其允许动态生成函数代码，但其 `[[Environment]]` 引用的是全局作用域，无法访问外部变量。这种方法适用于从服务器获取代码或动态编译函数的场景，避免了与 minifier 冲突的问题，并建议通过参数显式传递变量以提高代码的安全性和可维护性。
使用 webpack-merge 合并 Webpack 配置
介绍了使用 webpack-merge 工具优化 Webpack 配置管理，通过合并开发、测试、预发布和生产环境中重复的配置（如入口和加载器），提高了配置的复用性和维护性。示例展示了基础配置和生产环境配置的合并方式，简化了复杂环境下的配置管理流程。
使用 Babel 编译 TypeScript
介绍了如何使用 Babel 替代 ts-loader 来编译 TypeScript，以解决构建打包时的多种问题。通过安装相关 Babel 依赖并配置 .babelrc 和 tsconfig.json 文件，优化了 TypeScript 的编译流程。修改 Webpack 配置以使用 babel-loader，并添加 check-type 脚本命令以检查类型。
Webpack 多页面 & GitLab 增量构建部署模板
介绍了一个基于 Webpack 的多页面模板，支持 GitLab 增量构建和部署。每个页面需在 pages 目录下包含 index.html 和 index.js，构建后生成独立的页面结构。通过 GitLab CI/CD 检测修改的页面，利用阿里云 OSS CLI 自动上传到云端，实现高效的增量部署。
使用 GitLab CI/CD 和阿里云 CLI 自动部署前端项目
介绍了 CI/CD 的概念及其在 GitLab 中的实现，通过 .gitlab-ci.yml 配置文件定义镜像、阶段和执行条件，实现自动化构建、打包和部署。详细说明了 CLI 的用途及 aliyunoss-cli 的使用方法，包括配置阿里云 OSS 参数和执行发布命令，支持多环境发布并与 CI/CD 流程集成，提升开发和部署效率。