useTransition Hook 。它允许开发者将一些非紧急的 UI 更新标记为 “过渡更新”，与紧急的用户交互（如输入框输入、按钮点击）区分开来，确保用户操作的即时响应，同时在空闲时......

点击上方亿元程序员+关注和★星标 引言 哈喽大家好，恢复更新之后，有一位读者跟我吐槽，面试某大厂游戏开发岗位，竟然被问到了A*寻路算法。 他哭笑不得：“都2025年了，引擎商店里什么寻路方案没有，还问

最近在使用 NestJs 和 NextJs 在做一个协同文档 DocFlow，如果感兴趣，欢迎 star，有任何疑问，欢迎加我微信进行咨询 yunmz777 Node.js 于 2025 年 10 月

你是不是曾经遇到过这样的情况？ 页面上的数据加载了半天就是出不来，控制台报了一堆看不懂的错误。代码写着写着就变成了“回调地狱”，一层套一层，自己都看不懂自己写了什么。 别担心，异步编程确实是很多前端开

📝 Markdown 查看器 - 现代化的文档预览工具

一个基于 React 19 + TypeScript 构建的现代化 Markdown 文档查看器，支持实时预览、语法高亮、数学公式渲染等功能。

在微信或浏览器上打开此编辑器，上传你的md文档可以上课偷偷看自己写的博客哈哈，这个是我解决微信这个没有md预览的痛点，自己用ai搞了一个小工具出来，效果还不错，还有图片可以借助图床工具：图床 - 简单、快速、免费的图床把自己图片上传到这里，就不会导致路径问题了。

项目概述

项目背景

在日常开发和写作中，我们经常需要预览 Markdown 文档的渲染效果。虽然市面上有很多 Markdown 编辑器，但大多数要么功能过于复杂，要么界面不够现代化。因此，我开发了这个轻量级、功能完整的 Markdown 查看器。

核心特性

• 现代化 UI 设计 - 基于 Tailwind CSS 的响应式设计
• 多主题支持 - 亮色/暗色/护眼模式，适应不同使用场景
• 完美适配移动端 - 响应式布局，手机平板都能完美使用
• 强大的 Markdown 渲染 - 支持 GFM、数学公式、代码高亮
• 智能本地存储 - 自动保存文档，刷新不丢失
• 极速加载体验 - 优化的构建配置，秒开应用

技术架构

前端技术栈

React 19.1.1          # 最新的 React 版本，性能更优
TypeScript 5.9.3      # 类型安全，开发体验更好
Vite (Rolldown)       # 下一代构建工具，构建速度极快
Tailwind CSS 3.4.10   # 原子化 CSS 框架

核心依赖

react-markdown 9.0.1   # Markdown 渲染引擎
highlight.js 11.9.0    # 代码语法高亮
katex 0.16.9          # 数学公式渲染
lucide-react 0.400.0  # 现代化图标库

项目结构

src/
├── components/        # 组件目录
│   ├── Header.tsx    # 顶部导航栏
│   ├── Sidebar.tsx   # 侧边栏文件管理
│   └── MainContent.tsx # 主内容区域
├── stores/           # 状态管理
│   └── useAppStore.ts # Zustand 全局状态
├── utils/            # 工具函数
│   ├── api.ts       # API 接口
│   ├── cache.ts     # 缓存管理
│   └── markdown.ts  # Markdown 处理
└── types/            # TypeScript 类型定义
    └── index.ts

项目地址: github.com/ac666666666…
在线预览: http://129.204.12.129:9080/

pc端：

移动端：

如果这个项目对你有帮助，欢迎 Star ⭐ 支持！

将 AI 智能写作能力无缝集成到富文本编辑器中，是提升内容生产效率的关键。本文聚焦于 Vue 3 + wangEditor 技术栈，为您提供一套架构清晰、代码可即用的实现方案。我们将重点展示如何通过分

今天碰到一个问题，创建一个下载模板按钮，平平无奇的功能代码如下 看日志也是事件和请求只执行了一次，好一顿找，最后发现是响应头有这个： Content-Disposition:attachment;fi

当前端项目从编写几个简单的HTML、CSS、JS文件，过渡到开发需要成千上百个模块、依赖各种第三方库、甚至需要处理less、TypeScript、图片等资源的项目时，随之而来的问题和麻烦接踵而至：如何组织文件、浏览器不识别的语法如何处理以及如何高效加载文件等等。

Webpack正是在这样的背景下诞生的。它不仅前端开发的基础工具，更是打通开发便捷性与生产性能的关键桥梁。无论你是前端的小白，还是想夯实工程化基础的进阶者，理解Webpack的工作逻辑和使用方法，都让你在项目少走弯路，更好的应对其复杂场景。

