Only scan src in client directory for Tailwind to prevent unnecessary rebuilds
#11945
Conversation
This file contains 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
Manage this branch in SquashTest this branch here: https://laymonagespeed-up-fe-build-z25sr.squash.io |
laymonage
added
type:Cleanup/Optimisation
component:Design system
laymonage
force-pushed
the
speed-up-fe-build
branch
from
73237b4
to
79fccc1
Compare
laymonage
commented
May 10, 2024
| // The directory would still be scanned for files, which would cause | ||
| // the styles to rebuild in a loop. | ||
| // https://tailwindcss.com/docs/content-configuration#styles-rebuild-in-an-infinite-loop | ||
| './client/src/**/*.{js,ts,tsx,mdx}', |
There was a problem hiding this comment.
There are other directories in client other than src and scss, which are storybook and tests. I don't think we need to watch those, but if it's desired we can use either of the following instead:
'./client/[!scss]/**/*.{js,ts,tsx,mdx}''./client/{src,storybook,tests}/**/*.{js,ts,tsx,mdx}'
That still doesn't include the files within client itself I think, but I don't think they're important...
lb-
approved these changes
May 11, 2024
There was a problem hiding this comment.
Thank you @laymonage - I did raise my concerns about our approach when Tailwind was adopted but didn't really know where to start looking into it.
At the time when I was working with this with Thibaud and others we never really solved it, I thought it was just my docker setup maybe.
Let's get this in.
|
OK so I've compared the resulting build and it seems to be identical. wagtail on main [$⇡] via v20.9.0 via 🐍 v3.10.5 took 2s
❯ rm -rf wagtail/admin/static
wagtail on main [$⇡] via v20.9.0 via 🐍 v3.10.5
❯ npm run build
> wagtail@1.0.0 build
> webpack --config ./client/webpack.config.js --mode production
assets by path wagtail/admin/static/wagtailadmin/ 2.17 MiB 63 assets
assets by path wagtail/images/static/wagtailimages/ 51.3 KiB 12 assets
assets by path wagtail/contrib/ 22.8 KiB
assets by path wagtail/contrib/typed_table_block/static/typed_table_block/ 15.4 KiB 3 assets
asset wagtail/contrib/table_block/static/table_block/js/table.js 6.45 KiB [emitted] [minimized] (name: table)
asset wagtail/contrib/search_promotions/static/wagtailsearchpromotions/js/query-chooser-modal.js 893 bytes [emitted] [from: wagtail/contrib/search_promotions/static_src/wagtailsearchpromotions/js/query-chooser-modal.js] [copied] [minimized]
assets by path wagtail/documents/static/wagtaildocs/js/*.js 8.62 KiB
asset wagtail/documents/static/wagtaildocs/js/add-multiple.js 2.89 KiB [emitted] [from: wagtail/documents/static_src/wagtaildocs/js/add-multiple.js] [copied] [minimized]
+ 3 assets
assets by path wagtail/snippets/static/wagtailsnippets/js/*.js 3.77 KiB
asset wagtail/snippets/static/wagtailsnippets/js/snippet-chooser-telepath.js 1.93 KiB [emitted] [minimized] (name: snippet-chooser-telepath)
asset wagtail/snippets/static/wagtailsnippets/js/snippet-chooser.js 1.83 KiB [emitted] [minimized] (name: snippet-chooser)
asset wagtail/embeds/static/wagtailembeds/js/embed-chooser-modal.js 358 bytes [emitted] [from: wagtail/embeds/static_src/wagtailembeds/js/embed-chooser-modal.js] [copied] [minimized]
asset wagtail/users/static/wagtailusers/js/group-form.js 244 bytes [emitted] [from: wagtail/users/static_src/wagtailusers/js/group-form.js] [copied] [minimized]
runtime modules 129 KiB 326 modules
orphan modules 1.13 MiB [orphan] 189 modules
built modules 3.54 MiB (javascript) 263 KiB (css/mini-extract) [built]
modules by path ./node_modules/ 2.49 MiB 261 modules
modules by path ./client/src/ 1.04 MiB 56 modules
modules by path ./wagtail/ 200 bytes (javascript) 263 KiB (css/mini-extract)
modules by path ./wagtail/admin/static_src/wagtailadmin/scss/ 150 bytes (javascript) 262 KiB (css/mini-extract)
modules by path ./wagtail/admin/static_src/wagtailadmin/scss/panels/*.scss 100 bytes (javascript) 23.6 KiB (css/mini-extract) 4 modules
modules by path ./wagtail/admin/static_src/wagtailadmin/scss/*.scss 50 bytes (javascript) 238 KiB (css/mini-extract) 2 modules
modules by path ./wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/*.scss 50 bytes (javascript) 1.79 KiB (css/mini-extract)
./wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_ta...(truncated) 50 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_ta...(truncated) 1.79 KiB [built] [code generated]
external "jQuery" 42 bytes [built] [code generated]
webpack compiled successfully in 55507 ms
wagtail on main [$⇡] via v20.9.0 via 🐍 v3.10.5 took 56s
❯ shasum wagtail/admin/static/wagtailadmin/css/core.css
e9ff6159385b42824ee83cb7ffa780bbe5e43dc0 wagtail/admin/static/wagtailadmin/css/core.css
wagtail on main [$⇡] via v20.9.0 via 🐍 v3.10.5
❯ shasum wagtail/admin/static/wagtailadmin/css/core.js
da39a3ee5e6b4b0d3255bfef95601890afd80709 wagtail/admin/static/wagtailadmin/css/core.js
wagtail on main [$⇡] via v20.9.0 via 🐍 v3.10.5
❯ git switch speed-up-fe-build
Switched to branch 'speed-up-fe-build'
wagtail on speed-up-fe-build [$] via v20.9.0 via 🐍 v3.10.5
❯ rm -rf wagtail/admin/static
wagtail on speed-up-fe-build [$] via v20.9.0 via 🐍 v3.10.5
❯ npm run build
> wagtail@1.0.0 build
> webpack --config ./client/webpack.config.js --mode production
assets by status 2.17 MiB [emitted]
assets by path wagtail/admin/static/wagtailadmin/js/ 1.89 MiB 39 assets
assets by path wagtail/admin/static/wagtailadmin/images/ 27.8 KiB 18 assets
assets by path wagtail/admin/static/wagtailadmin/css/ 262 KiB
assets by path wagtail/admin/static/wagtailadmin/css/panels/ 23.6 KiB 4 assets
assets by chunk 238 KiB (name: wagtail/admin/static/wagtailadmin/css/core) 2 assets
assets by status 87 KiB [compared for emit]
assets by path wagtail/images/static/wagtailimages/ 51.3 KiB 12 assets
assets by path wagtail/contrib/ 22.8 KiB 5 assets
assets by path wagtail/documents/static/wagtaildocs/js/*.js 8.62 KiB 4 assets
assets by path wagtail/snippets/static/wagtailsnippets/js/*.js 3.77 KiB 2 assets
asset wagtail/embeds/static/wagtailembeds/js/embed-chooser-modal.js 358 bytes [compared for emit] [from: wagtail/embeds/static_src/wagtailembeds/js/embed-chooser-modal.js] [copied] [minimized]
asset wagtail/users/static/wagtailusers/js/group-form.js 244 bytes [compared for emit] [from: wagtail/users/static_src/wagtailusers/js/group-form.js] [copied] [minimized]
runtime modules 129 KiB 326 modules
orphan modules 1.13 MiB [orphan] 189 modules
built modules 3.54 MiB (javascript) 263 KiB (css/mini-extract) [built]
modules by path ./node_modules/ 2.49 MiB 261 modules
modules by path ./client/src/ 1.04 MiB 56 modules
modules by path ./wagtail/ 200 bytes (javascript) 263 KiB (css/mini-extract)
modules by path ./wagtail/admin/static_src/wagtailadmin/scss/ 150 bytes (javascript) 262 KiB (css/mini-extract)
modules by path ./wagtail/admin/static_src/wagtailadmin/scss/panels/*.scss 100 bytes (javascript) 23.6 KiB (css/mini-extract) 4 modules
modules by path ./wagtail/admin/static_src/wagtailadmin/scss/*.scss 50 bytes (javascript) 238 KiB (css/mini-extract) 2 modules
modules by path ./wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/*.scss 50 bytes (javascript) 1.79 KiB (css/mini-extract)
./wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_ta...(truncated) 50 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_ta...(truncated) 1.79 KiB [built] [code generated]
external "jQuery" 42 bytes [built] [code generated]
webpack compiled successfully in 17135 ms
wagtail on speed-up-fe-build [$] via v20.9.0 via 🐍 v3.10.5
❯ shasum wagtail/admin/static/wagtailadmin/css/core.css
e9ff6159385b42824ee83cb7ffa780bbe5e43dc0 wagtail/admin/static/wagtailadmin/css/core.css
wagtail on speed-up-fe-build [$] via v20.9.0 via 🐍 v3.10.5 took 17s
❯ shasum wagtail/admin/static/wagtailadmin/css/core.js
da39a3ee5e6b4b0d3255bfef95601890afd80709 wagtail/admin/static/wagtailadmin/css/core.js |
… rebuilds https://tailwindcss.com/docs/content-configuration#styles-rebuild-in-an-infinite-loop This speeds up the FE production build from 60s to ~21s on my machine, and also speeds up hot rebuilds to just ~3s
laymonage
force-pushed
the
speed-up-fe-build
branch
from
79fccc1
to
c8aeee9
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Running
npm run buildornpm starttakes excruciatingly long, not sure since when but it started a few releases back.Per https://tailwindcss.com/docs/content-configuration#styles-rebuild-in-an-infinite-loop, we should make sure we don't accidentally specify our CSS directory (
client/scss). We've specified the file name to only{js,ts,tsx,mdx}, but as explained in Tailwind's docs, webpack would still watch entire directories. As a result, it seems to cause some kind of a feedback loop in Webpack's file watching mechanism, which leads to the slow build.Limiting Tailwind's
contentglob forclienttoclient/srcseems to fix it. This speeds up the FE production build from 60s to ~21s on my machine, and also speeds up hot rebuilds to under 3s.The build time is now comparable to if you run
npm run buildwith an empty Tailwindcontentlist, which suggests that this performance is close to the "baseline" of not using Tailwind. Of course, I've verified that the styles actually do get compiled (by deletingwagtail/admin/staticand re-running the build). I haven't checked whether the result is identical, though...