Frontend: Production Notes
Pakyow makes it easy to serve assets in a production environment, automatically applying best practices like fingerprinting, minification, and caching. In this guide we'll cover the key differences between serving assets in development and production environments.
Compiling assets during prelaunch
In a local development environment, Pakyow compiles and serves assets on demand. When an asset changes, the change is automatically included the next time the asset is requested. This is useful for development but isn't performant enough for a production environment.
When running in production the asset pipeline should be built before the project boots, with compiled assets served from the public
directory. Builds can be initiated with the pakyow assets:precompile
task.
Most projects will use the prelaunch pattern to perform all the tasks required before the project boots in production. For convenience, the precompile task is automatically added as a prelaunch command.
Fingerprinting assets
Assets are fingerprinted when built in production. Fingerprints allow assets to be cached by browsers indefinitely by attaching a fingerprint, or unique identifier based on the asset content, to the name of the asset. When the content of an asset changes the fingerprint changes along with it, causing the browser to replace the cached version with the updated asset.
Each fingerprint is a unique identifier generated from the contents of an asset's source files. Let's look at an example based on this stylesheet:
p {
color: red;
}
Here's the unique fingerprint that Pakyow will generate for the stylesheet:
3613c173b8f70052c8d86d555dfad0ea
This identifier is added to each asset reference in the view templates. Assume the stylesheet is loaded into a view template like this:
<link rel="stylesheet" type="text/css" href="/stylesheets/example.css">
In production, the asset href will be updated to include the fingerprint:
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/example__3613c173b8f70052c8d86d555dfad0ea.css">
Pakyow will instruct the browser to cache the stylesheet so that it doesn't need to be fetched on subsequent requests. When the stylesheet changes it will receive a new fingerprint and the browser will download the updated version of the stylesheet.
Disable fingerprinting
To disable fingerprinting, just set the assets.fingerprint
configuration option for the production environment:
Pakyow.app do
configure :production do
config.assets.fingerprint = false
end
end
Caching assets
When Pakyow fulfills a request for a fingerprinted asset, it responds with several cache headers that tell the browser how to cache the asset.
Here's a list of headers that are set:
Header | Value |
---|---|
Age | The number of seconds since the asset was modified. |
Cache-Control | public, max-age=31536000 ; tells the browser to cache the asset for one year. |
Vary | Accept-Encoding ; read more about this header → |
Last-Modified | The date the asset was last modified. |
These settings are appropriate for most applications.
Disable caching
Caching can be disabled by setting the assets.cache
configuration option for the production environment:
Pakyow.app do
configure :production do
config.assets.cache = false
end
end
Minifying assets
Pakyow automatically minifies stylesheets and scripts in production. This can reduces the file sizes significantly, improving the performance of your application for end users.
Scripts are minified with Uglifier, while stylesheets are always minified with the Scss preprocessor (even if your stylesheets are written in plain css).
Disable minification
Minification can be disabled by setting the assets.minify
configuration option for the production environment:
Pakyow.app do
configure :production do
config.assets.minify = false
end
end