#优质博文 #前端 #工程化 #性能优化 #JavaScript #BundleSize #TreeShaking #course
相当实用的好文，教你怎么减小打包体积（PS：初学者友好）
Bundle Size Investigation: A Step-by-Step Guide to Shrinking Your JavaScript

AI 摘要：本文提供了一份详细的逐步指南，旨在帮助开发者调查并缩减 JavaScript 打包文件的大小，以提高网页性能。作者通过一个实际项目案例，展示了如何使用打包分析器来识别大型或冗余的代码块。文章深入探讨了摇树优化（tree-shaking）的工作原理和局限性，特别是针对 CommonJS 模块和 * 导入模式。此外，还介绍了如何通过识别和移除重复库、以及处理由第三方依赖引入的传递依赖（transitive dependencies）来进一步优化代码体积，最终将示例项目的 bundle size 从 5MB 显著减少到 600KB 左右。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 初始项目设置 (Initial Project Setup)
• 作者创建了一个故意膨胀的示例项目（其 JavaScript 包大小为 5MB），作为演示如何调查和缩小打包体积的起点。
• 提供项目 GitHub 仓库链接，鼓励读者通过实际操作来验证文章内容。
2. 分析打包大小 (Analyzing Bundle Size)
• 介绍了打包分析器（bundle analyzer）工具的使用，例如 Vite 项目中的 Rollup Plugin Visualizer。
• 解释如何解读打包分析图（treemap），识别出项目中最大的代码块，尤其是供应商（vendor）代码和应用程序自身代码。
• 指出可以通过配置更改可视化模板（template），如使用火焰图（flamegraph），以获得不同视角的分析。
3. 调查流程 (Investigation Process)
• 确定要移除的包 (Step 1: Identify a Package to Eliminate)：通过打包分析图识别出体积巨大且可能存在问题的包，如 @mui 相关的包。
• 理解包 (Step 2: Understand the Package)：快速研究包的功能和用途，以理解其在项目中的角色。
• 理解包的使用方式 (Step 3: Understand the Usage of the Package)：通过代码搜索确定包在项目中的导入和使用模式，特别是是否存在 * 导入所有内容的模式。
• 确认问题 (Step 4: Confirm That This is the Problem)：通过临时注释掉问题包的导入代码并重建项目，验证其对打包大小的实际影响。
4. 摇树优化和死代码消除 (Tree Shaking and Dead Code Elimination)
• 解释摇树优化（tree-shaking）的原理：现代打包工具如何识别并移除未使用的代码（dead code）。
• 通过示例代码展示了 tree-shaking 在原生 ESM 模块中的有效性。
• 揭示了 * 导入模式（ import * as Something from 'library'）会阻止 tree-shaking 对外部库生效，导致整个库被打包。
• 提出解决方案：避免使用 * 导入，改为精确导入所需模块，以确保 tree-shaking 正常工作。
5. ES 模块和非摇树优化库 (ES Modules and Non-tree-shakable Libraries)
• 解释 JavaScript 模块格式（如 ESM, CommonJS）对 tree-shaking 能力的影响。
• 强调 ESM 格式易于 tree-shaking ，而 CommonJS 等旧格式则难以优化。
• 介绍 is-esm 工具，用于检查一个 npm 包是否为 ESM 格式。
• 以 lodash 库为例，展示了非 ESM 格式导致 tree-shaking 失败的问题，即使是精确导入特定函数也无济于事。
• 提供解决方案：使用库提供的精确子路径导入（import trim from 'lodash/trim'）来只引入所需部分，或在功能允许的情况下替换为原生 JavaScript 函数。
6. 常识和重复库 (Common Sense and Repeating Libraries)
• 指出在大型项目中，多个库可能实现相同功能，导致代码冗余。
• 以日期处理库 date-fns、moment 和 luxon 为例，展示了如何识别并移除这些重复的库。
• 强调选择替换库时需考虑 tree-shaking 能力、API 易用性、维护状态以及对打包大小的影响。
• 通过将 moment 和 luxon 的使用重构为 date-fns，显著减少了打包体积。
7. 传递依赖 (Transitive Dependencies)
• 解释传递依赖：当项目直接依赖的库又依赖了其他库时，这些间接依赖也会被打包。
• 介绍 npm-why 工具，用于追溯一个包的所有依赖路径，从而识别其作为传递依赖的来源。
• 以 @emotion 库为例，即使从项目中移除了直接使用，它仍可能通过 @mui 等库作为传递依赖存在。
• 说明移除传递依赖可能需要移除其上游所有依赖，这是一项需要权衡成本和收益的复杂任务。
• 通过将 @mui 组件替换为 Radix UI 组件并替换图标，成功移除了 @mui 及其传递依赖 @emotion。
8. 结果 (The Result)
• 总结了整个优化过程的成果：示例项目的 JavaScript 包大小从 5MB 显著减少到 600.98 KB。
• 指出尽管取得了巨大进步，但仍有进一步的优化空间，例如通过懒加载（lazy loading）处理 tiptap 和 prosemirror 等大型库。

