xiangzhihong8的专栏

前端没有消亡，而是在被重新定义。AI 改变了写代码的方式，RSC 和元框架改变了应用的架构方式，Rust 构建工具改变了工程效率，TypeScript 和 shadcn/ui 改变了开发规范，INP 和 EAA 改变了质量底线，Wasm 和边缘计算改变了前端的边界。2026 年最值得投资的能力，不是某一门具体框架，而是：用 AI 放大效率，而不是被 AI 替代理解架构取舍，而不只是堆砌组件守住性能与可访问性底线保持学习新工具的速度前端从未如此热闹，也从未如此有挑战。

更糟的是，入侵并非 SSH 暴力破解，而是发生在 Next.js 容器内部：攻击者利用漏洞进入后，可以在服务器上执行他们想执行的任何代码，随后投放更“职业化”的恶意程序，甚至把进程伪装成 nginxs、apaches 之类的 Web 服务以降低暴露风险。这档播客中提到，事件曝光后，Vercel 迅速启动应急流程，与 React 团队、HackerOne 社区及安全研究人员协作，在短短一个周末内完成排查与修复，并支付了总计 75 万美元的漏洞赏金。这样，界面可以先渲染能渲染的部分，剩下的慢慢补齐。

Netlify是一个现代化的一站式静态网站托管与CI/CD平，主要功能是托管静态网站，并提供集成的持续部署、自动化构建、全球分发网络和无服务器函数等服务，让开发者可以更轻松、高效地构建、部署和管理Web应用，特别适合个人项目、开源项目和中小型商业网站。Netlify提供简洁的部署流程和丰富功能，如自定义域名、自动构建和服务器端功能。通过连接到 Git 仓库实现持续部署，每次推送代码都会自动构建和发布，支持无服务器函数，允许在前端项目中实现后端逻辑，提供直观的用户界面来管理和配置项目。

Core 与 Render 层之间的通信，规避了 KMP 的 actual/expect 直接依赖调用方式，采用callKotlin/callNative 的指令通信方案，实现了 Kotlin 跨端层与 Native 渲染层之间的编译隔离，从而支持跨平台层（Core与业务代码）动态化更新能力。Kuikly 在设计之初，就考虑了这个问题，通过轻原生层的设计，原生 UI 仅提供最少量的原子组件，大量高阶组件则通过拼积木的方式，在 Kotlin 跨平台层实现，从而实现组件逻辑的高一致性。

在 CSS Modules 或作用域样式顶部添加即可。旧版本：使用全局样式块，或用:global()包裹 Tailwind 工具类。

