Skip to content

Instantly share code, notes, and snippets.

@sokra

sokra/guide.md Secret

Last active October 12, 2022 05:55
Show Gist options
  • Star 46 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save sokra/ff1b0290282bfa2c037bdb6dcca1a7aa to your computer and use it in GitHub Desktop.
Save sokra/ff1b0290282bfa2c037bdb6dcca1a7aa to your computer and use it in GitHub Desktop.
webpack & caching

webpack & caching

Level 0: no

Nothing is cached, browser requests every asset and server returns it with 200.

This always works, nothing to do.

Level 1: etag

Assets are cached but revalidated, browser request cached assets with Modified-Date/Etag and server returns 304 when the asset has not changed.

This doesn't require any special build configuration. Server configuration for Modified-Date or Etag required (Easy).

Level 2: compilation

Assets are cached immutable and not revalidated, browser doesn't request cached assets at all. Any change to the code base invalidates all chunks. Font, images, etc. are only invalidated on change.

Use [hash] in the configuration options for output.filename and output.chunkFilename. Note that the default for output.chunkFilename is "[id]." + output.filename so you could omit it.

Use the resulting output filename in the HTML. This means you need to generate it as it changes on each compilation.

Use [hash] in the name of the file-loader/url-loader. Note that this is the default.

Do configure the server to emit a long max age.

This level could be worse than level 1 if your compilation changes often and you have many assets.

Level 3: chunk

Assets are cached immutable and not revalidated, browser doesn't request cached assets at all. Changes to the code base invalidate only affected chunks. Font, images, etc. are only invalidated on change.

Use [chunkhash] in the configuration options for output.filename and output.chunkFilename. Note that the default for output.chunkFilename is "[id]." + output.filename so you could omit it.

Use an inlined manifest chunk to move the chunkhash mapping into the HTML file. (CommonsChunkPlugin with minChunks: Infinity and inline the resulting file) example

Use the resulting output filename in the HTML.

Use [hash] in the name of the file-loader/url-loader. Note that this is the default.

Use an approach to avoid that module ids change between compilations. This means either use records, NamedModulesPlugin or HashedModuleIdsPlugin. Each one has disadvantages. I would recommend records if your infrastructure allow it.

records: You need to pass a state file between compilations.

NamedModulesPlugin: You leak paths of your modules. Doesn't avoid that chunk ids change.

HashedModuleIdsPlugin: This makes compression less efficient. Doesn't avoid that chunk ids change.

Don't use [hash] in the output.publicPath.

Don't use HMR, but as this is a production configuration you probably not use it here anyway.

Do configure the server to emit a long max age.

Have fun

Sincerely

@sokra

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment