JavaScript scope hoisting is broken
7/6/2025 Most modern JavaScript bundlers implement an optimization called "scope hoisting". The idea is that rather than wrapping each bundled module in a function, a compiler concatenates the modules into a single scope. Say you have a program like this: // index.js import {add} from './math'; console.log(add(2, 3)); // math.js export function add(a, b) { return a + b; } When scope hoisted, the o
How We Reduced CKEditor’s Bundle Size by 40% | CKEditor
In this article, we’ll show how we cut CKEditor 5’s bundle size by 40% through tree-shaking and bundle size optimization techniques and share tricks you can use to slim down your own JavaScript libraries. We’ll also walk through the tools and processes we used to achieve this, measure improvements, and catch regressions. As any software library author will tell you, building and maintaining is har
How we reduced the size of our JavaScript bundles by 33%
When was the last time you were about to click a button on a website, only to have the page shift—causing you to click the wrong button instead? Or the last time you rage-quit a page that took too long to load? These problems are only amplified in applications as rich and interactive as ours. The more front-end code is written to support more complex features, the more bytes are sent to the browse
Design Trade-offs in Bundler: The Rationale Behind Creating Rspack · web-infra-dev · Discussion #1
chinese version Before embarking on the development of Rspack, we explored various build tools and frameworks, including extensive use of Webpack, Vite, esbuild, and Rollup in real-world production environments. To provide some context, our team, known as the WebInfra Team, is responsible for overseeing the company's suite of front-end build tools and frameworks. Some of these are open-source, whi
Tree-Shaking: A Reference Guide — Smashing Magazine
Since its early days, JavaScript programs have grown in complexity and the number of tasks they perform. The need to compartmentalize such tasks into closed scopes of execution became apparent. “Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more
module bundlerの作り方(準備編) - hiroppy's site
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi
Under-the-hood of web bundlers (e.g. Webpack)
Webpack is somewhat of a black box for most developers. Tools like “create-react-app” abstract most of the bundler functionality away. I did some research into it and began building my own light-weight web bundler to understand more about what it entails. This is part of my “under-the-hood of” series: Type systems (e.g. TypeScript)Test runners (e.g. Mocha)VSCode auto formatters (e.g. Prettier)Sour
Rome, a new JavaScript Toolchain - JASON Format
Sebastian McKenzie, the original creator of Yarn and Babel and a member of the React Native team at Facebook, has been working on an “all-in-one” solution for JavaScript and TypeScript development. The Rome project, a reference to “all roads lead to Rome”, was made public on Feb 26th 2020. What is Rome? Rome is a from-scratch implementation of a complete JavaScript toolchain. It compiles and bundl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