接下来，让我们从Webpack是什么开始，一步一步揭开其神秘面纱，从原理到基础实战，彻底搞懂这个前端工程化工具。

Webpack是什么

Webpack是一个静态模块打包工具。它视所有文件为模块(JS、sass/less、图片、字体、TS)，通过分析它们之间的依赖关系，最终打包成浏览器能直接识别的静态资源(JS或CSS等文件)。

可以将Webpack理解成为工厂：原料是项目中各种文件(js、css、less、ts等)，按照依赖关系和特定规则处理它们，最后生成浏览器可以识别的产品(bundle文件)。

Webpack底层原理

Webpack的核心工作简单地说：从入口文件，递归解析所有依赖，处理后打包成输出文件。一步一步了解它的构建过程。

1. 确定规则

Webpack运行构建时，会默认读取项目根目录下webpack.config.js文件或读取命令行--config后的参数的配置文件。有如下核心配置：

• 入口(entry)：定义从哪个文件开始解析依赖
• 出口(output)：确定打包后文件名称和放入位置
• 解释器(loader)：由于Webpack只能识别JS和JSON文件，webpack通过配置loader，将非JS文件转化为JS模块
• 插件(plugin)：在Webpack的构建的生命周期中额外处理。如自动生成HTML，压缩代码等等。

2， 编译阶段

这是Webpack最为核心的阶段。分为构建依赖图和模块转换

• 构建依赖图 Webpack会从webpack.config.js配置文件中的entry定义的入口文件地址开始，一层层地解析文件。
  • 先读取入口文件的内容，分析出依赖了哪些文件。
  • 递归解析被依赖的文件，直到所有关联的文件都被找到
  • 最后形成一张Graph，记录了所有文件的路径、内容以及它们之间的依赖关系

举个例子：如果 index.js 依赖 a.js，a.js 依赖 b.css 和 c.png，依赖图就会清晰记录这层关系。

