Fork me on GitHub

2023-09-07のJS: Node.js v20.6.0(.env)、Rspackのアーキテクチャデザイン

Edit on GitHub 編集履歴を見る

JSer.info #659 - Node.js v20.6.0がリリースされました

.envをビルトインサポート、import.meta.resolveをフラグなしで利用できるように、module.register() APIの追加などが行われています。
Loaderのload hookがCommonJSをサポートし、非推奨のrequire.extensionsを使わなくてもCommonJSを扱うcustom loaderを書けるようになるなどといった変更も含まれています。

しかし、このv20.6.0ではこのloaderの変更によりBabelなどが動かなくなっているため、v20.6.1で修正される予定です。


Design Trade-offs in Bundler: The Rationale Behind Creating Rspack · web-infra-dev/wg · Discussion #1に、Rspackの開発の目的やwebpack/parcel/esbuild/rollupなどのbundlerのアーキテクチャについて書かれています。

それぞれのbundlerには長所と短所がありますが、出発点としてはesbuildとRollupのいいところを取り込んだRustバージョン作るところから始まった点について書かれています。
その過程でプラグインAPIやJavaScript以外の言語を扱う仕組みの必要性などから、webpackのアーキテクチャと似たものが必要なことが分かり、Rspackはwebpack互換のアーキテクチャを採用することになったことが書かれています。

それぞれのbundlerのアーキテクチャ、Rspackの現在の課題、今後の方向性などについても書かれています。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


nitrogql 1.0 release | nitrogql blog

nitrogql.vercel.app/blog/release-1.0

GraphQL Tools Rust nodejs TypeScript ReleaseNote

GraphQLからクライアントコードの生成とGraphQLのクエリの型チェック行うnitrogql 1.0リリース。


Node v20.6.0 (Current) | Node.js

nodejs.org/ja/blog/release/v20.6.0

nodejs ReleaseNote

Node.js v20.6.0リリース。
.envをビルトインサポート、import.meta.resolveをフラグなしで利用できるように、module.register() APIの追加。
Loaderのload hookがCommonJSをサポートし、非推奨のrequire.extensionsを使わなくてもCommonJSを扱うcustom loaderを書けるようになるなど


Release v4.0.0 · actions/checkout

github.com/actions/checkout/releases/tag/v4.0.0

Github Actions nodejs ReleaseNote

actions/checkout v4.0.0リリース。
Node.js 20を利用するように、show-progressオプションを追加など


アーティクル


Design Trade-offs in Bundler: The Rationale Behind Creating Rspack · web-infra-dev/wg · Discussion #1

github.com/web-infra-dev/wg/discussions/1

JavaScript bundler article architecture

Rspackの開発の目的やwebpack/parcel/esbuild/rollupなどのbundlerのアーキテクチャについて。
webpackにはデバッグやパフォーマンスの問題があり、Vite/Rollupも大規模プロジェクトではパフォーマンスにビルド環境の差異の問題があり、esbuildはプラグインの柔軟性に問題がある。
RollupはESMのみが第一級市民であり、RspackはwebpackとParcelと同じく言語に依存しないことを目的にしている。
それぞれのbundlerのプラグインAPIの設計と複雑性、ASTの再利用とパフォーマンスの問題、Tree ShakingをASTベースで行った場合の課題について。
また、今後のRspackが目指す方向して簡単に使えるようにすること、デバッグをしやすくすること、最適化をwebpackと同等以上にすること、リモートキャッシュなどについて触れている。


Mofi - Snappy UIs With WebAssembly and Web Workers

mofi.loud.red/blog/wasm-and-workers

WebAssembly webworker article JavaScript

WebAssemblyでの処理をWebWorkerの中で動かし、メインスレッドをブロックせずに処理を行うという話。
CPUのコア数を超えてWorkerを増やすと問題があるため、ワーカープールを作成しWorker数を制御している。またWorkerから進捗状況をメッセージングする方法についてなど


Faster Vue.js Execution in Firefox - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2023/09/faster-vue-js-execution-in-firefox/

Firefox JavaScript performance article

Vueなどが使うProxyの最適化を行うことで、TodoMVC-Vuewのパフォーマンスが40%改善される。
Firefox 118のリリースにこの変更が含まれる予定。


How we reduced the size of our JavaScript bundles by 33% - Dropbox

dropbox.tech/frontend/how-we-reduced-the-size-of-our-javascript-bundles-by-33-percent

JavaScript bundler article

Rollupを使ってCode Splitting/Tree Shakingを行うことでbundleサイズを小さくしたという話。
一方でRollupはメモリ上に全てのコードを持つためCIのビルドが不安定になった点、細かいchunkだと圧縮効率があまりよくなかった点についてなど


サイト、サービス、ドキュメント


Modern.js

modernjs.dev/en

JavaScript library MicroFrontend

ByteDanceのJavaScript向けのウェブアプリケーションフレームワーク。
Reactをベースにしたクライアントサイド向けのモデルやルーティング、Rspack/ESLint/Jestなどの統合、BFFのサポート、MicroFrontendのサポートなどをしている。


ソフトウェア、ツール、ライブラリ関係


measuredco/puck: The self-hosted drag and drop editor for React.

github.com/measuredco/puck

React editor library

D&Dで編集できるビジュアルエディタのReactコンポーネントライブラリ


書籍関係


Nuxt 3 フロントエンド開発の教科書:書籍案内|技術評論社

gihyo.jp/book/2023/978-4-297-13685-7

Vue library book

2023年9月22日発売
Nuxtについての書籍


この記事へ修正リクエストをする
JSer.info Slackに参加する