-
-
Notifications
You must be signed in to change notification settings - Fork 285
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Replace sprockets-rails
with propshaft
#1910
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jagthedrummer Just testing with another BT app that had a .css.erb
file, which sprockets
just picked up automatically, but not propshaft
.
Maybe we'll need to document that issue as part of the upgrade doc when shipping this?
Otherwise, my only other concern is about asset sizes on Heroku and Render out of the box. Maybe BT's config files for Heroku on Render need to be tweaked? I don't know enough about that.
Thanks for taking a look, @pascallaliberte! I think those are both good suggestions. We should definitely call out the |
I did some work on configuring
That's with this configuration in # These prevent `propshaft` from adding a bunch of extra, unused assets to publis/assets during precompilation.
Rails.application.config.assets.excluded_paths = [
Avo::Engine.root.join("app/assets/builds"),
Avo::Engine.root.join("app/assets/config"),
Avo::Engine.root.join("app/assets/stylesheets"),
Avo::Engine.root.join("app/assets/svgs"),
Cloudinary::Engine.root.join("vendor/assets/html"),
Cloudinary::Engine.root.join("vendor/assets/javascripts"),
Doorkeeper::Engine.root.join("vendor/assets/stylesheets"),
BulletTrain::Themes::Light::Engine.root.join("app/assets/config"),
BulletTrain::Themes::Light::Engine.root.join("app/assets/stylesheets"),
] |
propshaft is the new gem for the asset pipeline that replaces sprockets. Moving to
propshaft
fromsprockets
should make it easier to transition to usingimportmaps
.propshaft
takes a more simplified approach and doesn't provide as many features assprockets
, but I don't think that we were really depending any of those features. We already usejsbuilding-rails
andcssbundling-rails
to handle bundling and transpiling.js
and.css
files.After making these changes I ran
rails assets:clobber
to make sure that I wasn't seeing old assets, and then I ranbin/dev
to launch the dev server. Everything seems to work as expected. I confirmed that the color picker, date picker, super selects, dependent fields, and mobile slide out menu are all working.I ran
rails assets:precompile
to make sure that precompilation works.Details about differences between output under
propshaft
andsprockets
I ran the following to compare precompilation output from sprockets with the output from propshaft both in production mode and in development mode. (The
main
branch is using sprockets, and thejeremy/propshaft
branch is using propshaft.)The biggest differences that I can see are:
propshaft
picks up many more files for precompilation thansprockets
propshaft
does not produce gzipped/compressed versions of the filespropshaft
does not obfuscate.js
code in production modepropshaft
picks up many more files for precompilation thansprockets
There's a considerable difference in the size of the generated directories.
That size difference is because sprockets only precompiles assets that are explicitly requested via
config.assets_paths
but propshaft grabs everything in anapp/assets
directory, both from the application itself and from any gems.sprockets
produces 4 directories containing 86 files.propshaft
produces 21 directories containing 1787 filesIf we need to prevent compiliation of some of these additional files with
propshaft
we can use theconfig.assets.excluded_paths
configuration option.See this gist for a comparison between
tree assets_propshaft_production/
andtree assets_sprockets_production/
. (Including that info here makes the PR description too long for GitHub validations. 😢)propshaft
does not produce gzipped/compressed versions of the filesUsing sprockets the precompiliation process will produce gzipped versions of assets, but propshaft does not.
Many webservers/CDNs can dynamically compress assets as they're being served, so this may not be an issue. If we (or a downstream app) need to produce gzipped versions we could handle that in a separate post-precompilation step.
Precompiled File Content Differences
The output of the generated
.css
files is almost identical, with the only differences being related to fingerprinting and sourcemap locations.For
.js
files, in production mode they are uglified/obfuscated withsprockets
but not withpropshaft
. But indevelopment
mode the output is almost identical. The only difference is related to the sourcemap location.There is a decent difference in size of the compiled js file in production mode. This is due to the obfuscation step also removing line breaks and using shorter obfuscated variable names.
We could potentially use something like
esbuild-plugin-obfuscator
to obfuscate the code during theesbuild
process. But ideally we'll be able to move away from usingesbuild
at all once we've migrated toimportmaps
, so it may not be worth it to complicate things with that plugin.After manually gzipping the production assets that
propshaft
produces they're not that much larger than the gzipped version thatsprockets
produces.How to test this PR
To test this PR you can do the following to start a new BT project that uses this branch as the base (instead of the
main
branch from the starter repo).