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で修正される予定です。
- [v20.6] CJS runs repeatedly when there are circular dependencies when loaded by ESM · Issue #49497 · nodejs/node
- esm: fix loading of (recursive) CJS modules from ESM by aduh95 · Pull Request #49500 · nodejs/node
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をおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
nitrogql 1.0 release | nitrogql blog
nitrogql.vercel.app/blog/release-1.0
GraphQLからクライアントコードの生成とGraphQLのクエリの型チェック行うnitrogql 1.0リリース。
Node v20.6.0 (Current) | Node.js
nodejs.org/ja/blog/release/v20.6.0
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
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
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の中で動かし、メインスレッドをブロックせずに処理を行うという話。
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/
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
Rollupを使ってCode Splitting/Tree Shakingを行うことでbundleサイズを小さくしたという話。
一方でRollupはメモリ上に全てのコードを持つためCIのビルドが不安定になった点、細かいchunkだと圧縮効率があまりよくなかった点についてなど
サイト、サービス、ドキュメント
Modern.js
ByteDanceのJavaScript向けのウェブアプリケーションフレームワーク。
Reactをベースにしたクライアントサイド向けのモデルやルーティング、Rspack/ESLint/Jestなどの統合、BFFのサポート、MicroFrontendのサポートなどをしている。
ソフトウェア、ツール、ライブラリ関係
measuredco/puck: The self-hosted drag and drop editor for React.
D&Dで編集できるビジュアルエディタのReactコンポーネントライブラリ
書籍関係
Nuxt 3 フロントエンド開発の教科書:書籍案内|技術評論社
gihyo.jp/book/2023/978-4-297-13685-7
2023年9月22日発売
Nuxtについての書籍