author Nadia Makarevich

Developerway

Bundle Size Investigation: A Step-by-Step Guide to Shrinking Your JavaScript

A practical guide to analyzing and reducing JavaScript bundle size. Learn bundle analysis, fix tree-shaking issues, remove duplicate libraries, and otherwise optimize your React app's JavaScript size.

#优质博文 #前端 #R3F #WebGL #性能优化 #course
Infinite Canvas: Building a Seamless, Pan-Anywhere Image Space | Codrops

AI 摘要：本教程深入探讨了如何利用 React Three Fiber 构建一个无缝、可无限平移的 3D 图像画布。文章核心在于通过“区块” (chunk) 分块渲染、确定性 (deterministic) 内容生成、基于距离的剔除 (culling) 与渐隐，以及惯性 (inertia) 驱动的相机控制器等技术，创造出无限探索的视觉错觉，同时确保在高性能设备上达到 120 帧的流畅体验。它还详细介绍了包括延迟加载、像素密度限制、禁用抗锯齿等多种性能优化策略，为开发者提供了构建响应式、沉浸式 3D 体验的实用指南和未来扩展方向。

author Edoardo Lunardi

#tools #AI #代码搜索
React Scan 作者发布了新作品 Repogrep，一个由 AI 驱动的超快速代码库搜索工具，能够帮助开发者在公共 GitHub 仓库中查找代码，比较类似 DeepWiki，但是快，超级快。

Aiden Bai(aidenybai): 介绍 repogrep.com 对任何公共 GitHub 仓库进行超快速代码库搜索
我在不到 10 秒内找到了 React Hooks 的源代码。
https://x.com/aidenybai/status/2008222085240549530

AI 摘要：Repogrep 是一款创新的 AI 编码代理，专为解决在海量代码库中快速搜索的痛点而设计。它能够搜索任何公共 GitHub 仓库，用户只需粘贴 GitHub 仓库 URL 或输入关键词，即可实现超快的代码查找。

Repogrep

ultra fast codebase search

Tailwind創始人Adam Wathan關閉了一個為Tailwind CSS網站添加llms.txt的PR。
Adam在PR comment中稱使LLM更容易閱讀文件意味著人們更不容易接觸到Tailwind的付費解決方案，因此沒有時間處理這一類PR。Adam稍後補充團隊最近裁員75%，他認為正是AI對其商業模式殘酷的衝擊所致，更列出數字指自2023年初Tailwind CSS Docs訪問量降低了40%、營收縮減了近80%。
PR作者Evan Jacobs對此大感失望，認為這是對文件的補充而非一種替代，並連發兩則TikTok影片批評Adam的行為。

https://github.com/tailwindlabs/tailwindcss.com/pull/2388

#demo #codepen #前端 #CSS #SVG
文本框边框动画旋转 [CSS & SVG] V2

在 Fernando Cohen 制作的这个流畅的 CSS 和 SVG 动画中，文字栅栏围绕着一张照片的边缘。看看悬停照片时会发生什么

看了一下原理，这是一个使用 SVG 和 CSS 创建的文字沿着有机形状边框旋转动画效果。
首先使用 SVG Blob 形状生成，创造有机的 blob 形状

<path d="M43.1,-68.5C56.2,-58.6,67.5,-47.3..." />

