<script src="jquery.js">
</script>
<script src="foo.js">
</script>
<script src="main.js">
</script>

this.App = typeof App == "object"
  ? App : {};
// foo.js
App.Foo = {
  render: function() {
    $(".app").html("<p>foo</p>");
  }
}
// main.js
App.Foo.render();

バンドラ以前

• Frontend (~ES5)
  • モジュールシステムがない
  • パッケージマネージャがない
  • スクリプト間の依存でブロッキングを要求
• Node.js (2009~)
  • V8 + CommonJS

Node.js CommonJS

• Node.js で採用されたモジュールシステム
• 構文ではなく 関数ユーティリティ
• ESMと比べて静的解析に優しくない
  • exports.* の同期/動的評価に依存

// lib.js
exports.foo = () => {/*...*/};
// main.js
const lib = require('./lib');
lib.foo();

// Always dynamic
exports[Math.random()] = true;

// sub.js
export const x = 1;
export const y = 2;
export default 3;

// main.js
import sub, { x, y } from "./sub.js";
await import("./dyn.js");

ES Modules (ES2015)

• ファイルスコープの導入
• シンボル解決が決まっているだけ
• インポート先をどのようにロードするかは実行環境依存
  • Node.js: FS
  • Frontend: HTTP Request

ESMの問題: RTT

// entry (html)
<script 
  type="module"
  src="./main.js"
></script>
  // main.js: 1 RTT
  import { o } from './sub.js';
    // sub.js: 2 RTT
    export { o } from './nest.js'
      // nest.js: 3 RTT
      export const o = 1;

• N層目の構文解析するまで N+1 の依存が判明しない
• IEがサポートしないのもあって積極利用されなかった

modulepreload

<!-- header -->
<link
  rel="modulepreload"
  href="main.js"
>

<!-- body -->
<script
  type="module"
  src="main.js"
></script>

• 対象モジュールを再帰的に先読み
• 優先的な先読み開始の指示に過ぎない
  • 深さ問題は解決しない
  • Chrome’s Loading Performance with (Many) Modules
  • モジュール数 > 100 or 深さ > 5 ならバンドルしたほうがいい
  • モジュール内依存を考えると、単一ファイルのライブラリをピックする必要がある

HTTP 103 Early Hints

Content-Type: text/javascript
Link: </sub.js>; rel=preload
Link: </nest.js>; rel=preload

• HTTP Header で先読みを指示
• Pros
  • 仮想ストリーム内で RTT を排除
• Cons
  • RTT を減らすには 事前に依存解析が必要
  • バンドルと同等のプリプロセスが必要なら、バンドルでよくね問題

<script type="importmap">
  {
    "imports": {
      "foo": "/script/foo.js"
    }
  }
</script>

<script type="module">
  import foo from "foo";
</script>

ImportMaps

• ESM のパス解決ルールを定義
• node_modules と同じ書き方でIDE支援がある
• ブラウザと Deno がサポート

module countModule {
  let i = 0;
  export function count() {
    i++;
    return i;
  }
}
import { count } from countModule;

TC39 Proposal: Module Declaration

• ファイルスコープ内で module を宣言 (Stage 2)
• 単純なコード変形でバンドル相当に
• TS module (非標準) と排他な構文...

import {
  createElement as h
} from "https://esm.sh/react";
import {
  renderToString
} from "https://esm.sh/react-dom/server";
renderToString(
  // <p>Hello</p>
  h("p", {}, "Hello")
);
//=> <p>Hello</p>

HTTP Imports

• http(s) のリクエストから依存を解決
• ブラウザ & Deno は同じコードが動く
• node --experimental-network-imports
• 改竄に弱くサンドボックスが必須
  • Cross-Origin-Resource-Policy
  • Cross-Origin-Embedder-Policy
  • Deno Permissions
  • Permissions | Node.js v20.0.0

Closure Compiler (2009)

// goog.module
goog.module('foo');
const Quux = goog.require('baz.Quux');
exports.Bar = function() { /* … */ };

/**
 * Enum
 * @enum {number}
 */
project.Constants = {
  A: 1,
  B: -1,
  C: 0
};

