[gh385] Minify the CSS and JS for production build #405

sanG-github · 2023-05-12T07:56:51Z

close #385

What happened 👀

We customize the build process between development and production, as we want the production build to be as minimal as possible.

Insight 📝

With JS, we config the esbuild configuration:

Add minify option to be true in the case we don't have the --watch option (production)

With CSS, we separate two scripts:

build:css for the production that included the '--style=compressed' option.
build:css-dev for the development environment, without the compressed option.

Proof Of Work 📹

Minify JS	Minify CSS

Generated package.json

Generated Procfile.dev

.template/variants/web/package.json.rb

olivierobert · 2023-05-30T04:49:47Z

.template/variants/web/package.json.rb

@@ -37,9 +37,16 @@
  '--no-source-map',
  '--load-path=node_modules'
 ]
+production_bundled_stylesheet_options = bundled_stylesheet_options + [
+  '--style=compressed'
+]

 run %(npm set-script build "node app/javascript/build.js")
 run %(
  npm set-script build:css \


It would be best to use a prefix here and avoid it below:

npm set-script build:css-production \

So production is special, while dev is the base/standard mode.

Thanks for the suggestion! The default one should be the development environment.

I've updated it in 2c9789c ✅

The build:css-production won't be trigger as no one call that, the https://github.com/rails/cssbundling-rails/blob/main/lib/tasks/cssbundling/build.rake#L20 enhance the css:build by default, we need to go with the Sang's original solution FYI @olivierobert I will open a PR for that cc @sanG-github

malparty

🔥 🚀 🔥

andyduong1920 · 2023-06-06T02:08:26Z

.template/variants/web/app/javascript/build.js

@@ -6,6 +6,7 @@ require('esbuild')
    inject: ['app/javascript/global.js'],
    bundle: true,
    sourcemap: true,


@sanG-github a small comment, we really don't use source map on Production, should we set this as

Suggested change

sourcemap: true,

sourcemap: !watch,

Wd do use sourcemap 😅 You might not but sourcemaps as essential for debugging

@olivierobert , that's interesting, we have --no-source-map for sass, for all environments

rails-templates/.template/variants/web/package.json.rb

Line 37 in b913280

'--no-source-map',

Then, I tried enabling it for a local project, and it was trying to reference the file by its path 😄

I searched around and it seems like an existing issue for cssbundling-rails

I was wondering if you ever were able to use source maps for SCSS assets in a Rails project?

@tyrro Nice catch! :o Should we create a dedicated issue to investigate this?

@olivierobert but we don't debugging on Production 🤔

ok, after checking this article https://css-tricks.com/should-i-use-source-maps-in-production/ it's better to have the source map information in the Production build cc @tyrro @olivierobert @malparty

There are 2 benefits

@malparty if we have a chance, we could just remove this config on the same PR ;)

@andyduong1920 , but source-map doesn't work for cssbundling-rails (please refer to my last comment).

So if we remove --no-source-map option, it'll try to generate the source map, which will result in the following:

Screen.Recording.2023-06-16.at.4.30.16.PM.mov

which is not very helpful for debugging 😄

@malparty , IMHO it's not worth it at this moment.
jsbundling-rails support source-map (and we are using it too btw), css-bunding-rails yet to support it. So, I'd keep it as it is regarding the --no-source-map option!

@andyduong1920 lets create an issue for that :)

Issued created #414 @malparty @tyrro

.template/variants/web/app/javascript/build.js

malparty · 2023-06-16T09:10:31Z

@sanG-github rebase needed 🙇

malparty · 2023-06-21T04:02:05Z

@tyrro rebase needed and then we can merge this one 🚀

tyrro · 2023-06-21T04:55:38Z

@malparty , I'll tag @sanG-github so that he can do the rebasing for me 🙈 😏

sanG-github added the type : feature label May 12, 2023

sanG-github self-assigned this May 12, 2023

sanG-github requested review from rosle, andyduong1920, bterone, byhbt, carryall, hoangmirs, longnd, malparty and tyrro as code owners May 12, 2023 07:56

sanG-github marked this pull request as draft May 12, 2023 07:57

sanG-github marked this pull request as ready for review May 18, 2023 09:03

sanG-github force-pushed the feature/gh-385-minify-css-js branch from 2ce57f1 to aeb4bd7 Compare May 26, 2023 14:23

olivierobert reviewed May 30, 2023

View reviewed changes

sanG-github added a commit that referenced this pull request May 30, 2023

[#405] Update name for the base stylesheet options

2c9789c

sanG-github requested a review from olivierobert May 30, 2023 11:47

sanG-github added a commit that referenced this pull request May 30, 2023

[#405] Update package_json_spec.rb

6561346

malparty approved these changes Jun 5, 2023

View reviewed changes

andyduong1920 reviewed Jun 6, 2023

View reviewed changes

olivierobert approved these changes Jun 13, 2023

View reviewed changes

sanG-github force-pushed the feature/gh-385-minify-css-js branch from 2c9789c to 9639680 Compare June 16, 2023 07:43

sanG-github requested a review from andyduong1920 June 16, 2023 07:44

tyrro approved these changes Jun 16, 2023

View reviewed changes

andyduong1920 approved these changes Jun 16, 2023

View reviewed changes

sanG-github added 2 commits June 21, 2023 16:15

[#385] Minify JS

2d2532f

[#385] Minify CSS

dea4c83

sanG-github added 3 commits June 21, 2023 16:16

[#385] Update merge array method

9cc72f7

[#385] Update name for the base stylesheet options

be10c45

[#385] Add tests for package_json

4d587c1

sanG-github force-pushed the feature/gh-385-minify-css-js branch from 9639680 to 4d587c1 Compare June 21, 2023 09:17

malparty merged commit 7c837f9 into develop Jun 22, 2023

malparty deleted the feature/gh-385-minify-css-js branch June 22, 2023 03:09

malparty mentioned this pull request Jun 22, 2023

Release 5.6.0 #415

Merged

andyduong1920 mentioned this pull request Jul 4, 2023

Correct the build:css task #427

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[gh385] Minify the CSS and JS for production build #405

[gh385] Minify the CSS and JS for production build #405

sanG-github commented May 12, 2023 •

edited

Loading

olivierobert May 30, 2023

sanG-github May 30, 2023

andyduong1920 Jul 4, 2023

malparty left a comment

andyduong1920 Jun 6, 2023

olivierobert Jun 13, 2023

tyrro Jun 16, 2023

malparty Jun 16, 2023

andyduong1920 Jun 16, 2023

andyduong1920 Jun 16, 2023 •

edited

Loading

andyduong1920 Jun 16, 2023

tyrro Jun 16, 2023

malparty Jun 21, 2023

andyduong1920 Jun 22, 2023

malparty commented Jun 16, 2023

malparty commented Jun 21, 2023

tyrro commented Jun 21, 2023

[gh385] Minify the CSS and JS for production build #405

[gh385] Minify the CSS and JS for production build #405

Conversation

sanG-github commented May 12, 2023 • edited Loading

What happened 👀

Insight 📝

Proof Of Work 📹

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

malparty left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andyduong1920 Jun 16, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

malparty commented Jun 16, 2023

malparty commented Jun 21, 2023

tyrro commented Jun 21, 2023

sanG-github commented May 12, 2023 •

edited

Loading

andyduong1920 Jun 16, 2023 •

edited

Loading