PWA - 微前端项目实践主要目的： 解决资源加载慢问题
背景 平台各个子应用静态资源加载速度慢，用户体验有待提升 主要目的： 解决资源加载慢问题，提升体验 支持应用自启动（原生 体验） 项目使用到的技术栈为： PWA 介绍 简介 PWA 它不是特指某一项技术，而是应用多项技术来改善用户体验的 ，其核心技术包括 ， 等，用户体验才是 的核心。 特点： 可靠 即使在网络不稳定甚至断网的环境下，也能瞬间加载并展现 用户体验 快速响应，具有平滑的过渡动画及用户操作的反馈 用户黏性 和 一样，可以被添...
React开发小点：组件为什么需要用标签包裹？return为什么加()？
前言 这次准备介绍关于react的两个新生开发过程中时不时会犯错或者不理解的两个小知识点： React组件为什么需要用标签包裹？ 看这样一段代码： 结果报错了 错误 ：JSX元素必须被一个 包裹 相信不少同学刚开始学习react的时候都编写过类似的代码，但大家有想过为什么会报这样的错吗？以及这样设计的目的是什么？ 不了解也没有关系，接下来让我们一起逐步解密～ 再此之前先来补充 与 的关系 React.createElement与JSX...
一次性完整学完搭建PWA项目
最近在开发一个简单的个人记录网站，技术栈是使用 Vite + Vue3，由于使用的单台服务器，有时候服务器会被限制带宽，所以平时都会比较访问比较慢。所以想实现一个离线应用，而 PWA 应用则是目前最佳方案。 本文涉及知识点如下： PWA 的概念 Service Worker使用 用构建工具搭建 PWA 应用 渐进式 Web 应用（Progressive Web App，PWA）是一个使用 web 平台技术构建的应用程序，但它提供的用户体...
大屏兼容之scale方案
常见方案 vh、vw方案：将所有的尺寸根据设计图换算成vw和vh scale方案：根据设计图的尺寸和当前屏幕的尺寸计算缩放的比例 rem方案：根据设计图和屏幕尺寸计算根元素font size，其他尺寸通过插件换算成rem scale兼容的优缺点 优点：1、代码量极少，只需要处理一次container；2、其他各种图表不用单独进行适配 缺点：1、因为是根据ui进行等比例缩放，所以左右和上下可能会出现白边；2、放大倍数过大会导致图片等失真变...
太神奇了，仅使用彩色字体实现代码高亮
通常情况下，我们要实现代码高亮功能，需要借助复杂的语法高亮库，例如 或 这些库的基本原理是扫描代码，并将关键词包裹一层标签，然后通过 样式改变代码颜色。 但是，这种实现会导致页面非常臃肿，增加了很多额外的标签，就像这样 那么，有没有办法可以在不改变页面 结构的情况下高亮一段代码呢？ 其实也是有的，之前写过一篇文章，可以利用 实现纯文本的代码高亮，有兴趣的可以回顾之前这篇文章 虽然叫做“CSS Custom Highlight API”，...
我是如何实现网页颜色自适应的
前言 不知大家有没有留意过，当前大部分 App 或网页中，很少存在允许用户完全自定义要展示信息的颜色的功能。 例如在钉钉的自定义表情中，只允许用户从一组预设的配色中随机切换： 再比如笔记应用 Notion 虽然允许用户改变文本颜色，但也只允许在一组预设色值中选取： 原因无它，配色，不是一件容易事。 对于大众用户而言，没什么颜色理论知识，很可能挑出来的颜色在应用中很难看、看不清，这会极大的影响用户的使用体验（即使是用户自己造成的）。 因此...
通过PWA，我的博客也能离线阅读啦
前言 我经常看到有些博客站点拥有离线观看的功能，就算是没有网络，刷新页面依然可以获得数据。我对这一功能甚为好奇，了解后才发现这一技术是PWA。 何为PWA PWA又为渐进式Web应用，在MDN上是这样说的， 如何实现 构建一个PWA程序主要是用到 技术，这一项技术在现代浏览器中默认开启。 以上是一张官方的图，讲解了 的工作流程，简单来说就是 注册程序 安装程序 激活程序 获取数据 版本更新后再次获取数据 。 注册程序 安装程序 定义版本...
JSON 的键为什么必须有引号？
00\. 写作背景 如题， 为什么 JSON 的键被设计为必须有引号 ？ 但是，问题无厘头，不代表无意义。Vite 源码的 pnpm 配置使用了一种 YAML 格式的配置文件，很多工具和语言也支持 YAML。 举个栗子，这是格式化工具 Prettier 官网的示例： 粉丝请注意，YAML 和 JSON 一龙一猪， 键名真的可以没引号 ！那么，强制要求键名加引号、而且必须是双引号的 JSON 到底在搞什么飞机？ 有时候，乍一看是几何题，其...
React中优雅的插入SVG图标，将SVG文件转换为React组件
在设计稿中我们经常能见到同一种图标不同颜色，如果直接使用IMG标签插入SVG文件的话是没有办法修改颜色的，就要保存多个SVG文件来显示不同颜色。 在react中把SVG文件转换成组件，使用CSS修改SVG颜色。只需加载一个SVG文件，就可以通过CSS展示多种颜色。从而实现减少包体积、减少静态资源请求。 在react中插入SVG 首先安装插件 修改 配置： 调用 控制台 接下来你就可以使用CSS来处理你的svg文件了 在调用过程中如果遇到...