我码玄黄的博客

通过压缩JSON格式脚本，显著减小构建产物大小，但本地打包时间缩短不明显。将压缩库集成到Jenkins打包脚本中，打包时间减少到7min。未来考虑构建分包和缓存等优化方案。

优化vue-cli项目打包时间，通过修改写入文件的脚本，将json内容作为字符串写入，减少编译压力，打包时间从12min降至9min。后续可优化脚本体积、依赖分包等。

`wenyan`的核心功能是将编辑好的`markdown`文章转换成适配各个发布平台的格式

这是一个基于vue-cli的vue2的老项目，比较久远，一般Jenkins中打包时间都在5-6min左右，基本能够接受。近来由于项目原因，在该项目中加入了一些在打包时动态生成的js文件以做“缓存”。

Markmap可将Markdown文本转为思维导图，提升信息整理与理解效率。支持在线编辑，生成可交互的HTML或SVG文件，便于分享展示。适用于学习、协作、教学演示。

sharp.js是一个高性能的Node.js模块，它利用了libvips库，提供了快速且高效的图像处理能力。

AniJS 是一个强大的动画库，它通过简化动画的实现过程，让设计师和开发者能够更专注于创意和用户体验。

Remotion是一个开源库，允许开发者使用React创建视频。支持服务器端渲染、参数化、音频渲染等。可快速编辑和预览视频，支持多种格式。适用于营销视频、教育内容等场景。

本文介绍了如何在Cesium中使用UrlTemplateImageryProvider加载和纠偏高德地图影像，包括自定义WebMercatorTilingScheme的扩展类，实现坐标系转换和纠偏，以提高地图服务的准确性。

HTML翻牌器通过CSS和JavaScript实现动态数字展示。用CSS3D rotateX和clipPath创建卡片翻动效果，JavaScript管理动画和DOM结构。翻牌器响应键盘事件，可增减数字，并展示3D翻动效果，适合增强页面动态吸引力。

mo.js是轻量级JavaScript动画库，通过简单API创建复杂动画。支持Vue，兼容性好，提升网页动态效果和交互性。示例展示在Vue中使用mo.js创建动画效果。

GSAP是高性能JavaScript动画库，支持跨浏览器，提供核心功能和丰富插件，助力开发者轻松创建快速响应的动画效果，适用于各种场景，包括网页动画、UI元素、数据可视化和游戏动画。

`Velocity.js` 是一个强大的 `JavaScript` 动画库，它不仅完全兼容 `jQuery` 的 `$.animate()` 方法，还能在不依赖 `jQuery` 的情况下独立工作。

JavaScript基础学习：预解析机制

在软件开发中，设计模式是解决特定问题的通用解决方案。行为设计模式专注于对象之间的通信和职责分配。本文将介绍三种常用的行为设计模式：策略模式、观察者模式和命令模式，以及它们的主要组成部分、工作原理、优缺点和应用场景。

THREE.js是一个强大的基于JavaScript的库，它使得在网页上创建和展示三维图形变得异常简单。

而虚拟DOM的意义就是找出差异的性能消耗最小化，通过减少直接的DOM操作来提高性能，而不是重新渲染整个页面。

本文介绍在Flutter应用中使用高德地图定位服务，包括APIKey获取、环境配置、权限设置、隐私政策配置、监听定位结果和销毁服务。通过集成，应用能获取用户实时位置信息，提升服务个性化。

GetX 状态管理是 Flutter 开发中一个非常有用的工具，它通过简洁的语法、强大的功能和高效的性能为开发者提供了构建现代应用程序的坚实基础。

Electron 应用程序可以运行在 Windows、macOS 和 Linux 上，本文将探讨如何将 Electron 构建的桌面应用程序上架到 App Store

iOS项目嵌入Flutter步骤：创建iOS项目，打包Flutter为framework，集成到iOS工程，编写引入代码展示Flutter页面。实现iOS与Flutter混合开发，提升用户体验。

