fix: reenabling terser plugin for webpack #17205

rusackas · 2021-10-23T04:00:17Z

SUMMARY

In the Webpack 5 upgrade, we inadvertently lost the inclusion of the terser plugin due to the way the CssMinimizerPlugin was loaded. This PR uses webpack's ... syntax to extend existing minimizers and ADD the CssMinimizerPlugin on top of the default terser plugin, rather than it being the ONLY minimizer.

This should shrink the JS bundle/chunk sizes by about 17MB in total.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

Poke all over the place in an ephemeral build and make sure nothing randomly exploded, but I believe this is low risk.

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

codecov · 2021-10-23T04:17:42Z

Codecov Report

Merging #17205 (7a2ac04) into master (4c96ae7) will decrease coverage by 0.00%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #17205      +/-   ##
==========================================
- Coverage   76.95%   76.95%   -0.01%     
==========================================
  Files        1038     1038              
  Lines       55597    55597              
  Branches     7585     7585              
==========================================
- Hits        42787    42785       -2     
- Misses      12560    12562       +2     
  Partials      250      250

Flag	Coverage Δ
hive	`81.51% <ø> (ø)`
javascript	`71.00% <ø> (ø)`
mysql	`81.93% <ø> (ø)`
postgres	`81.94% <ø> (ø)`
presto	`81.81% <ø> (-0.01%)`	⬇️
python	`82.44% <ø> (-0.01%)`	⬇️
sqlite	`81.62% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
superset/db_engine_specs/presto.py	`89.95% <0.00%> (-0.42%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4c96ae7...7a2ac04. Read the comment docs.

etr2460

what an amazing one liner. Thanks for fixing!

kgabryje

Thanks for taking care of that!

graceguo-supercat · 2021-10-23T14:11:04Z

@rusackas could you add a before vs after bundle size comparison?

kgabryje · 2021-10-24T08:53:13Z

@graceguo-supercat
Before ungzipped 30.56MB, gzipped 6.18MB
After ungzipped 13.59MB, gzipped 3.79MB

kgabryje · 2021-10-24T09:21:48Z

Before upgrade to webpack 5 (checked on version 1.3.0)
Ungzipped 23MB
Gzipped 6.56MB

rusackas · 2021-10-25T03:59:42Z

I was trying to run it with npm run build -- --analyzeBundle=true like I've always done, but I'm getting an error:

[webpack-cli] Error: Unknown option '--analyzeBundle=true'

Wondering if it's just me. It must not be webpack's fault if folks were able to run it post-upgrade. Anyone else able to run it on this branch?

villebro · 2021-10-25T06:34:24Z

superset-frontend/webpack.config.js

-    minimizer: [new CssMinimizerPlugin()],
+    minimizer: ['...', new CssMinimizerPlugin()],


Might not make a difference, but the example in the docs places the ellipsis after the plugin, in which case this would be:

minimizer: [new CssMinimizerPlugin(), '...'],

Good catch. Made the change, though it made no discernible difference. ¯\_(ツ)_/¯

graceguo-supercat · 2021-10-25T17:30:03Z

This is what i got after npm run build:

Entrypoints:
  preamble (2.84 MiB)
      vendors.67a6449999841087d80c.entry.js
      7550.0cfaa3644756c68a9121.entry.js
      4772.8a7235054cc5390994dc.entry.js
      preamble.68976f8cb942cbe71c72.entry.js
  theme (610 KiB)
      theme.0b43904ae09035706adf.entry.css
      theme.0b43904ae09035706adf.entry.js
  menu (4.16 MiB)
      vendors.67a6449999841087d80c.entry.js
      7550.0cfaa3644756c68a9121.entry.js
      4772.8a7235054cc5390994dc.entry.js
      4998.ea824400282b4ecbc219.entry.js
      6817.ef8a2900974e5f86b36d.entry.js
      7591.c0aa30a5b3a2ddfd78c1.entry.js
      4654.a3f27e9f9fabb180d766.entry.js
      7341.becfd5f6e5bba3cf5c2c.entry.js
      741.029b1b0c6c246e83d9cd.entry.js
      571.1e3731725b979423f667.entry.js
      6962.7a58e262bb2f151662f1.entry.js
      3853.3ed091c0487bca14aa78.entry.js
      7843.fb124a06379fc9e80f62.entry.js
      2825.72aec20a1f78ee635f53.entry.js
      3375.780234d06d01558caddc.entry.js
      1958.749b2a64de3f3ed5fa9c.entry.js
      4305.19741208645ee2df668d.entry.js
      3880.84f573205940fe80dd44.entry.js
      6020.e57861dfbf3e45325a83.entry.js
      menu.ac9c613178441599b6de.entry.css
      menu.ac9c613178441599b6de.entry.js
  spa (4.31 MiB)
      vendors.67a6449999841087d80c.entry.js
      7550.0cfaa3644756c68a9121.entry.js
      4772.8a7235054cc5390994dc.entry.js
      4998.ea824400282b4ecbc219.entry.js
      6817.ef8a2900974e5f86b36d.entry.js
      7591.c0aa30a5b3a2ddfd78c1.entry.js
      4654.a3f27e9f9fabb180d766.entry.js
      7341.becfd5f6e5bba3cf5c2c.entry.js
      741.029b1b0c6c246e83d9cd.entry.js
      5379.7499c59194663c7d20d7.entry.js
      995.4e2301996ca18a87a402.entry.js
      571.1e3731725b979423f667.entry.js
      9602.c27ea946496c3f072b46.entry.js
      6962.7a58e262bb2f151662f1.entry.js
      3853.3ed091c0487bca14aa78.entry.js
      7843.fb124a06379fc9e80f62.entry.js
      2825.72aec20a1f78ee635f53.entry.js
      3375.780234d06d01558caddc.entry.js
      1958.749b2a64de3f3ed5fa9c.entry.js
      4305.19741208645ee2df668d.entry.js
      3880.84f573205940fe80dd44.entry.js
      489.46c357f15990d355098a.entry.js
      6020.e57861dfbf3e45325a83.entry.js
      spa.94911ea36e7bf9f7d69e.entry.css
      spa.94911ea36e7bf9f7d69e.entry.js
  addSlice (5.24 MiB)
      vendors.67a6449999841087d80c.entry.js
      thumbnail.37aa6b2ad59ed69a49f9.entry.js
      7550.0cfaa3644756c68a9121.entry.js
      4772.8a7235054cc5390994dc.entry.js
      7211.13300bc2a6d1ea873618.entry.js
      6817.ef8a2900974e5f86b36d.entry.js
      7017.d6e556fed5ce939e43d0.entry.js
      7591.c0aa30a5b3a2ddfd78c1.entry.js
      8483.4e3613037e0ee28f82b4.entry.js
      8135.934661370e190a23d8cf.entry.js
      7341.becfd5f6e5bba3cf5c2c.entry.js
      3853.3ed091c0487bca14aa78.entry.js
      1958.749b2a64de3f3ed5fa9c.entry.js
      621.ac8273be37fa168c46b0.entry.js
      3880.84f573205940fe80dd44.entry.js
      addSlice.2158cef264b28d7909ac.entry.js
  explore (6.11 MiB)
      vendors.67a6449999841087d80c.entry.js
      thumbnail.37aa6b2ad59ed69a49f9.entry.js
      7550.0cfaa3644756c68a9121.entry.js
      4772.8a7235054cc5390994dc.entry.js
      4998.ea824400282b4ecbc219.entry.js
      7211.13300bc2a6d1ea873618.entry.js
      6817.ef8a2900974e5f86b36d.entry.js
      7017.d6e556fed5ce939e43d0.entry.js
      7591.c0aa30a5b3a2ddfd78c1.entry.js
      4654.a3f27e9f9fabb180d766.entry.js
      8483.4e3613037e0ee28f82b4.entry.js
      8135.934661370e190a23d8cf.entry.js
      7341.becfd5f6e5bba3cf5c2c.entry.js
      741.029b1b0c6c246e83d9cd.entry.js
      5379.7499c59194663c7d20d7.entry.js
      876.508c66bac09df3662f8a.entry.js
      995.4e2301996ca18a87a402.entry.js
      9602.c27ea946496c3f072b46.entry.js
      8680.d3e6a35c9974e5355172.entry.js
      323.a052f68100e3a36fc6fc.entry.js
      6962.7a58e262bb2f151662f1.entry.js
      3853.3ed091c0487bca14aa78.entry.js
      7843.fb124a06379fc9e80f62.entry.js
      2825.72aec20a1f78ee635f53.entry.js
      3375.780234d06d01558caddc.entry.js
      1958.749b2a64de3f3ed5fa9c.entry.js
      4305.19741208645ee2df668d.entry.js
      621.ac8273be37fa168c46b0.entry.js
      3880.84f573205940fe80dd44.entry.js
      5618.5b23edabe0ad514c3feb.entry.js
      explore.59e8c471075e13dd7bcf.entry.css
      explore.59e8c471075e13dd7bcf.entry.js
  sqllab (4.18 MiB)
      vendors.67a6449999841087d80c.entry.js
      2441.cf2d2dd99eca21c7005d.entry.js
      7550.0cfaa3644756c68a9121.entry.js
      4772.8a7235054cc5390994dc.entry.js
      4998.ea824400282b4ecbc219.entry.js
      6817.ef8a2900974e5f86b36d.entry.js
      7591.c0aa30a5b3a2ddfd78c1.entry.js
      4654.a3f27e9f9fabb180d766.entry.js
      5379.7499c59194663c7d20d7.entry.js
      995.4e2301996ca18a87a402.entry.js
      9670.81717722de8508773214.entry.js
      323.a052f68100e3a36fc6fc.entry.js
      6962.7a58e262bb2f151662f1.entry.js
      3853.3ed091c0487bca14aa78.entry.js
      7843.fb124a06379fc9e80f62.entry.js
      2825.72aec20a1f78ee635f53.entry.js
      1958.749b2a64de3f3ed5fa9c.entry.js
      489.46c357f15990d355098a.entry.js
      sqllab.2927ade409cfc2ebcec8.entry.css
      sqllab.2927ade409cfc2ebcec8.entry.js
  profile (3.38 MiB)
      vendors.67a6449999841087d80c.entry.js
      7550.0cfaa3644756c68a9121.entry.js
      4772.8a7235054cc5390994dc.entry.js
      6817.ef8a2900974e5f86b36d.entry.js
      5379.7499c59194663c7d20d7.entry.js
      6962.7a58e262bb2f151662f1.entry.js
      3853.3ed091c0487bca14aa78.entry.js
      489.46c357f15990d355098a.entry.js
      profile.e0174d7909bbaa985ad0.entry.css
      profile.e0174d7909bbaa985ad0.entry.js
  showSavedQuery (2.93 MiB)
      vendors.67a6449999841087d80c.entry.js
      7550.0cfaa3644756c68a9121.entry.js
      9670.81717722de8508773214.entry.js
      showSavedQuery.75de7e358177298f13e5.entry.css
      showSavedQuery.75de7e358177298f13e5.entry.js

After this PR each entry point the bundle size will be smaller than webpack 4.x version

graceguo-supercat

LGTM!

rusackas · 2021-10-25T17:31:47Z

After:

13.59MG (parsed)
3.79MB (Gzipped)

superset-github-bot bot added the preset-io label Oct 23, 2021

pull-request-size bot added the size/XS label Oct 23, 2021

rusackas requested review from kgabryje, graceguo-supercat and etr2460 October 23, 2021 04:00

etr2460 approved these changes Oct 23, 2021

View reviewed changes

kgabryje approved these changes Oct 23, 2021

View reviewed changes

villebro reviewed Oct 25, 2021

View reviewed changes

rusackas added 3 commits October 25, 2021 09:07

fix: reenabling terser plugin

e4a917e

undoing accidental commit inclusion

75eda0f

prettier ✨

cf9ce04

rusackas force-pushed the reenabling-terser-plugin branch from 7073258 to cf9ce04 Compare October 25, 2021 15:07

moving the dots.

7a2ac04

graceguo-supercat approved these changes Oct 25, 2021

View reviewed changes

rusackas merged commit ef01cbb into master Oct 25, 2021

rusackas deleted the reenabling-terser-plugin branch October 25, 2021 21:47

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.5.0 labels Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: reenabling terser plugin for webpack #17205

fix: reenabling terser plugin for webpack #17205

rusackas commented Oct 23, 2021 •

edited

Loading

codecov bot commented Oct 23, 2021 •

edited

Loading

etr2460 left a comment

kgabryje left a comment

graceguo-supercat commented Oct 23, 2021

kgabryje commented Oct 24, 2021

kgabryje commented Oct 24, 2021

rusackas commented Oct 25, 2021

villebro Oct 25, 2021

rusackas Oct 25, 2021

graceguo-supercat commented Oct 25, 2021

graceguo-supercat left a comment

rusackas commented Oct 25, 2021

		minimizer: [new CssMinimizerPlugin()],
		minimizer: ['...', new CssMinimizerPlugin()],

fix: reenabling terser plugin for webpack #17205

fix: reenabling terser plugin for webpack #17205

Conversation

rusackas commented Oct 23, 2021 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Oct 23, 2021 • edited Loading

Codecov Report

etr2460 left a comment

Choose a reason for hiding this comment

kgabryje left a comment

Choose a reason for hiding this comment

graceguo-supercat commented Oct 23, 2021

kgabryje commented Oct 24, 2021

kgabryje commented Oct 24, 2021

rusackas commented Oct 25, 2021

villebro Oct 25, 2021

Choose a reason for hiding this comment

rusackas Oct 25, 2021

Choose a reason for hiding this comment

graceguo-supercat commented Oct 25, 2021

graceguo-supercat left a comment

Choose a reason for hiding this comment

rusackas commented Oct 25, 2021

rusackas commented Oct 23, 2021 •

edited

Loading

codecov bot commented Oct 23, 2021 •

edited

Loading