这个路径数据可能来自 Blob Generator 等工具

然后是使用 clip-path 进行图片裁剪，将矩形图片裁剪成 blob 形状，同时通过 preserveAspectRatio="xMidYMid slice" 确保图片填充满整个区域。

<clipPath id="blobClip">
  <path d="..." transform="translate(100 100)"/>
</clipPath>
<image clip-path="url(#blobClip)" />

然后使用 pathLength 进行文字路径动画，定义文字路径

<path id="text" d="..." fill="none" stroke="none" pathLength="100" />

• pathLength="100" 标准化路径长度，便于动画计算
• fill="none" stroke="none" 路径本身不可见，仅作为文字轨迹

将文字沿路径排列：

<text class="text-content">
  <textPath href="#text" startOffset="0%">
    ❤️ MADE WITH LOVE ❤️ MADE WITH LOVE...
    <animate attributeName="startOffset" 
             from="0%" to="100%" 
             dur="15s" 
             repeatCount="indefinite" />
  </textPath>
</text>

• <textPath> 让文字沿着指定路径排列
• startOffset 控制文字在路径上的起始位置
• <animate> 元素实现 SMIL 动画（SVG 原生动画）

那无缝循环是怎么做的呢？他用了两段文字，当第一段文字从 0% 移动到 100% 时，尾部会消失，第二段文字从 -100% 移动到 0%，正好填补空白。两段文字首尾相连，形成无缝循环。

<textPath href="#text" startOffset="0%">
  <animate from="0%" to="100%" />
</textPath>

<textPath href="#text" startOffset="100%">
  <animate from="-100%" to="0%" />
</textPath>

最后是这个交互式缩放效果，是通过悬停时放大裁剪区域（而非整个 SVG）来做的。

#优质博文 #CSS #前端 #新特性
@scope 已获得所有主流浏览器支持，定义了新的 CSS 作用域上下文。
MDN：@scope - CSS | MDN
文章：How to @scope CSS Now That It’s Baseline

AI 摘要：@scope CSS 规则是现代前端开发中一项重要的新特性，它允许开发者在 CSS 中定义明确的作用域，从而解决了传统 CSS 全局作用域导致的样式冲突和管理难题。文章详细阐述了 @scope 在 <style> 块和外部 CSS 文件中的不同使用方式，包括如何利用 :scope 伪类指定作用域根，以及通过 to 关键字创建“甜甜圈作用域 (Donut Scope)”来限制样式生效范围。同时，作者还探讨了 :scope 在 JavaScript DOM API 中的应用，并提出了一种平衡代码组织与性能优化的综合实践策略，旨在帮助开发者更灵活、高效地管理和应用 CSS 样式。

author Daniel Schwarz

MDN Web Docs

@scope - CSS | MDN

The @scope CSS at-rule enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.

#博客更新 #图片优化 #Shell

最近需要处理别人的服务器上大量历史图片的压缩问题。因为历史遗留原因（别问，问就不是我的锅） 累积了不少高分辨率的全景图和常规照片，占用存储空间越来越大。

虽然之前在前端生产环境中一直使用 sharp-cli 和 @napi-rs/image 等进行图片处理，但这次面对的是已存储的历史图片批量压缩场景，并且这次提供的环境是堡垒机，只能通过网页终端进行操作，没有 GUI，需要更灵活的命令行工具。

这篇文章记录了完整过程，希望对有类似需求的朋友有所帮助。

欢迎勘误拷打我知道肯定有更好的方法但是反正都压缩完了。

使用 ImageMagick 和 libvips 进行服务器端批量图片压缩

cos

使用 ImageMagick 和 libvips 进行服务器端批量图片压缩 | 工具 | 余弦の博客

最近需要处理别人的服务器上大量历史图片的压缩问题。因为历史遗留原因， 下累积了不少高分辨率的全景图和常规照片，占用存储空间越来越大。虽然之前在前端生产环境中一直使用 sharp-cli、@napi-rs/image 等进行图片处理，但这次面...

#优质博文 #前端 #CSS #渐进增强 #新特性 #course
一篇关于 scroll-state(scrolled) 很详细的介绍，该查询允许开发者根据用户最新的滚动方向来应用样式，从而实现响应式用户界面。
Directional CSS with scroll-state(scrolled)