Rust是一种系统编程语言，它注重安全、速度和并发性。Rust内存安全Rust通过所有权系统来保证内存安全，无需垃圾回收。类型安全Rust的强类型系统有助于在编译时捕捉错误。并发性Rust支持多线程和异步编程，提供了安全的并发编程模型。性能Rust编译成机器码，执行速度接近C和C++。跨平台Rust可以在多种操作系统和架构上运行。Rust作为一种现代的系统编程语言，其在领域的应用展示了它在前端开发中的潜力。通过学习Rust和，开发者可以构建更安全、更高效的前端应用。

`Matter.js`，一个专为网页设计的`2D`物理引擎，为开发者提供了一种简单而强大的方式，来实现复杂的物理交互效果。

`htmx` 是一个轻量级的 `JavaScript` 库，它允许开发者使用简单的 `HTML` 属性来实现复杂的交互功能。

`Typed.js` 是一个轻量级的 `JavaScript` 库，它能够以编程方式模拟打字效果，为网页增添动态的文本展示。

`Mock.js` 作为一个强大的前端数据模拟库，可以帮助开发者轻松模拟 `CRUD` 接口，从而在开发过程中测试和验证前端逻辑。

paper.js 是一个开源的矢量图形脚本框架，它为开发者提供了一个强大而灵活的工具，用于在网页上创建和操作矢量图形。

`IndexedDB` 是现代 `Web` 应用中的核心本地数据存储解决方案，它突破了传统存储方法在容量和性能上的局限，为开发者提供了强大的数据管理能力。

"randomColor：一款轻量级工具，快速生成协调的主题色系，提升设计色彩搭配效率。"

在之前的文章中，我们介绍了如何在设计中嵌套图标实例，本次介绍下如何在缺少图标积累的情况下快速获取图标。在设计项目时，图标往往能起到画龙点睛的作用。但如果没有现成的图标资源，寻找合适的图标可能会耗费大量时间。本文将介绍三种高效获取图标的途径，帮助您轻松解决这一问题。以上介绍的三个平台，几乎能满足日常设计工作中对于图标的大部分需求。希望这些建议能帮助您更加高效地完成设计任务。

本文深入探讨了Web Codecs API中的编码技术，从视频编码的基础概念到实际编码过程，详细介绍了如何使用VideoEncoder类进行视频压缩，并通过MP4Box.js封装成视频文件，为开发者提供了实用的编码指南和实践技巧。

掌握Flutter与JavaScript的双向通信：通过JavascriptChannel轻松实现Dart与前端JS的交互，提升你的跨平台应用开发效率。

Flutter WebView加载HTTP地址时出现白屏？通过修改Android的network_security_config.xml和iOS的Info.plist配置，可解决此问题。但请注意，这可能降低应用安全性，推荐使用HTTPS。

Flutter Bloc状态管理库是一种高效的架构模式，通过分离UI与业务逻辑，实现代码的模块化和可测试性。本文详细介绍了Bloc的基本概念、优点、缺点以及如何在Flutter应用中使用Bloc进行状态管理，包括定义事件、状态、创建Bloc类，以及在UI中集成BlocProvider和BlocBuilder。

探索前端跨页面通信的多种方案，包括BroadcastChannel、window.opener、postMessage、MessageChannel、storage事件、SharedWorker等。

TypeScript编写Electron应用带来类型安全、工具支持等优势。esbuild作为打包工具，提供快速打包解决方案。通过创建项目结构、安装依赖、编写启动脚本，实现Electron应用的构建和部署，减少安装包体积，提升构建速度和安装时间。

`Knex` 是一个用 `JavaScript` 编写的 `SQL` 构建器，它提供了一种优雅的方式来构建和执行 `SQL` 语句。

浏览器阅读 API（如 `Speech Synthesis API` 和 `ReadableStream API`）提供了一种新的方法，使得网页内容可以通过语音合成或流式传输的方式被“阅读”出来。