Perfecto
运维部署和云原生
搞容器化的时候怎么选择Nodejs镜像
这是去年我做流水线改造的时候，优化Nodejs镜像时遇到的一个知识点，现在总结一下分享出来，做个科普。Nodejs官方镜像构成node官方提供了如下三类镜像：node:<version>：基于Debian当前稳定版构建，这是官方默认镜像，可指定的版本有：Debian12（bookworm）
技术实践运维部署和云原生容器化技术
前端开发
从 Vue CLI 到 Rsbuild 的迁移指南
背景随着MSSP的项目体积越来越庞大，基于Webpack5的打包工具VueCLI5在本地dev和build都非常慢，冷启动dev的时间需要5分钟+，流水线build构建需要8分钟+。VueCLI5现在已经进入了长期维护的模式，将来也不会再更新；而Rspack这个新兴的、基于Rust的Webpack重
技术实践前端开发前端工程化
架构与思考
ios无法播放视频问题排查记录
起因最近开发的H5项目中有一个过场动画是以视频的形式展示的。先将视频作为H5首页的背景图，然后点击按钮后调用视频播放。项目上线以后发现ios会直接白屏，但是在web端模拟和安卓端是正常的，只不过由于视频较大（9M）加载会慢一点。经过一开始怀疑是前端代码写的兼容性不行，就反复对比以前写的代码，查找纰漏
架构与思考问题排查与案例
运维部署和云原生
Linux实用命令
作为前端开发工程师，我们虽然主要与浏览器和前端框架打交道，但Linux命令行技能同样不可或缺。无论是服务器部署、CI/CD流程配置还是日常开发环境操作，掌握一些实用的Linux命令都能极大提升工作效率。文件与目录操作基础导航与查看#切换目录cdpath/to/directory#回到上一级目录cd.
技术实践运维部署和云原生Linux
前端开发
正则小技巧之捕获组
在处理流程IT化词条的时候遇到yml文件格式不统一的问题，需要把所有的键值对添加上引号一个一个手动添加引号就很麻烦，在vscode里可以使用它的搜索替换工具查找框中可以输入：^(mss.*?):\s(.*)，这个正则用于匹配每一行词条，并捕获左右两侧替换框中输入：'$1':'$2'，使用捕获到的内容
技术实践前端开发JavaScript
人工智能与AIGC
如何使用提示工程
学习如何同人工智能交流，并得到预期的结果。这个「LearnPrompting」教程不水，写得很用心，讲了不少原理性的技巧，方便更加深入的了解这一块。🔗https://learnprompting.org/zh-Hans/docs/intro介绍随着最近人工智能的不断进步，提示工程这项技能变得越来越
技术实践人工智能与AIGCPrompt Engineering
前端开发
动态import和静态import之间的差异
背景回顾一下上周四的登录页词条加载失败的线上问题：用户在刷新平台回到登录页后，页面上不能正常展示中文，全都是词条，这时候控制台报错：“词条包加载失败”。线上环境经常能复现。在测试环境非常难复现，只有一两个测试发现了这个问题。本地环境更是一次都复现不了。这篇分享，主要是为了让自己捋清问题的原因、涉及到
技术实践前端开发JavaScript
架构与思考
前端周刊是如何整理的？
有一些同事会私聊问我这个问题，其实很简单：记录自己平时看到的优质资料，刚好有一些讲的特别好的东西刚好要收藏起来、或者分享出去，就有人建议我可以整理成周刊，发给大家。工具：电脑关注一些出名的开源大佬的博客或掘金，还有一些定期更新的周刊手机关注一些有名的微信公众号方式：一般在周三晚上、周五晚上集中扫一遍
架构与思考知识管理
运维部署和云原生
使用Nodejs一键部署测试环境前端包
前言在平时使用测试环境或者后端的开发环境的过程中，有时候会遇到一些急需解决（阻塞开发）的TD，需要马上修复后->合入代码->打包构建->走流水线升级对应的环境，整个流程非常的繁琐。又或者说遇到一些在前端本地环境正常，部署后异常的TD，也需要在代码改动后临时出包去升级环境来验证是否修复。以前的流程经常
技术实践运维部署和云原生持续集成-部署 (CI-CD)
效率与工具
使用服务器进行开发-认识RemoteSSH
介绍RemoteSSH是vscode提供的一款插件，作用是让本地的编辑器，访问某台服务器上的代码仓库，进行编码、调试、代码提交等操作。如果你拥有一台个人服务器，就可以放心的使用服务器进行编码、调试，不管换几台电脑，都能保证开发环境不受影响。node、git、包括vscode扩展都是安装在服务端的，本
效率与工具开发环境配置
前端开发
MSSP基座 Webpack 优化过程和前后对比
最近一个多月流水线构建老是失败，用了一些网上的解决方案都没法解决这个问题，排查了一段时间，发现大概率是在代码压缩环节出现了问题。所以最终决定把vue-cli内置的代码压缩工具给换掉，顺便优化一下webpack相关的配置。以下是优化流程。用esbuild代替terser压缩代码、配置browselis
技术实践前端开发前端工程化
前端开发
Less中的导入功能
前置知识导入指令@import指令用于在代码中导入其他的LESS文件。它可以让不同模块的LESS代码分布在不同的文件上，并允许轻松地维护代码的结构。您可以将@import语句放在代码中的任何位置。@import"../../common/edit-table/index.less";导入选项LESS
技术实践前端开发CSS
前端开发
html2canvas生成移动端海报
前言移动端业务裂变业务最大的难点就是移动端缺少快速裂变的渠道，仅靠搜索引擎的导流，获得的流量和客户引流是极其有限，这也是SEO优化逐渐被人忽视的根本原因。我们的业务肯定希望在微信、微博、抖音等渠道进行快速裂变，但是这些渠道对移动端等网页的引流做了很强的限制，例如二跳限制、合规限制，巧妇难为无米之炊啊
技术实践前端开发H5开发