Skip to content

Latest commit

 

History

History
96 lines (60 loc) · 4.31 KB

0018.md

File metadata and controls

96 lines (60 loc) · 4.31 KB

《Ohbug 前端周刊》 第 18 期 - Parcel 2

「Ohbug 前端周刊」第 18 期。本期刊开源(GitHub: ohbug-org/weekly), 欢迎 issue 投稿, 推荐项目。

⬆️ 热点

Parcel 2

Parcel 2

Parcel 2 用了 SWC + Rust 进行重写, 性能相比之前有很大提升:

  • 🔌 全新的插件体系
  • 🌳 默认开启 Tree Shaking, 支持 ESM、CJS、Dynamic Import 和 CSS Modules
  • 🚀 性能提升, Rust 版 JS Compiler、并行架构
  • 🖖 自动基于 Native ES modules 的差异化构建, 可自动回退至老版本浏览器的兼容
  • ✂️ 自动 Code Splitting
  • 🖼 图片的尺寸转换、格式转换和优化, 支持 AVIF 和 WebP, JPG 和 PNG 的无损压缩
  • 💵 提升缓存可靠性, 机器无关, 自动跟踪配置、插件、依赖的变更
  • 🔥 改进 Hot Reloading, 支持 React Fast Refresh
  • 🪆 支持 Bundle 内联, 允许将一个 bundle 的编译内容嵌入到另一个 bundle 中, 比如 inline 图片为 data url
  • 📚 支持组件库打包, 输出 ESM、CJS 和 TypeScript 定义
  • 🧘 懒开发模式, 仅构建浏览器请求的文件, 提升 dev server 冷启动速度
  • 👷 改进 Web Worker 支持, 支持 Native ESM Worker、Worklets、Server Worker Manifests 等
  • 🚨 更好的诊断信息, 代码提示, 文档链接显示方式更加优雅
  • 👀 更可靠的 File Watcher, 用 C++ 编写, 并与低级操作系统 API 集成, 即使在 Parcel 重新启动时也能快速使缓存失效
  • 🗺 更快和精确的 Source Maps, 基于 Rust, 相比 Parcel 1 提速 20 倍

处于头部的前端生态纷纷开始使用 Rust 重构, 预计未来会有更多使用 Rust 的框架出现. 期待一手

Rome 计划使用 Rust 重写

Rome 计划使用 Rust 重写

Chromium 正在开发针对 使用 import 导入 CSS 样式 的支持

Chromium 正在开发针对 使用 import 导入 CSS 样式 的支持

在此功能支持后, 你就可以像使用 ES 模块那样使用 CSS 了。

📝 文章

在 Web 上实现 Dark Mode 的完全指南

在 Web 上实现 Dark Mode 的完全指南

Vue 团队公开快如闪电的全新脚手架工具 create-vue,未来将替代 Vue-CLI,才 300 余行代码,学它!

Vue 团队公开快如闪电的全新脚手架工具 create-vue,未来将替代 Vue-CLI,才 300 余行代码,学它!

美国时间 2021 年 10 月 7 日早晨,Vue 团队等主要贡献者举办了一个 Vue Contributor Days 在线会议,蒋豪群(知乎胖茶,Vue.js 官方团队成员,Vue-CLI 核心开发),在会上公开了 create-vue,一个全新的脚手架工具。

⌨️ 代码

vite-node: Vite as Node.js runtime

vite-node

  • 开箱即用的 ESM & TypeScript 支持
  • Top-level await
  • Vite 插件支持
  • Respect vite.config.ts
  • Shims for dirname and filename in ESM
  • Access to native node modules like fs, path, etc.
  • Watch mode (like nodemon)

Xterm.js:基于组件的终端组件

Xterm.js

它被应用在许多项目里, 例如 VS Code、cPanel 和 Azure Cloud Shell

mijin:Vue + Tailwind UI 组件库

mijin

没任何依赖, 对黑暗模式做了内置支持。

Tailwind CSS 好像很适合构建类似的组件库, 这个 UI 库构建的方式值得学习

可视化代码执行

可视化代码执行

这个网站会将代码的执行流程, 转成可视化图形, 展示代码一步步是怎么执行的。目前支持 Python、Java、C、C++、JavaScript 和 Ruby 代码

🕒 订阅

  • 🕒 每周一准时更新 (重新定义周一)
  • 👋 Github 和公众号同步更新 点击《阅读原文》前往 Github 仓库

微信搜索 「Ohbug」 或者关注公众号 ohbug, 即可订阅。