AI 摘要：本文详细介绍了 Chrome 144 中新增的 scroll-state(scrolled) CSS 查询。作为 scroll-state() 容器查询 (container queries) 家族的一部分，它使开发者能够根据用户最近的滚动方向动态调整页面元素的样式。文章首先解释了其工作原理，包括如何设置 container-type: scroll-state 以及 scrolled 查询接受的不同方向值。随后，通过几个实用的案例演示了其应用，包括在用户向下滚动时隐藏顶部导航栏并在向上滚动时重新显示（使用 fixed 或 sticky 定位），以及结合滚动触发动画 (scroll-triggered animations) 实现方向性的元素进入效果。文章强调了这种新特性在渐进增强 (Progressive Enhancement) 方面的优势，展示了无需 JavaScript 即可实现复杂交互的可能性。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. scroll-state(scrolled) 查询介绍
• 新特性：Chrome 144 中引入的 CSS 新查询，用于根据用户滚动方向应用样式。
• 核心功能：允许开发者基于用户最新的滚动方向来动态修改元素的样式。
2. 工作原理
• scroll-state() 查询家族：scrolled 是 scroll-state() 容器查询 (container queries) 的一个新成员，同系列还包括 stuck、snapped 和 scrollable。
• 启用方式：需在父元素上设置 container-type: scroll-state。
• 查询语法：通过 @container scroll-state(<type>: <value>) 规则块来应用基于滚动状态的样式。
3. scrolled 查询的详细说明
• 检测目标：检测最近期的相对滚动方向。
• 支持值：
• 方向性值：top、right、bottom、left。
• 逻辑方向值：block-start、inline-start、block-end、inline-end。
• 轴向速记：x、y、block、inline。
• 初始状态：none，表示容器尚未发生相对滚动。
• 动态性：浏览器会实时更新此状态，允许根据用户滚动方向（向上、向下、向左、向右）来为子元素设置样式。
4. 实际应用案例
• 案例一：使用固定定位 (fixed positioning) 实现的隐藏导航栏 (Hidey-bar)
• 功能描述：当用户向下滚动时隐藏顶部导航栏，向上滚动时重新显示。
• 优势：增加屏幕可视空间，且无需完全滚动回顶部即可访问导航。
• 渐进增强 (Progressive Enhancement)：不支持此特性的浏览器将始终显示导航栏，不影响基本功能。
• 案例二：使用粘性定位 (sticky positioning) 实现的隐藏导航栏 (Hidey-bar)
• 作者偏好方案：采用 position: sticky 实现类似的导航栏隐藏/显示功能。
• 渐进增强优势：对于不支持的浏览器，导航栏保持原有的粘性定位行为，不破坏现有用户体验。
• 用户体验：导航栏在开始滚动时动画隐藏，向上滚动时动画出现。
• 案例三：方向性滚动进入动画 (Directional scroll entry animation)
• 实现原理：结合 scroll-state(scrolled) 和实验性的滚动触发动画 (scroll-triggered animations) API，根据滚动方向改变元素的进入动画效果。
• 示例：根据是向上滚动还是向下滚动，使卡片从不同的方向（例如，从底部或从顶部）滑入视图。
• 发展前景：尽管当前的滚动触发动画 API 仍处于早期阶段并存在一些限制（如动画重播问题），但其潜力巨大，有望实现更自然的用户界面动效。

author Una

Una.im

Directional CSS with scroll-state(scrolled)

Style based on scroll direction with this new scroll-state query feature.

#codepen #demo #前端 #canvas
果冻压扁按钮

好可爱的按钮！看了一下原理。

这不是真正的 3D 果冻，而是通过快速切换预渲染的图片序列来模拟果冻挤压效果，类似电影胶片的原理。预加载了 215 张连续的果冻形变图片，这些图片记录了果冻从静止到被挤压到回弹的完整动画过程，通过切换不同帧号的图片来做的。

你需要预留一点时间来压扁这个东西。无论是垂直拖动光标，还是单击 "跟随鼠标 "复选框，都可以将这个由 Voicu Apostol 制作的内含果冻的按钮的压扁效果与鼠标移动联系起来。

