记一次 iOS 环境 H5 页面突然白屏
在新版本 iOS 系统中，某页面出现白屏，原因是 Safari 浏览器新增的全局变量 browser 与旧项目中的同名变量冲突。通过临时修复和代码重构解决了此问题，并加强代码审查和监控机制，以防止类似情况再次发生。
分类： JavaScript
Node.js 项目通过 .npmrc 文件指定依赖安装源
背景
npm 命令运行时，往往通过命令行指定相关配置，最常用的便是使用 --registry 来指定依赖的安装源。
npm install --registry=https://registry.npmmirror.com同样的效果也可以使用 .npmrc 来实现：
registry=https://registry.npmmirror.com"Node.js 项目通过 .npmrc 文件指定依赖安装源"继续阅读
npm / cnpm 设置镜像地址
使用 npm 和 cnpm 查看及修改镜像源。npm 的默认镜像源为 https://registry.npmjs.org/，可通过 npm config set registry 命令进行修改。安装 cnpm 后，查看和修改镜像源的命令与 npm 类似。确保转载时包含版权声明，并附上作者和原始地址的超链接。
npm 直接安装 GitHub / GitLab 仓库代码及 npm link 本地调试
介绍了使用 npm 安装 GitHub/GitLab 仓库代码的方法，提供了 npm link 本地调试的步骤，以及如何使用 npm unlink 解除链接。示例展示了如何通过 SSH 和 HTTPS 安装仓库代码，并使用 npm link 在本地项目中进行调试。
前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）
探讨了页面加载卡顿的原因并提出了多种优化方法。主要原因包括项目包或第三方脚本过大、JavaScript 执行阻塞页面加载、图片体积大且多等。优化策略包括构建缩包按需加载、减少图片体积等。文章还详细介绍了如何通过 Webpack 插件分析项目中用到的 npm 包及大小，以及如何通过调整图片尺寸、格式转换、压缩等方式减小图片体积。
Promise + Async&Await + Array.reduce + 函数递归 解决网络/接口请求的依次/排队不间断间隔访问
在频繁更新数据场景中，传统 `setInterval` 可能因请求时间过长导致数据覆盖问题。通过 `Array.reduce` 和异步函数，将每个网络请求封装为 Promise，确保前一请求完成后再发起下一请求。完成一轮后递归调用自身，实现连续顺序请求循环，保证数据更新的准确性和稳定性。
解决 npm 安装 node-sass 因为网络问题超时失败的问题
在项目根目录创建 `.npmrc` 文件，并添加配置代码，将 `sass_binary_site` 设置为 `https://registry.npmmirror.com/-/binary/node-sass`，以优化 node-sass 的下载源，提升依赖安装的速度和稳定性。
Webpack 只打包 CSS
介绍了如何使用 Webpack 单独打包 CSS 文件，通过设置“傀儡”入口文件 (style.js 和 index.style.html)，结合 MiniCssExtractPlugin 和 HtmlWebpackPlugin 插件实现 CSS 文件的独立构建。提供了详细的配置示例，适用于处理零散项目的模块化打包需求。
上传图片之前修改图片名称的必要性
介绍了 IOS 系统拍摄上传图片时文件名重复导致覆盖的问题，并提出解决方案：在上传前通过项目标识、时间戳、随机字符串和原图片名称生成唯一文件名，有效避免文件冲突，确保图片在同一目录下安全存储。
上传图片之前压缩图片
提出图片上传时因体积过大导致超时的问题，解决方案是在上传前使用 ImgZip 压缩图片。结合 React 和 Ant Design (Antd) 实现图片压缩与上传功能，通过设置压缩质量和宽度优化图片体积，确保上传过程顺畅。提供代码示例展示具体实现。