Ahead-of-time Builds

Fresh enables you to pre-optimize frontend assets before the code is deployed. During that process the code for Islands will be compressed and optimized, so that Fresh can send as little code as possible to the browser. Depending on the amount of code an island needs, this process can take several seconds if done on the fly server-side.

Doing those optimizations ahead-of-time and deploying the already optimized assets alongside with your code, allows Fresh to treat them as like any other static file and can serve it immediately without any further processing. On pages with islands, having to do no processing greatly speeds up page load times.

Plugins can build static assets during ahead-of-time builds. This can be used to pre-process or generate CSS files, for example.

Creating an optimized build#

To have Fresh optimize all the assets, run one of the following commands:

# As a task in newer Fresh projects
deno task build
# or invoke it manually
deno run -A dev.ts build

This will create a _fresh folder in the project directory. That folder contains the optimized assets and a snapshot.json file which includes some metadata for Fresh.

Any other static files generated by plugins will be stored in the _fresh/static subfolder. They will be served the same as other static files.

InfoThe _fresh folder should not be committed to the repository. Add an entry in the .gitignore file to ensure that it is not committed. Create that file at the root of your git repository if not present.

.gitignore

# Ignore fresh build directory
_fresh/

Running Fresh with optimized assets#

When Fresh is started in non-development mode (usually via main.ts), Fresh will automatically pick up optimized assets when a _fresh folder exists. If found, Fresh will print the following message to the terminal:

Using snapshot found at /path/to/project/_fresh

Deploying an optimized Fresh project#

If you are deploying a Fresh project to Deno Deploy, you can use ahead-of-time builds to optimize the assets before deploying them. This will make your application load quicker.

Open the Deno Deploy dashboard for your project and head to the "Git Integration" section in the project settings. Enter deno task build in the “Build command” field and save. This will switch your Deno Deploy project to use ahead-of-time builds.

Migrating existing projects with Plugins#

If you’re using Fresh plugins, extract them into a fresh.config.ts file, so that both the dev.ts and main.ts script have access to them.

import { defineConfig } from "$fresh/server.ts";
import twindPlugin from "$fresh/plugins/twind.ts";
import twindConfig from "./twind.config.ts";

export default defineConfig({
  plugins: [twindPlugin(twindConfig)],
});

import { start } from "$fresh/server.ts";
import manifest from "./fresh.gen.ts";
import config from "./fresh.config.ts";

await start(manifest, config);

import dev from "$fresh/dev.ts";
import config from "./fresh.config.ts";

await dev(import.meta.url, "./main.ts", config);