The Bolt Design System provides robust Twig and Web Component-powered UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.
Add bundle analyzer to the build to monitor bundle sizes.
Details
Bundle analyzer shows bundle sizes of the build in a list view and as an interactive visual tree.
Bundle analyzer can run in both dev and prod modes. Prod is most useful because it shows us the actual bundle sizes we ship. Unfortunately I was unable to "watch" in prod mode due to some build issues I do not have time to debug. So for now you can only watch in "dev" mode and build in "prod" mode.
This PR also adds compiler.close() to packages/build-tools/tasks/webpack-tasks.js. This is recommended in the docs. I added it while attempting to watch in "prod" mode - that didn't work but closing the compiler is a good idea regardless.
How to test
Run yarn to install bundle analyzer.
Run yarn analyze to watch the files in dev mode. Verify the Bundle analyzer window pops up.
Run yarn analyze:prod to build the files in prod mode. Verify the same and that the bundles are smaller, as they should be in prod mode.
Release Notes
Adds yarn analyze and yarn analyze:prod commands to the build to enable Webpack bundle analyzer.
Jira
https://pegadigitalit.atlassian.net/browse/DS-872
Summary
Add bundle analyzer to the build to monitor bundle sizes.
Details
Bundle analyzer shows bundle sizes of the build in a list view and as an interactive visual tree.
Bundle analyzer can run in both dev and prod modes. Prod is most useful because it shows us the actual bundle sizes we ship. Unfortunately I was unable to "watch" in prod mode due to some build issues I do not have time to debug. So for now you can only watch in "dev" mode and build in "prod" mode.
This PR also adds
compiler.close()topackages/build-tools/tasks/webpack-tasks.js. This is recommended in the docs. I added it while attempting to watch in "prod" mode - that didn't work but closing the compiler is a good idea regardless.How to test
yarnto install bundle analyzer.yarn analyzeto watch the files in dev mode. Verify the Bundle analyzer window pops up.yarn analyze:prodto build the files in prod mode. Verify the same and that the bundles are smaller, as they should be in prod mode.Release Notes
yarn analyzeandyarn analyze:prodcommands to the build to enable Webpack bundle analyzer.