Kuto, a reverse JS bundler
Kuto, a reverse JS bundler Kuto is a novel approach to shipping code on the web. It lets you re-use code a client already has for shipping updates. For a 'real-world' site with ~3mb of JS, updating the React dependency resulted in: 71% smaller download 28% faster start time (on a ~5yo old phone, a Pixel 3). …vs a single bundle, or any case where all the code is invalidated. Note that Kuto works re
Hot Module Replacement is Easy - Bjorn Lu
If you've built projects with Vite, chances are you've also used Hot Module Replacement (HMR). HMR allows you to update your code without having to refresh the page, such as editing a component markup or adjusting styles, the changes are immediately reflected in the browser, which enables faster code interation and improved developer experience. While HMR is also a feature in other bundlers like W
🌕 moonでのmonorepo管理とpackemonでのCJS/ESMのdual package
🌕 moonでのmonorepo管理とpackemonでのCJS/ESMのdual package 🌕 moon 一貫性を持ったmonorepo管理ツール for JavaScript ハッシュを使ったファイルキャッシュ プロジェクトのパッケージ間の依存関係の分析とタスク実行 Node.js/npmパッケージマネージャーのバージョン管理と一貫性 TypeScriptのProject Referendcesの一貫性 比較 Nx: The Framework + Pluginで拡張する Lerna: Nx傘下、ライブラリ公開向け Turborepo: タスク実行の最適化をする moon: monorepoでの一貫性を提供する Packemon: moonと同じ作者。ESM/CJSのライブラリ公開向け 比較(言語) Nx: TypeScript + C++[^1] Turborepo: Go
JavaScriptビルドツールの整理 各ツールの機能と依存関係
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
GitHub - web-infra-dev/rspack: A fast Rust-based web bundler 🦀️
🚀 Fast Startup: Based on Rust, the build speed is extremely fast, bringing you the ultimate development experience. ⚡ Lightning HMR: With a built-in incremental compilation mechanism, HMR is extremely fast and fully capable of developing large-scale projects. 📦 Webpack Interoperable: Compatible with the architecture and ecosystem of webpack, no need to build the ecosystem from scratch. 🎨 Batter
書いた JavaScript をそのまま動かすフロントエンド開発の未来のために必要なもの
大きめのテーマです。もしかしたら「うちでは書いた JS をそのまま配信してるぜ〜」って人もいるかもしれないでが。 最近の Web フロントエンド開発では、書いた JavaScript をそのまま動かさないことが多い 最近のフロントエンド開発ではエンジニアが書いた JavaScript をそのままブラウザで動かすことはほとんどないかもしれません。 例として最近流行のフレームワークを考えてみましょう。Next.js や Remix、Nuxt.js など、いずれも内部的にトランスパイラやモジュールバンドラを使い、エンジニアが書いた JavaScript を別の形へと変換してからユーザーのブラウザで動かすような仕組みになっています。 一昔前だと Next.js のようなフレームワークが今ほど発展していなかったこともあり、webpack や Babel を直接使っていたと思いますが、それも同じです。
A Proposal For Module Resolution · Issue #50152 · microsoft/TypeScript
Background When a user writes a module specifier (the string literal after from in an import declaration) in a TypeScript file, how should the compiler resolve that string to a file on disk to be included in type checking? Because TypeScript never rewrites module specifiers in its JavaScript emit, the only possible answer is that it should mirror whatever resolution behavior the code’s intended ru
Building a JavaScript Bundler
First published on April 23, 2022, updated on March 20, 2023 Jest’s packages make up an entire ecosystem of packages useful for building any kind of JavaScript tooling. “The whole is greater than the sum of its parts” doesn’t apply to Jest! In this article we are going to leverage some of Jest’s packages to learn how a JavaScript bundler works. In the end, you’ll have a toy bundler, and you’ll und
ESM treeshake に対応したバンドルサイズを計算してくれる Shakerphobia を作った
bundlephobia.com というサイトがあります。これは npm のモジュールを参照した際のバンドルサイズを算出してくれるサービスです。 便利なんですが、基本的に dist/.. 等の package.json の main で配られるものだけをターゲットにしているので、 ESM Treeshake で一部のモジュールだけ import {} from ... した際のバンドルサイズがわからない、という問題がありました。 なので、それに対応したものを自分で作りました。netlify にデプロイしてあります。 こんな感じです。 使い方 https://shakerphobia.netlify.app/?pkg=<>&imports=<a,b,c> どうやって動いてるか URL を踏むと、 cdn.skypack.dev (その実体は npm) からソースコードを落としてきて、 Web
Packem – A precompiled JavaScript module bundler
Packem is +2X faster than Parcel (with multicore compilation). It leverages close-to-the-metal Rust bindings to achieve zero-cost abstractions and fearless concurrency. The RC relies on V8’s JSON.parse() for faster parsing of larger module graphs. Packem is precompiled into safe and efficient binaries. The upcoming v1.0-stable is expected to implement most parts of the RC in shared Rust libraries,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - javascript-compiler-hints/compiler-notations-spec: (Draft) Specifications for `__PURE__` compiler notation et al.
GitHub - FredKSchott/esm-hmr: a Hot Module Replacement (HMR) API for your ESM-based dev server.
GitHub - unjs/unbuild: 📦 An unified javascript build system
GitHub - packem/packem: 📦⚡ A precompiled JavaScript module bundler