Turbopack: cache webfonts locally between builds#92795
Turbopack: cache webfonts locally between builds#92795
Conversation
Merging this PR will not alter performance
Comparing Footnotes
|
Failing test suitesCommit: f5ffe0b | About building and testing Next.js
Expand output● create-next-app with package manager npm › should use npm for --use-npm flag ● create-next-app with package manager npm › should use npm when user-agent is npm
Expand output● create-next-app --app (App Router) › should create JavaScript project with --js flag ● create-next-app --app (App Router) › should create TypeScript project with --ts flag ● create-next-app --app (App Router) › should create project inside "src" directory with --src-dir flag ● create-next-app --app (App Router) › should create TailwindCSS project with --tailwind flag ● create-next-app --app (App Router) › should create an empty project with --empty flag ● create-next-app --app (App Router) › should create an empty TailwindCSS project with --empty flag
Expand output● create-next-app --example › should fall back to default template if failed to download ● create-next-app --example › should create if --example value is default
Expand output● pnpm-workspace-root › should detect root directory from pnpm-workspace.yaml and allow imports from outside app dir ● pnpm-workspace-root › should not have multiple lockfiles warning when pnpm-workspace.yaml is present
Expand output● create-next-app Biome configuration › should run biome check successfully on generated TypeScript project ● create-next-app Biome configuration › should run biome check successfully on generated JavaScript project ● create-next-app Biome configuration › should format code with biome successfully ● create-next-app Biome configuration › should show errors when biome detects issues
Expand output● create-next-app --api (Headless App) › should create JavaScript project with --js flag ● create-next-app --api (Headless App) › should create TypeScript project with --ts flag ● create-next-app --api (Headless App) › should create project inside "src" directory with --src-dir flag
Expand output● create-next-app --no-app (Pages Router) › should create JavaScript project with --js flag ● create-next-app --no-app (Pages Router) › should create TypeScript project with --ts flag ● create-next-app --no-app (Pages Router) › should create project inside "src" directory with --src-dir flag ● create-next-app --no-app (Pages Router) › should create TailwindCSS project with --tailwind flag ● create-next-app --no-app (Pages Router) › should create an empty project with --empty flag ● create-next-app --no-app (Pages Router) › should create an empty TailwindCSS project with --empty flag
Expand output● create-next-app prompts › should not prompt user for choice and use defaults if --yes is defined ● create-next-app prompts › should not prompt user for choice and use defaults if --yes is defined ● create-next-app prompts › should use recommended defaults when user selects that option ● create-next-app prompts › should use recommended defaults when user selects that option
Expand output● CNA options matrix - app › --app --js --import-alias=@acme/* --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --js --import-alias=@acme/* --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --js --import-alias=@acme/* --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --js --import-alias=@acme/* --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --js --import-alias=@/* --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --js --import-alias=@/* --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --js --import-alias=@/* --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --js --import-alias=@/* --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --js --no-import-alias --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --js --no-import-alias --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --js --no-import-alias --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --js --no-import-alias --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --ts --import-alias=@acme/* --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --ts --import-alias=@acme/* --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --ts --import-alias=@acme/* --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --ts --import-alias=@acme/* --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --ts --import-alias=@/* --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --ts --import-alias=@/* --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --ts --import-alias=@/* --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --ts --import-alias=@/* --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --ts --no-import-alias --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --ts --no-import-alias --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - app › --app --ts --no-import-alias --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - app › --app --ts --no-import-alias --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --js --import-alias=@acme/* --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --js --import-alias=@acme/* --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --js --import-alias=@acme/* --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --js --import-alias=@acme/* --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --js --import-alias=@/* --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --js --import-alias=@/* --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --js --import-alias=@/* --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --js --import-alias=@/* --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --js --no-import-alias --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --js --no-import-alias --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --js --no-import-alias --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --js --no-import-alias --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --ts --import-alias=@acme/* --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --ts --import-alias=@acme/* --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --ts --import-alias=@acme/* --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --ts --import-alias=@acme/* --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --ts --import-alias=@/* --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --ts --import-alias=@/* --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --ts --import-alias=@/* --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --ts --import-alias=@/* --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --ts --no-import-alias --eslint --src-dir --react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --ts --no-import-alias --eslint --src-dir --react-compiler --no-agents-md --no-tailwind ● CNA options matrix - pages › --no-app --ts --no-import-alias --eslint --no-src-dir --no-react-compiler --no-agents-md --tailwind ● CNA options matrix - pages › --no-app --ts --no-import-alias --eslint --no-src-dir --no-react-compiler --no-agents-md --no-tailwind |
23be12a to
f5ffe0b
Compare
Each time a devserver / build starts,
next/font/googlereaches out to remotely fetch the webfont+CSS files. This makes local development dependent on your network connection.With this change, we cache the files locally in
.next/cache/google-fonts. The CSS and font files are stored uniquely by a hash of the URL.When Turbopack looks for a font, it first checks this cache before going to the local server. This means during normal development, you'll now only fetch a font when you first add the code that references it. All future server starts / builds should be able to use the cached version -- no need for an active network connection, go develop on a plane or in a locked-down sandbox!
I also added a retry loop that attempts to fetch fonts 3 times. This is what the Webpack loader already does today, but Turbopack only tries once to resolve fonts.
There are tests that mock the raw values of fonts with an env variable. This still supports
NEXT_FONT_GOOGLE_MOCKED_RESPONSESso these tests pass.It also allows you to specify an env variable for a custom cache directory for the fonts (
NEXT_FONT_CACHE_DIR). Someone, somewhere might need this for locally cached fonts.