Swagger（现更名为OpenAPI）是一个规范和完整的框架，用于生成、描述、调用和可视化RESTful风格的Web服务。它具有以下优势：自动生成：从代码注释自动生成API文档，减少手动编写工作量实时同步：文档与代码保持同步，避免接口变更导致文档过时交互式文档：提供可视化界面，支持在线测试API标准化：遵循OpenAPI规范，确保API文档的一致性和可读性为了使API文档更加清晰，可以定义请求和响应的数据模型。在app/model目录下创建模型定义文件。/**

虽然前端人员可能不经常直接操作 Nginx，但了解其基本概念和简单的配置操作是必要的。这样，在需要自行配置 Nginx 的情况下，前端人员能够知晓如何进行基本的设置和调整。

es-toolkit 是一款先进的高性能 JavaScript 实用程序库，体积小巧，并支持强类型注释，典型特征包括：提供各种日常实用函数并采用现代实现，例如： debounce、delay、chunk、sum 和 pick 等设计充分考虑了性能，在现代 JavaScript 环境中实现了 2-3 倍的性能提升等开箱即用地支持摇树优化 (tree shaking)，与其他库相比，JavaScript 代码量减少了高达 97%

【代码】Vite集成Immer报does not provide an export named ‘default‘错误的解决方案。

一句话总结：Vapor Mode 是 Vue 官方推出的编译期 DOM 优化模式，彻底跳过运行时虚拟 DOM，直接让模板编译成原生 DOM 操作代码。它不是社区试验品，而是Vue 团队亲自打造的“未来模式”：用法仍是熟悉的-- 开启 Vapor 模式的组件 -->// 一行切换，无需修改逻辑</script>“把复杂留给自己，把简单留给开发者”。这一次，尤大不仅“干掉了虚拟 DOM”，也一并解决了性能焦虑。Vue 3.6 正式版预计将在 Q3 发布，现在就试试 alpha，刚刚好。

Sequelize 是一个基于 Node.js 的跨数据库 ORM 框架，支持 MySQL 、 PostgreSQL 、 SQLite 、 Microsoft SQL Server 等主流数据库系统。它通过 JavaScript/TypeScript 对象操作实现数据库管理，无需直接编写 SQL 语句。具有以下特性：‌跨数据库支持‌：通过配置不同的 dialect（如 'mysql'、'postgres' 等）即可切换数据库类型。‌‌事务管理‌：提供事务操作支持，确保数据一致性。‌。

过去几年对 Angular 来说很具变革性，我们推出了像 Signals 这样的反应性功能和 Zoneless 应用的强大能力。我们希望这些功能可以帮助 Angular 社区构建下一代的 Web 应用，实现快速上市和强大的性能。我们的旅程才刚刚开始！Angular v20 是最新的发布版本，我们花费了无数个小时打磨一些正在进行中的功能，以便于为你提供健壮的开发体验。

在移动应用开发中，轮播是一种很常见的效果，我们项目采用的是RN跨平台技术，RN的轮播我们直接使用的是第三方插件：react-native-snap-carousel。--case-sensitive-path-filtering：使 --include 或 --exclude 中使用的正则表达式区分大小写。--exclude ：创建补丁文件时，忽略与正则表达式匹配的路径，路径相对于要修改的依赖包的根目录，默认: package\.json$。--patch-dir：指定放置补丁文件的目录。

过去十年，Axios 凭借其简洁的API设计和浏览器/Node.js双环境支持，成为前端开发者的首选请求库。但随着现代前端框架的演进和工程化需求的升级，Alova.js 以更轻量、更智能、更符合现代开发范式的姿态登场。

llms.txt是一种新的网站标准，建议在网站根目录放置一个名为llms.txt的 Markdown 文件。它就像给 AI 准备的一份网站“简介”，让 AI 能快速抓住网站重点。这个文件只保留网站最核心的内容，去掉了广告、复杂脚本等干扰项，使 AI 能更高效地理解和处理网站信息。。尤雨溪推荐的vitepress-plugin-llms插件，为 Vue 框架的文档生成提供了极大的便利。开发者只需简单的安装和配置，即可自动生成llms.txt和llms-full.txt文件。

打包构建中的代码拆分（Code Splitting）是一种优化技术，它将应用程序的代码拆分成多个小块（chunks），并在需要时按需加载这些代码块。当应用程序的代码被打包成一个单独的文件时，用户在访问应用程序时需要下载整个文件，这可能导致长时间的加载延迟。通过代码拆分，可以将应用程序的关键代码和初始加载所需的最小功能模块放在主文件中，而将其他代码块延迟加载。这样可以减少初始加载时间，使用户更快地看到应用程序的内容。应用程序通常具有多个页面或功能模块，用户在访问应用程序时并不总是需要加载所有的代码。

作为官方推荐的路由解决方案，React Router提供了丰富的功能集，包括基本的路由导航、嵌套路由、动态路由、路由懒加载、路由鉴权以及基于组件的路由配置、路由参数、通配符等。React Router是React生态系统中最流行的路由解决方案，它允许开发者在单页应用的不同页面之间进行切换，而不需要重新加载整个页面，React Router与React框架深度集成，使得开发者在单页面应用中进行页面切换时变得轻而易举。如果一个路由模式以 /* 结尾，后面的任意字符串都会匹配到，也包括其他的 /。

【代码】react router 7.0‘Redirect‘ is not exported from ‘react-router-dom‘

这个错误提示表明在你的项目中，Gemfile 中指定的 cocoapods 版本（要求版本 >= 1.13，但不能是 1.15.0 或 1.15.1）在当前配置的 gem 源中找不到。默认的 RubyGems 源可能没有你需要的版本，可以尝试更换或添加 gem 源。如果问题仍然存在，可以尝试手动安装指定版本的 CocoaPods。确保你的 Ruby 版本符合 CocoaPods 的要求。确保你的 Gemfile 中关于 cocoapods 的配置是正确的。

接下来，就可以在页面中使用该组件了，最重要的是controls，浏览器自带的控制条，如果controls导致没有播放按钮无法实现播放。完成插件的安装后，还需要在main.ts中注册vue-video-player。当然，我们也可以自定义controls。

vite-plugin-imagemin 是一款图片资源压缩插件，能够在打包的时候显著的降低图片资源占用。不过，在安装过程中我们遇到了如下的问题。完成依赖后，我们需要在vite.config.ts配置中添加图片压缩配置脚本。

Element Plus 是一个基于 Vue 3 的现代化 UI 组件库，旨在帮助开发者快速构建美观且功能丰富的 Web 应用程序。它提供了大量的 UI 组件，如按钮、表单、表格、弹出框、标签页、树形控件等，涵盖了 Web 应用开发中常见的大多数场景。本文通过一个实例来说明vue3+elementplus查询、展示和分页实战。

PAG是来自腾讯的一套完整的动画工作流解决方案，助力于将 AE 动画方便快捷的应用于各平台终端。PAG 的流程图下图所示，设计师在 AE 上设计出动画后，可以通过导出插件导出 pag 文件，同时 PAG 提供了桌面端预览工具，支持实时预览效果，在确认效果后，通过运行配置上线，各平台终端可以通过 PAG SDK 加载渲染 PAG 动画。图片相比其他的动画方案，PAG动画有如下特点和优势：开源项目：无需担心团队维护问题。

对于前端大型项目来说，很容易产生性能问题。对于这些性能问题，最常见的解决方式是使用性能分析工具进行分析，然后再进行针对性的解决。

为确保在 100 毫秒内获得可见响应，RAIL 的准则是在 50 毫秒内处理用户输入事件，这也是为什么我们使用requestIdleCallback处理空闲回调任务时，timeRemaining()有一个 50ms 的上限时间。最简单的，我们可以设置每一次执行的耗时上限，当每个任务执行完之后，检测一下本次执行耗时，超过 50ms 则通过定时器或是requestAnimationFrame、requestIdleCallback等方法，将剩余任务放到下一次渲染前后处理。我们常用的事件监听的顺序则如下图。

卡顿，顾名思义则是代码执行产生长耗时，导致浏览器无法及时响应用户的操作。那么，我们可以基于不同的方案，来监测当前页面响应的延迟。

我们常说的 SSR是 指 Server-Side Rendering，即服务端渲染，属于首屏直出渲染的一种方案。SSR 也是前端性能优化中最常用的技术方案了，能有效地缩短页面的可见时间，给用户带来很好的体验。

元素是众多广泛使用的网络 2D 图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而，随着网站和应用将 canvas 画布推至极限，性能开始成为问题。

vue 在绝大多数情况下都推荐使用模板来编写 html 结构，但是对于一些复杂场景下需要完全的 JS 编程能力，这个时候我们就可以使用渲染函数 ，它比模板更接近编译器vue 在生成真实的 DOM 之前，会将我们的节点转换成 VNode，而 VNode 组合在一起形成一颗树结构，就是虚拟 DOM（VDOM）。我们之前编写的 template 中的 HTML 最终也是使用渲染函数生成对应的 VNode。

对于大多数的渲染场景，我们都可以使用浏览器的 Performance 来录制和分析性能问题，Performance 适用于针对某个具体、可复现的问题做分析。卡顿问题同样也是，我们可以在火焰图中看到一些长耗时的任务，然后再逐个分析具体的耗时问题出现在哪里，逐一解决。下面介绍一下一些常见耗时任务的优化方案。

前端页面加载的过程其实跟我们常常提起的浏览器页面渲染流程几乎一致：网络请求，服务端返回 HTML 内容。浏览器一边解析 HTML，一边进行页面渲染。解析到外部资源，会发起 HTTP 请求获取，加载 Javascript 代码时会暂停页面渲染。根据业务代码加载过程，会分别进入页面开始渲染、渲染完成、用户可交互等阶段。页面交互过程中，会根据业务逻辑进行逻辑运算、页面更新。那么，我们可以针对其中的每个步骤做优化，主要包括：资源获取、资源加载、页面可见、页面可交互。

对于前端开发来说，性能优化老生常谈了。不管是日常工作中，还是涉及到晋级答辩，性能都是频繁被我们提及的一个话题。性能优化不是一劳永逸的解决方案，项目在发展过程，代码不断地迭代和变更。我们在某个阶段优化过的代码，过段时间性能又会慢慢下降，这也是前端开发常把性能挂在嘴边的原因。当页面加载时间过长、交互操作不流畅时，会给用户带来很糟糕的体验。越是使用时间越长的产品，用户对体验的要求越高，如果出现卡顿或是加载缓慢，最坏的情况下会导致用户的流失。

Rollup作为一款轻量级且功能强大的前端构建工具，通过静态分析和插件系统提供了高效的代码打包和优化能力。正是因为它的这些特性，Vite才使用它作为生产环境的默认构建工具。

Vue.js，一个轻量级且易于上手的 JavaScript 框架，已经在全球范围内获得了广泛的应用。Vue.js 的状态管理库 Vuex，也为开发者提供了一个统一的状态管理方案。然而，随著 Vue.js 的发展和进化，我们看到了一个新的状态管理库的诞生 — Pinia。在这篇文章中，我们将探讨 Vuex 和 Pinia 的差异，并了解 Pinia 如何成为 Vue.js 状态管理的新选择。

从2014年发布到今年，Vue正好走过了10年，这10年也正好是前端发展的巨变之年，各种新的技术、框架、UI库 都层出不穷，今天我们来盘点一下2024年有哪些值得关注的 vue UI组件库。

这里面提到的standard也是一个代码风格检查工具，官网是：https://standardjs.com 看它的内容描述，这是一个类似eslint的东西，似乎比eslint更加简单。关键的内容就是其中的parserOptions.parser配置使用typescript语法插件的parser就可以正确识别项目中.vue文件的ts代码，根据eslint-plugin-vue官方的说明，我这里额外配置了一个vue-eslint-parser，因为我的项目需要配置下这个。然后在vue的函数中去使用它。

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。axios有以下特性：从浏览器创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据。

随着前端技术的不断发展，vue作为一款开发框架也越来越受到开发者们的欢迎。而vue的路由机制也是vue框架中不可或缺的一部分。路由系统能够帮助开发人员构建复杂的单页应用，同时也提供了一种灵活的方式来管理页面状态和用户导航。在这种情况下，vue路由守卫便成为一个必须要掌握的知识点。那么，什么是Vue路由守卫呢？在Vue.js中，路由守卫是用来控制页面之间跳转的一种机制，主要用于在页面导航过程中进行权限验证和状态管理等操作。Vue路由守卫主要分为全局路由守卫、路由独享守卫和组件级别守卫三种类型。

Lottie是由Airbnb开源的面向Android、iOS、Web和Windows的动画库，开发者可以使用它在Web、iOS、Android等平台上实现高性能的体验丰富的矢量动画。在早期的前端开发中，Flash是网页动画之王，不过它的规范约束随意，造成很多时设计出来的产品都无法符合用户体验要求。随着Flash动画的消失，HTML网页开发的主流技术，成为前端开发的技术标准，不过在HTML网页上进行动画开发其成本也是相当高的。

题目：我们来实现一个最简单的需求，将一个元素从屏幕左边均匀地移动到屏幕右边。