#优质博文 #前端 #WebGL #demo #course
Demo 这个也很酷。
How to Create a Pixel-to-Voxel Video Drop Effect with Three.js and Rapier

AI 摘要：本教程详细介绍了如何利用 Three.js、着色器 (shaders) 和 Rapier 物理引擎，将 2D 视频流转化为动态的 3D 体素 (voxel) 下落效果。文章从核心概念——像素和重力——出发，逐步讲解了如何构建一个由 InstancedMesh 和刚体 (rigid bodies) 组成的平面，通过着色器实现平铺像素到 3D 体素的涟漪 (ripple) 变形效果，并最终通过 JavaScript 模拟涟漪进程来激活物理引擎，使体素在逼真的物理作用下散射和恢复。作者还分享了实现过程中的技术细节、优化考量以及未来扩展的可能性。

author Junichi Kasahara

#优质博文 #前端 #趣站 #demo #WebGL
很有创意的一个滚动驱动的 portfolio 页面：Mr. Panda's Psychologically Safe Portfolio

• 开源在：GitHub - andrewwoan/mr-pandas-psychologically-safe-portfolio
• 技术解析视频：How I created a Hand-drawn Papercraft Portfolio with Three.js, Blender, React, and Krita

author Andrew Woan

#优质博文 #前端 #WebGL #Shaders #demo
很 NB 的 ASCII 艺术生成网站 https://efecto.app/ 之前发过，这篇是作者的详细技术解析。
Efecto: Building Real-Time ASCII and Dithering Effects with WebGL Shaders | Codrops

AI 摘要：本文作者 Pablo Stanley 分享了他如何开发 Efecto 应用，在网络上实时实现图像抖动（dithering）和 ASCII 艺术效果，并结合 WebGL 着色器（shaders）模拟 CRT 显示器视觉效果的经验。文章详细介绍了抖动算法（如 Floyd-Steinberg、Atkinson 等）的原理与代码实现，多色调色板的应用，以及如何通过数学函数在着色器中绘制 ASCII 字符。此外，还探讨了扫描线（scanlines）、屏幕曲率（screen curvature）、色差（chromatic aberration）等 CRT 特效的实现，并讨论了 CPU 和 GPU 在这些效果实现中的分工，最后总结了从历史算法到现代 Web 开发的宝贵经验。

author Pablo Stanley

Efecto

Efecto - Free ASCII Art & Dithering Effects Tool

Transform 3D models, videos, and images with ASCII art, dithering, and halftone effects in real-time.

#security CVE-2025-68926
一个 CVSS 9.8 的洞是因为什么呢？一个库硬编码了默认验证令牌。
https://github.com/rustfs/rustfs/security/advisories/GHSA-h956-rh7x-ppgj

#碎碎念
建了个 discord 群虽然不怎么上 discord（）
因为后知后觉的意识到虽然我用 tg 聊天比较多，但是 discord 群作为公开群好像比较合适比较方便（嗯？）
总之想找我聊天的可以加 后续应该会作为各种项目里边 link 的公开群
https://discord.gg/XzvrvNMcSe

Discord

Join the Cos 的 Discord 小窝 Discord Server!

不知道做什么的服务器。比较随便。 | 1 members

#优质博文 #前端 #新动态 #PWA #浏览器
A first look at the Web Install API
ref: The Web Install API is ready for testing

AI 摘要：文章探讨了新兴的 Web Install API，该 API 已在 Chromium 浏览器中进入原生试用 (Origin Trial) 阶段，并在 Microsoft Edge beta 版中展现出最完整的功能。此 API 的核心目标是民主化和去中心化网络应用的获取方式，允许网站通过简单的按钮点击直接安装 PWA (Progressive Web Apps)。虽然该 API 有望获得跨浏览器兴趣，但 Safari 可能由于其已有的“添加到 Dock (Add to Dock)”功能而成为推广的挑战。文章还简要提及了 Service Worker 技术的重要性，强调其在实现离线功能和缓存控制方面的强大作用。

author Chris Coyier

Frontend Masters

A first look at the Web Install API

Bruce Lawson: