demo · v132

How each bundler should emit the magic comment

A magic comment looks easy but bundlers rewrite, minify, and split your code. Use the lab to check whether the emitted bundle still starts with a valid //# allFunctionsCalledOnLoad annotation, then compare how entry, vendor, eager route, deferred route, and polyfill chunks should be treated.

bundle output lab

The spec-level rule is narrow: the user agent scans leading comments and looks for comment content matching # allFunctionsCalledOnLoad with optional whitespace. A stripped, renamed, or moved comment is just an ordinary JavaScript comment and will not carry the compile hint.

bundler chunk emitted comment

verdict

Choose a bundle output and analyze it.

Chunk recommendation will appear here.

Parser check has not run.

generated bundle top

esbuild supported

Preserves comments matching /^\/\/#/ when --legal-comments=inline or banner.

esbuild app.js --bundle \
  --legal-comments=inline \
  --banner:js="//# allFunctionsCalledOnLoad"

Rollup supported

Use the output.banner option. Note: only applies to the entry chunk — need per-chunk banner via plugin for split bundles.

// rollup.config.js
export default {
  output: {
    banner: "//# allFunctionsCalledOnLoad"
  }
};

webpack supported via plugin

BannerPlugin with raw: true to skip the /* ... */ wrap.

plugins: [
  new webpack.BannerPlugin({
    banner: "/*# allFunctionsCalledOnLoad*/",
    raw: true,
  })
]

Vite supported (Rollup under the hood)

Inherits Rollup's banner. Be aware Vite's dev server doesn't hint anything; build does.

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: { banner: "//# allFunctionsCalledOnLoad" }
    }
  }
};

SWC supported

Use jsc.transform.preserveAllComments + bundler-level banner. The hint must be at the very top of the file before any code.

// .swcrc
{
  "jsc": {
    "preserveAllComments": true
  }
}

Terser be careful

Drops all comments by default. Use output.comments: /^#/ to keep magic comments.

// terser config
{
  output: {
    comments: /^#/
  }
}

when to use it — chunk-level decisions

chunk	typical contents	annotate?
entry / main	app shell, initial render, event wiring	yes — almost all called immediately
framework vendor	React, Vue, dependencies	partial — depends on tree-shake quality
route chunk (loaded eagerly)	landing page route	yes
route chunk (deferred)	settings page route	no — lazy parse is what you want
polyfill bundle	conditional polyfills, mostly dead in modern browsers	no