- 博客(110)
- 收藏
- 关注
RSS订阅原创 优化篇15|提升网页加载速度，Vite中Gzip 压缩实战
什么是gzip 压缩在构建现代 Web 应用时，页面加载速度始终是用户体验优化的重要环节。而资源体积过大会直接影响加载时间。是一种常见的前端性能优化手段，能够显著减小资源体积，降低网络传输成本。什么是gzip 压缩即使使用了构建工具（如 Webpack 或 Vite）进行优化，打包后的资源体积仍可能较大，尤其包含大量第三方依赖时，这会显著影响网页的首屏加载速度。是一种常用的文本压缩格式，能在浏览器与服务器之间传输资源时显著减小体积，浏览器可自动解压并解析。如果浏览器的请求头中包含**c**
2025-06-09 11:16:51
15
原创 Vue3setup的参数说明
这也意味着即使我们不声明参数的接收，也可以直接在子组件中使用 { {$attrs.msg } }的方式使用参数，但，这确实还是比较麻烦的。这时，我们打印一下子组件的实例对象v会惊喜的发现，$slots上存放了我们传入的虚拟节点（Vnode）这个时候，如果我们在子组件中定义了插槽，这些虚拟节点就会渲染在插槽出现的位置。如果，我们在子组件中不使用props声明接收，打印当前实例vc对象。，我们会惊奇的发现，即使子组件没有声明接受，父组件传递的参数也会被。可以发现，子组件的实例对象vc上的$slots属性为空。
2025-06-09 10:50:44
1538
原创 优化篇14|网站加载优化：Vite分包策略提升资源加载性能
问题分包前分包后缓存利用改动业务逻辑也会导致全部 JS 文件重新加载第三方库单独打包，可长期缓存构建输出一个大文件多个按功能分离的 JS chunk网络性能浪费带宽与加载时间加速页面加载，提升体验。
2025-06-09 10:47:49
99
原创 代理篇12|深入理解 Vite中的Proxy接口代理配置
代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕过浏览器的跨域限制。比如前端发起请求：http://localhost:5173/api/user通过proxy转发代理，最后的实际请求如下：注意：浏览器控制台的请求依旧是，但后端接受的。
2025-06-09 10:14:56
137
原创 资源篇11|Vue3 中图片引入终极指南：从静态到动态的全方位解析
场景推荐方法静态图片相对路径或import引入动态生成路径的图片new URL动态拼接路径批量动态导入目录中的图片使用延迟加载图片配合懒加载库通过灵活应用这些方法，可以让我们的 Vue3 + Vite 项目图片管理更加高效、灵活！关注我，我是石小石！
2025-06-08 20:46:02
190
原创 样式篇09|让 CSS 更聪明：Vite 中 PostCSS 的最佳实践指南
有些情况下我们可能希望精确控制需要支持的浏览器范围，这可以通过> 0.5%not deadPostCSS 插件（如或preset-env）会自动读取该配置。自动前缀兼容各大浏览器使用现代 CSS 特性而不用担心兼容性与 CSS Modules、Less 等配合使用，提升开发体验。
2025-06-08 20:38:48
127
原创 样式篇07|Vite CSS 调试进阶：你应该了解的 devSourcemap 配置
source map（源映射）是构建工具中非常常见的概念。将构建后的代码映射回原始源码，以便在浏览器中调试时能看到你真正写的代码。这不仅适用于 JavaScript，也适用于 CSS。
2025-06-08 19:49:04
25
原创 让数组操作更优雅：深挖Array.from 让同事惊叹的实用场景
Array.from是一个灵活且功能强大的工具，能轻松将类数组或可迭代对象转化为数组，还可以通过映射函数完成各种复杂的处理。在处理字符串、DOM 集合、范围生成和数据去重时，它能让代码更加优雅、简洁。希望通过本文的讲解，大家能更好地理解并应用Array.from。如果大家还有其他使用场景，欢迎留言分享！
2025-06-04 16:51:07
918
原创 我在 pre 直接修改 bug，被领导批评了
前几天项目在pre回归时，测试发现一个bug，经过排查，我发现漏写了一行代码。由于此时test、dev的代码已经进入新的迭代开发了，因此为了图方便，我直接在pre上修改了代码，并直接推送发布。没想到，随后就收到了来自领导的批评：为什么不拉个hotfix分支修复合并？你直接修改代码会让代码难以追踪、回滚，以后上线全是隐患!确实，即使只有一行代码的修改，也不应该直接在pre直接更改，我深刻的反思了自己。
2025-06-04 16:48:54
453
原创 用dayjs解析时间戳，我被提了bug
前几天开发中突然接到测试提的一个 Bug，说我的时间组件显示异常。我很诧异，这里初始化数据是后端返回的，我什么也没改，这bug提给我干啥。我去问后端：“这数据是不是有问题？后端答：“没问题啊，我们一直都是这么返回的时间戳，其他人用也没报错。
2025-06-01 19:57:02
1425
原创 模块联邦：更快的微前端方式！
在前端项目中，不同团队之间的业务模块可能有耦合，比如A团队的页面里有一个富文本模块（组件），而B团队 的页面恰好也需要使用这个富文本模块。传统模式下，B团队只能去抄A团队的代码，把这个组件放到自己的项目了。为了解决不同服务之间组件共享的问题，Webpack 的模块联邦功能应用而生。借助模块联邦，可以在B服务运行时，动态加载A服务Vite通过插件也可以实现模块联邦的核心优势相比 qiankun 等微前端方案，模块联邦在灵活性上更具优势。
2025-06-01 19:55:01
1056
原创 最强编程工具？Trae+Claude4编程实测！
实际体验下来，的编程能力确实非常强大。无论是 UI 还原，还是复杂的业务逻辑开发，它都能快速响应，高效完成，大幅节省了开发者的时间与精力。作为一款 AI 编程工具，Trae + Claude4 是值得信赖、值得为之付费的生产力工具。也许有人会担心：AI 这么强大，是否会取代前端开发者的岗位？对此，我并不焦虑。正如月影老师所说：“很多人担心 AI 会让前端消失，但从历史看，前端本身才发展了 20 年。AI 不是替代，而是重构行业的底层逻辑和范式。
2025-05-29 14:38:39
928
原创 老板让背景位置智能展示：字多居中，字少右下
昨天开发，老本提了一个有趣（）的需求，希望一个背景图能，背景图要展示，并根据区域上下裁剪，，背景图要展示：标题内容继续增大，图片的位置尺寸不变，固定在右下角。简单来说，就是内容小于图片高度时，用于从图片中心开始展示，上下截断。老板说这个要下午给客户演示用，我上个厕所，回来你发我。我内心一万个泥马奔腾而过，老板觉得这是很简单的一句代码的事儿啊！看来，只能借助AI的力量了！本文使用Trae编译器完成示例。
2025-05-29 14:35:58
707
原创 牛逼！只需一行代码，任意网页秒变可编辑！
大家好，我是石小石！在我们日常工作中，可能会遇到截图页面的场景，有时页面有些内容不符合要求，我们可能需要进行一些数值或内容的修改。如果你会PS，修改内容难度不高，如果是前端，打开控制台也能通过修改dom的方式进行简单的文字修改。今天，我就来分享一个冷门又实用的前端技巧 —— 只需一行 JavaScript 代码，！先看看效果：甚至，还可以插入图片等媒体内容。
2025-04-10 14:54:56
803
原创 评测|AI 剧本生成与动画创作
随着短视频行业的快速发展，内容的即时性与创意性越来越受到关注。但传统的动画制作流程（从剧本到分镜、绘制、配音再到剪辑）需要专业团队合作，制作一个3分钟的动画通常要一周时间，成本很高。这种方式很难跟上热点话题的快速变化，错失流量。借助阿里云的“AI 剧本生成与动画创作”，我们可以通过AI自动化生成剧本、插图和语音，配合云计算的强大算力，创作流程可以大大提速，降低成本，打破传统方式的局限，帮助短视频内容更高效、更有创意地生产出来。
2025-03-10 09:27:34
1313
1
原创 vue3通过render函数实现一个菜单下拉框
鼠标移动到产品服务上时，出现标红的下拉框。使用纯css的方案实现最简单，但是没什么技术含量，弃之；使用第三方组件库，样式定制麻烦弃之。因此，我们使用vue3直接在页面创建一个dom作为下拉框吧。
2025-03-10 09:22:51
960
1
原创 全网最强！5min部署满血版DeepSeek，零成本，无需编程！
针对不同的使用场景和用户需求，阿里云提供了四种部署方案：满血版DeepSeek部署1️⃣基于百炼调用满血版 API蒸馏版模型部署2️⃣基于人工智能平台 PAI 部署3️⃣基于函数计算部署4️⃣ 基于GPU 云服务器部署方案1通过阿里云的百炼平台提供标准化接口API，用户无需自行搭建模型服务基础设施。我们可以在百炼平台直接使用DeepSeek模型，也可以通过搭配 Chatbox 可视化界面客户端在本地使用。如果你是一个开发者，也可以调用百炼API自行搭建一个服务。
2025-02-20 17:56:25
1447
1
原创 控制台新玩法：输入指令，打印隐藏“私货”——用Trae急速实现！
Trae提供了一个Trae-Chat模式，它可以对我们的代码或编程问题进行提问。通过Trae-Chat，可以极大提升开发效率。在本文中，我们通过Trae实现了dist-info插件的开发。dist-info是一个兼容Webpack 5和Vite项目的前端插件，能够将Git信息或自定义内容注入到HTML文件中。使用该插件后，我们可以直接在浏览器控制台查看相关信息，提升开发和调试效率。
2025-02-19 13:35:43
1655
原创 CSS换行最容易出现的bug，半天被提了两个
文字超出换行应该是大家项目中高频的css样式了，它也是非常容易出现样式bug的一个地方。分享一下我工作中遇到的问题。前几天开发代码的时候，突然收到两个测试提的bug：
2024-12-20 09:38:37
715
原创 女朋友说我听不懂她的话，写个情感分析AI试试
于是，我突发奇想，为什么不尝试用技术的方式分析情感，看看我的表达是否足够贴近她的期待呢？于是，我决定自己开发一个简单的“女友情感分析工具”，通过AI技术，分析女朋友言语中的情感，判断她开心、平静还是生气！整个项目的核心其实非常简单，就是调用AI接口分析用户输入的语言，分析后将特定的数据返回给前端，前端做响应的数据处理展示。是项目的核心，采用Koa 搭建服务，提供一个接口（调用kimi的模型），最终将数据以特定的json形式返回给前端。后来，我就真去了，再后来，就没有然后了，女朋友把我电话也删除了。
2024-12-09 13:58:56
1174
1
原创 前端文件下载必备技巧：如何优雅处理后端流数据？
通过本文，相信大家对前端开发中流数据的下载已经掌握了。我们在简单复习一下核心的实现过程：通过使用 Axios 或 Fetch，我们可以接收文件流，并将其转为 Blob 对象，之后通过创建一个临时链接。利用标签的href和download属性，我们可以触发文件的自动下载。如果后端提供了文件名，我们可以从响应头的中提取文件名。总之，关键步骤是将流数据转化为 Blob，再生成下载链接，从而实现文件下载功能。
2024-12-03 10:25:05
1159
原创 如何优雅地重写 localStorage 、sessionStorage 方法？已封装，项目可直接使用!
大家好，我是石小石！在前端开发中，和是非常常见的数据存储解决方案。但在某些特殊场景下，原生的和业务定制化需求：需要在存储和获取某些特定键时加入逻辑，比如数据加密、校验或默认值填充。全局监控：希望对存储和读取操作进行监控，例如记录关键数据的访问日志或统计操作频率。系统数据保护：防止外部代码对特定键值的误改动。在上面的场景中，我们通过重写原生的和的方法，就可以实现这些特殊的需求。本文给大家介绍了通过代理和实现自定义存储逻辑，满足特定业务需求、全局监控和数据保护等场景。核心思路是重写原生的。
2024-12-03 10:23:04
736
原创 git遴选：一行代码恢复被同事误删（覆盖）的代码
代码遴选，实际指的是：git cherry-pick“git cherry-pick” 是 Git 提供的一个命令，用于从一个分支中选择单个提交（或多个提交），并将它们应用到当前分支中。通俗易懂的来说，就是将git提交历史的某个提交，直接复制在当前分支上！我们看下代码执行结果就明白了：看来，学会代码遴选，在也不怕同事误删代码了！
2024-11-27 17:33:51
332
原创 纯前端：极速构建一个私有ChatGPT！AI套壳居然如此简单！
前端前端界面比较容易，只需要简单的额css + js即可，本文使用vue作为作为demo。后端：我java很垃圾，写不出好的代码，所以后端只能用koa代替，实现接口调用即可。前后端通信：为了实现前后端的数据交互，完成AI即时问答功能，我采用WebSocket进行通信。AI大模型：要实现AI问答，核心就是需要使用现有的AI大模型。比如OpenAI 的GPT-4、字节跳动的豆包大模型、Kimi的月之暗Moonshot模型等等。由于Kimi的。
2024-11-27 15:31:20
2045
原创 害人！小公司千万别在自己封装组件库了！
封装组件库对小公司来说是一个高风险、高成本、低收益的选择。如 Ant Design、Element Plus 等，它们功能完善且生态丰富，能够快速适配业务需求！如果开源组件库无法完全满足需求，可以在其基础上进行二次封装（各位leder注意看，组件库基本都支持样式定制的！，而不是从零开始构建。小公司开发团队的首要任务是满足业务需求，组件库的开发应该是锦上添花，而非拖慢进度的负担。各位leder注意，技术的最终目的是为业务服务！
2024-11-25 09:49:07
763
原创 被同事代码震惊，使用Boolean 构造函数代码居然可以如此优雅！
为了加深对Boolean的语法理解，我们先回忆一下JavaScript中的显示与隐式转换。
2024-11-25 09:48:21
955
原创 Three.js + AI：AI 算法生成 3D 萤火虫飞舞效果~
本文使用 Three.js 创建一个 3D 场景，生成粒子（代表萤火虫），并使用 AI 算法（如 Simplex Noise噪声算法）来模拟萤火虫的动态运动轨迹。创建 3D 场景和渲染器：通过 Three.js 创建了一个基本的场景和渲染器，摄像机的位置设置使其可以从远处观察场景中的粒子。生成粒子（萤火虫）：使用创建球体作为粒子，并设置自发光材质，模拟萤火虫的发光效果。后期处理（发光效果）：利用 Three.js 的和实现了萤火虫的光晕发光效果，使其看起来更自然。
2024-11-21 15:55:11
2677
原创 直接使用git pull拉取代码，被同事狠狠地diss了！
简单来说，rebase的作用就是永远会让我们本地的代码处于最新状态。比如，我们一开始是使用B节点开发代码的，开发到B2时，此时远程已经有人推送了C节点。在B2节点使用rebase变基，会让我们的B1节点和B2节点位于C节点上。大概是这样：因此，使用rebase变基后，git永远只有一天线性历史，非常直观。本篇文章我们介绍了git pull的用法，明白了它有merge和rebase两种模式。默认情况下，它使用的是merge。使用merge的方式拉取代码会导致git历史变得复杂，不利于维护和溯源。
2024-11-20 15:53:12
687
原创 我为展开收起功能做了动画，被老板称赞！
要想实现一个折叠面板的效果，最简单的还是直接使用第三方组件库，但是如果项目不能使用其他组件库的话，手写一个也是非常简单的！也希望大家能在评论区给出更好的实现方式，供大家学习！
2024-11-20 15:50:54
423
原创 hover后元素边框变粗，样式被挤压？一招帮你解决，快收藏备用！
边框从无到有，改变原始边框透明度即可边框hover尺寸变化：如果不要求过渡效果，hover后可以计算padding如果需要过渡效果，使用felx布局居中核心区域即可如果大家有更好的方案，可以评论区分享一下。
2024-11-20 15:47:05
504
原创 离谱，split方法的设计缺陷居然导致了生产bug！
这篇文章通过本人的生产事故，向介绍了split方法使用可能存在的一些容易忽略的bug，希望大家能有所收获。一定要注意split分割空字符会得到一个包含空字符数组的问题！
2024-11-20 15:44:19
516
原创 快收藏！超实用标签title属性重写，让同事对你刮目相看
在中定义自定义指令，并将样式动态添加到页面。return;tipDiv.innerText = binding.value || '只要肯吃苦，吃得苦中苦，就有吃不完的苦';${} `;return;tipDiv . innerText = binding . value || '只要肯吃苦，吃得苦中苦，就有吃不完的苦';} };} };} `;return;
2024-10-12 19:37:44
1101
原创 如何快速实现一个无缝轮播效果
在本教程中，我们通过简单代码实现了无缝轮播效果，样式是左右切换，我们也可以通过样式控制实现上下切换的效果，比如将translateX设置为translateY即可。opacity: 0;时间原因，本教程也没有对技术上做深究，也希望各位能提供自己 的思路与建议。
2024-08-30 11:20:32
1117
原创 发现一个程序员最强外设，助你高效开发早日摸鱼！
日常写bug中，副屏是我们每个程序员必备的一个工具，我们都希望拥有一个强大好用的显示器。这篇文章我将介绍：如何将一块优秀的副屏与实际工作结合，发挥其最大价值，实现高效开发、快速摸鱼！
2024-08-29 13:03:22
1220
原创 微前端集成优化：让所有子应用体积更小，加载更快！
随着前端的日益发展，微前端架构越来越受到青睐。它通过将前端应用拆分为多个独立的子应用，每个子应用可以独立开发、部署和运行，从而提升了开发效率和团队协作。目前主流的微前端方案应该是qiankun了。以笔者公司为例，采用的就是qiankun框架，主应用采用了vue3，子应用五花八门都有。笔者公司前端服务的子应用大约有400多个，后期也会继续增多！因此，如何优化子应用的体积和加载速度，提升用户体验和性能是我们亟待解决的问题！本文将分享我们公司用到的一些优化方案。
2024-08-28 15:43:02
1204
原创 2024最新VSCode实用插件推荐，开发效率遥遥领先！超全面，快收藏~
大家好，我是石小石！作为前端开发，vscode好比我们的衣食父母，不可或缺。我相信大家都试过给编译器装一些插件，用来提升开发效率。这篇文章，我将结合自己的工作经验，向大家推荐我工作中用到的一些插件，我会尽可能详细和全面介绍。如果大家有更好用的插件，欢迎在评论区分享！
2024-08-28 15:40:36
2514
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人