• google/closure-compiler: A JavaScript checker and optimizer.
• 最初期の構文解析による最適化ツール (2009/11)
• jsdoc による静的型解析、バンドル、チャンク分割
• 厳密なアノテーションが必要で流行らなかった

webpack (2014)

• CJS のバンドル + チャンク分割
• カスタムローダーによるCSS対応で、パイプラインがワンストップ化
• Reactのビルドツールとして普及した?
  • JSXのついでに全部やってしまえ

// src/main.ts
import "./style.css";
(async function run() {
  await import("./sub");
})();
/* Output
src
├── index.ts
├── style.css
└── sub.ts
dist
├── main.js
└── 370.js # generated chunk
*/

Rollup

// sub.js
export const sub = 1;
export const unused = 2;

// main.js
import {sub, unused} from "./sub.js";
console.log(sub);

// $ rollup -i main.js
const sub = 1;
console.log(sub);

• ESM ファーストなバンドラ
• ESM 出力をサポート
• TreeShake による DCE
  • minifier の一部の処理も兼ねるように
  • #__PURE__
  • #__NO_SIDE_EFFECTS__

# https://github.com/mizchi/monorepo
$ turbo build # 1st
 Tasks:    8 successful, 8 total
Cached:    0 cached, 8 total
  Time:    2.808s 

$ turbo build # 2nd
 Tasks:    8 successful, 8 total
Cached:    8 cached, 8 total
  Time:    68ms >>> FULL TURBO

$ turbo build --graph # emit graph

Turborepo

• https://github.com/vercel/turbo
• ワークスペース環境のビルド最適化
• 依存のトポロジカルソートでビルド順とスキップ有無を決定

$ tree src
src/
└── app
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── page.module.css
    ├── page.tsx
    └── sub
        └── page.tsx
$ next build
+ First Load JS shared by all            83.9 kB
  ├ chunks/331-8de3f1403fdec9cb.js       28.7 kB
  ├ chunks/4ae7487b-c3bb4f474d997312.js  53.3 kB
  ├ chunks/main-app-400cf913b3975db6.js  217 B
  └ chunks/webpack-e3c6517d4ab8d680.js   1.68 kB

Next.js

• SSR/CSR の Hybrid フレームワーク
• Client/Server のコードを同時に最適化する(一昔のIsormorphic)
• 現代の要求に見合う API とセマンティクスを発明した

Next.js の発明: Filesystem Routing

• URL とファイルパスに規約を導入
• 対応するファイルの default = その画面のルート要素
• サーバー用のSSRコードとクライアントHydrationコードを同時に生成

/* Pages Router Example */

// pages/post/[slug].tsx
// => /post/*
export default () => {
  return <div>Hello</div>
}

Next.js の発明: DataLoader

• 関心の限定: Client/Server間で受け渡す props 初期化だけを記述
• SSR/CSRの初期化と再レンダリングの分岐で複雑だった部分を隠蔽

export const getServerSideProps =
async () => {
  const res = await fetch('...')
  const data = await res.json()
  return { props: { data } }
};
 
export default function Page(props) {
  return <>...</>
}

React Server Component (RSC)

• サーバーでしか実行されないコンポーネントの概念を導入
• Next.js 専用の Webpack プラグイン: react-server-dom-webpack
  react-server-dom-esm
• 概念的には Next.js 専用ではない

// src/app/sub/page.tsx
import {transform} from "@babel/core";

async function loadData() {
  return 'export const x = 1';
}
// async component
async function Compiled() {
  const data = await loadData();
  // サーバーのみの処理
  const result = transform(data).code;
  return <pre>{result}</pre>
};
export default () => <Compiled />;

// Counter Component
import {
  component$,
  useStore
} from "@builder.io/qwik";
const Counter =  component$(() => {
  const store = useStore({ count: 0 });
  return <button type="button"
    onClick$={() => store.count++}>
    {store.count}
  </button>;
});

// output(html)
<button type="button"
  on:click="q-dbdde6e9.js#s_ccRkpRA0Ias[0]"
  q:key="H1_0" q:id="8">0
</button>

極端な実例: Qwik

• Qwik: SSR前提でクライアント処理を最小限にしたUIライブラリ
• QwikCity: Qwik の Next 風フレームワーク
• TSX ベースの React 方言