// 构建类似如下伪代码
{
    "./src/index.js": () => {
     // 加载a.js    
    },
    "./src/a.js": () => {
     // 加载b.css和c.png   
    },
    "./src/b.css": () => { // 读取文件},
    "./src/c.png": () => { // 读取图片}
}

• 模块转换

Wepack本身只能识别JS和JSON文件，如遇到其他文件就需要Loader进行翻译。

• loader的作用是转换：将非JS文件转换为JS模块
• 处理顺序是从右到左或从下往上

{
    test: /.css$/,
    // 从右到左 依次执行
    use: ['style-loader', 'css-loader'],
    // use: [
    // 'style-loader',
    // 'css-loader'
    //]
},

• 插件介入

  在编译的各个环节，插件都可以介入进行处理。

• 插件是 “扩展器”：可以做 loader 做不到的事情，比如自动生成 HTML 文件（HtmlWebpackPlugin）、压缩代码（TerserPlugin）、清除旧文件（CleanWebpackPlugin）等。

• 插件基于 “事件钩子” 工作：Webpack 在打包过程中会触发很多事件（比如 beforeCompile、afterCompile），插件可以监听这些事件，在特定时机执行逻辑。

Webpack基础使用

在使用Webpack之前，确保项目安装Webpack

npm init -y // 初始化项目
npm i webpack webpack-cli -D // 开发依赖下安装webapck

指定入口

入口用于告诉Webpack从哪个文件开始解析依赖。

module.exports = {
  entry: "./src/index.js" // 单入口文件
  /* 适合多页面应用
  entry: {
    index: "./src/index.js",
    print: "./src/print.js"
  }
  */
}

指定出口

const path = require("path");
module.exports = {
 entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 多入口时: filename: '[name].bundle.js'
    path: path.resolve(__dirname, "dist"),
    clean: true, // 清理dist目录
  },
}

加载资源

Webpack处理非JS文件需要在module.rules配置，通过test匹配文件类型，用use指定对应的loader

1. 处理CSS文件

需要借助css-loader转换CSS文件变为JS模块；style-loader将CSS插入到页面的style标签

1. 安装loader

npm i css-loader style-loader -D # 开发依赖

2. 配置

module.exports = {
  module: {
   rules: [
     {
       test: /\.css$/,
       // loader 执行顺序：从右到左（先 css-loader 再 style-loader）
       use:["style-loader", 'css-loader']
     }
   ]
  }
}

如果使用sass还需要sass-loader和sass

npm i sass sass-loader -D

{
  test: "/\.scss$/",
  use: ["style-loader", "css-loader", "scss-loader"]
}

如果使用less还需要less-loader和less

npm i less less-loader -D

{
  test: "/\.less$/",
  use: ["style-loader", "css-loader", "less-loader"]
}

2. 处理图片/字体

Webpack5内置通过Rule.type处理字体和图片，无需额外配置loader。Rule.type的值如下：

• asset/resource 将资源作为单独文件输出，并返回URL
• asset/inline 将文件作为Data URL内联到bundle中
• asset/source 将文件作为原始源码导入
• asset 根据配置决定是inline还是resource

module.exports = {
  module: {
    rules: [
      test: /\.(png|jpg|gif|svg)$/,
      type: 'asset',
      parser: {
        dataUrlCondition: {
          maxSize: 8 * 1024 // 8kb
        }
      }
    ]
  }
}

开发模式

开发时需要方便调试和自动刷新，以便提高开发效率。

1. 基础开发配置

module.exports = {
  mode: 'development', // 定义为开发模式
  devtool: 'inline-source-map' // 生成source-map 方便调试
}

2. 开发服务器

webpack-dev-server提供热更新(修改代码后自动刷新页面)，无需手动重新打包：

npm i webpack-dev-server -D

配置

module.exports = {
  devServer: {
    static: './dist', // 服务器根目录
    port:  3000, // 服务器端口号
    open: true, // 启动服务后自动打开浏览器
    hot: true // 开启热模块替换 修改代码后自动刷新页面
  }
}

在package.json的scripts字段中配置运行指令

{
  "scripts": {
    "dev": "webpack serve" // 启动开发服务器
  }
}

🎯 本文小结

💡 核心要点回顾

Webpack 的本质：静态模块打包工具，将各种资源转化为浏览器可识别的静态文件

四大核心概念：

• 入口(Entry) ：构建起点
• 出口(Output) ：打包结果位置
• 加载器(Loader) ：非JS文件转换器
• 插件(Plugin) ：构建过程扩展器

构建两大阶段：

1. 依赖图构建：从入口开始，递归分析模块依赖关系
2. 模块转换：通过Loader将各类资源转为JS模块

开发效率提升：

• webpack-dev-server提供热更新
• mode: 'development'优化开发体验

真实场景：那些让人提心吊胆的函数调用 在最近开发的一个用户管理系统中，遇到了这样一个场景： javascript 这种错误在JavaScript中太常见了！更糟糕的是，它只有在特定条件下才会触发，可能

深入解析 async/await 本质，从执行机制、常见陷阱到并行优化、错误处理，带你真正理解其背后原理与最佳实践，告别“只会写不会懂”的尴尬，写出更健壮的异步代码。

我来为您详细介绍Flutter中Stream的各种使用场景和实现方式，并提供具体的代码实现。 Stream基础概念 Stream是Dart中处理异步数据流的强大工具，它代表一系列异步事件的序列。以下是

在日常的前端开发中，我们已经习惯了将一系列独立的工具拼凑在一起来构建项目：用 Webpack 或 Rollup 打包，用 Jest 测试，用 ESLint 检查代码，再用 Prettier 格式化。这

基于 SpreadJS 的百万级数据在线数据透视表解决方案：技术解析与实践 在企业数字化进程中，百万级数据的多维分析已成为业务决策的核心需求，而数据透视表作为高效的数据分析工具，其在线化应用常受限于性

一步步，用 Proxy + 发布订阅 模式，手写 vue3/core/reactivity 实现 ref

最近写h5页面，在浏览器顶部和底部的功能栏，会动态隐藏，导致页面高度和可视高度不匹配，导致部分元素被遮挡。 原因 浏览器顶部和底部的功能栏，是占用100vh的高度的。导致页面部分底部被遮挡。 所以常规

原文：voidzero.dev/posts/annou…

上周，在阿姆斯特丹举行的首届线下 ViteConf 大会上，我们正式发布了 Vite+ 。本文将为你详细介绍它是什么，以及我们为什么要做它。

---

什么是 Vite+？

Vite+ 是一个命令行开发工具，可以像 Vite 一样通过 npm 安装。它是 Vite 的即插即用升级版，新增了许多实用功能。除了常见的 vite dev 和 vite build，你现在还可以运行：

• vite new —— 用于快速创建新项目，尤其适合 monorepo 架构，提供对 Vite+ 最佳实践的推荐结构。它还支持代码生成，比如在 monorepo 中添加新包或调用自定义生成器。
• vite test —— 由 Vitest 驱动的单元测试命令，兼容 Jest API，与主应用无缝集成，并提供浏览器模式、任务分片、视觉回归测试等完整功能。
• vite lint —— 使用 Oxlint 进行代码检查，内置 600+ 与 ESLint 兼容的规则，速度最高可达 ESLint 的 100 倍。它还支持基于类型的检查，以及用 JavaScript 编写、兼容 ESLint API 的插件。
• vite fmt —— 使用即将发布的 Oxfmt 进行代码格式化，目标是实现 99% 以上的 Prettier 兼容性，并提供更多灵活控制，比如更细粒度的换行策略。
• vite lib —— 基于 tsdown 和 Rolldown 打包库文件，内置最佳实践。支持超快的 DTS 生成（通过 isolatedDeclarations 转换实现）。
• vite run —— 内置智能缓存的 monorepo 任务运行器。通过精细的任务输入推断，大多数任务都能无需显式配置就被缓存，甚至比手动设置更高效。可理解为 “无需配置的 Turborepo”。
• vite ui —— 图形化开发工具，提供模块解析 / 转换行为分析、打包体积与 Tree-Shaking 可视化、以及与框架专属 devtools 的集成。

这些命令开箱即用，彼此无缝协作，无需复杂配置或兼容调整。 Vite+ 继承了 Vite 繁荣的生态系统，兼容主流框架（如 React、Vue），以及全栈类框架（如 Tanstack Start、SvelteKit）。 并且，由于每个命令都基于或兼容广泛采用的工具构建，若你已在使用这些工具，无需大规模重构即可平滑迁移至 Vite+。

整套命令建立在统一的基础之上，保证一致性与连贯性。我们用 Rust 实现了完整的编译器工具链——从解析器到依赖解析、转换、压缩、打包器——在每一层都进行了极致的性能优化。 所有基础设施都是 开源 的，已被 Framer、Linear、Atlassian、Shopify 等公司采用。像 parse 和 transform 这样的工具函数也通过 API 形式由 Vite+ 暴露，方便用户自定义扩展。

你可以观看 Evan 在 ViteConf 上的演讲，抢先一睹 Vite+ 的实际效果。

---

Vite+ 想解决的问题

多年来，JavaScript 工具生态经历了严重的碎片化与频繁更替。 这门语言最初在短短 10 天内被创造出来，没人会想到我们今天竟用它来构建如此庞大、复杂的应用。 工具链的复杂度与性能瓶颈，已成为许多企业在面对大型 Web 项目时的主要痛点——尤其是内部工具资源有限的团队。

对于大型组织来说，问题更严重：不同团队各自使用不同的工具方案，依赖管理、安全审查都得分别处理；项目间的依赖版本逐渐漂移，最终难以统一。当团队或项目合并时，开发者往往需要花大量时间迁移工具，或陷入一个杂糅混乱的 Frankenstein 式工具堆栈。

Vite+ 的目标，就是为 JavaScript 工具链提供一体化的解决方案，让团队把精力放回“交付产品”，而不是反复评估、争论、配置和调试工具。

---

许可与可持续性

开源开发工具的可持续发展一直是个挑战。 我们希望通过 Vite+ 在大型组织中捕获部分价值，并将收益反哺给支撑 Vite+ 的开源项目。

为了让社区广泛受益：

• 个人、开源项目、小型企业 将永久免费使用；
• 初创公司 将提供固定年费许可；
• 大型企业 将提供定制化授权方案。

虽然 Vite+ 将采用商业授权模式，但仍会保持 源代码开放（source-available） 。具体分级与许可细节将在正式公开发布前公布。

我们理解在开源项目上进行商业化可能引发担忧。 在多年的开源实践中，我们深知这种平衡的微妙之处，也清楚它建立在信任之上。我们承诺将以同时服务好 开源用户与商业客户 的方式推进商业化。

需要强调的是，Vite+ 是在我们维护的开源项目之上构建的扩展层。 所有现有项目——Vite、Vitest、Rolldown、Oxc——都将永远以 MIT 协议开源。 而且，由于 Vite+ 依赖这些开源项目，改进 Vite+ 的同时也意味着改进它们。 我们欢迎你监督我们兑现这一承诺。

---

一起共建 Vite+！

Vite+ 仍在开发中，目标是在 2026 年初 推出公开预览版。我们正在寻找愿意在生产环境中率先试用的早期用户。

如果你感兴趣，欢迎访问 viteplus.dev 与我们联系！

前端开发中如何取消Promise操作 在 JavaScript 中，Promise 本身没有内置的取消机制，但我们可以通过一些模式来实现类似取消的功能。以下是几种常见的实现方式 #

🧩 Flutter / Dart 多包管理工具 —— Melos 使用指南 一、🧠 什么是 Melos Melos 是 Dart / Flutter 官方推荐的 多 package(monorepo)

做React开发的同学，八成刚开始都踩过 “直接改state没反应” 的坑，明明数据改了，页面就是不更新，调试半天发现是没遵守“不可变性”规矩。