Frontend: webpack build optimizations — contenthash and persistent cache#1366
Merged
gusthoff merged 4 commits intoJun 6, 2026
Conversation
…hash] Replace [fullhash] with [contenthash] in all three places in webpack.common.cjs: - output.filename: '[name].[fullhash].js' → '[name].[contenthash].js' - MiniCssExtractPlugin filename: '[name].[fullhash].css' → '[name].[contenthash].css' - font_rule name option: '[name].[ext]?[fullhash]' → '[name].[ext]?[contenthash]' [fullhash] is a build-level hash — it rotates every filename whenever any module changes. [contenthash] is a per-chunk hash that only changes when the content of that specific chunk changes. Unchanged chunks therefore keep their filename across releases, improving CDN and browser cache hit rate.
Add a cache block to webpack.common.cjs:
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename],
},
},
webpack 5's filesystem cache serializes the resolved module graph to
node_modules/.cache/webpack/ after a cold build. Subsequent builds restore
from that cache, skipping module resolution and giving a significant
warm-build speedup for local development and CI (when the cache directory
is restored between runs).
The buildDependencies.config entry ensures that any change to
webpack.common.cjs itself (or its transitive require()s) invalidates the
cache and forces a full rebuild, preventing stale cache hits after config
changes.
The cache directory is already covered by the node_modules entry in
frontend/.gitignore, so no .gitignore change is needed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two low-effort webpack 5 optimizations to the
frontend/webpack.common.cjsconfiguration:
[fullhash]with[contenthash]on all outputfilenames (JS, CSS, fonts).
[contenthash]hashes only the content of eachindividual chunk, so unchanged chunks keep their filename across builds.
[fullhash]rotated every filename on any change to any module.cache. Serializes resolved modules to
node_modules/.cache/webpack/after acold build; subsequent builds restore from cache, giving a significant warm-
build speedup for local development and CI (when the cache directory is
restored between runs).
Changes
frontend/webpack.common.cjs:output.filenameandMiniCssExtractPlugin.filenamechanged from[fullhash]to[contenthash]frontend/webpack.common.cjs:font_rulename option changed from[name].[ext]?[fullhash]to[name].[ext]?[contenthash]frontend/webpack.common.cjs:cache: { type: 'filesystem', ... }blockadded
Testing / Validation
Tested on web VM — Node.js 24, pnpm 11, webpack 5.107.2.
contenthash independence: edited one string literal in
dom-utils.ts(which is imported by the entry point). Only the
main.jschunk hash changed(
2277acdf…→02e595ad…); the vendor split-chunk (634.12d978….js) andthe CSS chunk (
main.7c35a299….css) kept their filenames unchanged. Revertingthe edit restored the original hash, confirming deterministic contenthash
behaviour.
Persistent cache — warm-build speedup:
identical to the cold build
webpack.common.cjstriggereda full rebuild (19.8 s), confirming that
buildDependencies.configworksas expected
Notes
The
node_modules/.cache/webpack/cache directory is already excluded fromgit via the
node_modulesentry infrontend/.gitignore. For CI warm-buildbenefit, this directory should be cached in the GitHub Actions workflow (see
the "Cache build artifacts across CI runs" proposal in
LEARN_INFRASTRUCTURE_IMPROVEMENTS.md).Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com