Warning encountered on building pattern-lab for production

[dipakpurbey]

when I run the command: npm run build:pl, I get warnings from webpack. Console Output: `WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: app.js (433 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: app (571 KiB) app.styles.css app.js

WARNING in webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/

`

Should I be worried about that or is there something that I am doing wrong?

Any help will be highly appreciated!

[illepic]

Webpack is just being very helpful here.

1. The asset size limit warning has to do with the fontawesome 5 svg map. This is a raw asset that is shaken out during production build down to just the half dozen svgs actually referenced in code.
2. The entrypoint size limit: We bundle everything out into a single asset bundle for ease of beginner use. You are free to edit your Webpack entry points to generate multiple, smaller bundles that will require managing of inclusion within your app. We included jQuery + Vue right out of the box, but if you don't need Vue, feel free to remove references to it (the vue-widget component).

For a better view of what production looks like, try this out:

First run a full PL build (this may take a looooong time as it uglifies the js and css):

npm run build:pl

Then, we're going to generate a profile stats file:

NODE_ENV=production npx webpack --config apps/pl/webpack.config.js --profile --json > dist/app-pl/assets/stats.json

Finally, let's fire up an interactive view of our bundle:

npx webpack-bundle-analyzer dist/app-pl/assets/stats.json

You'll be greeted with an open visualization at http://localhost:8888:

Note that the biggest pieces of this bundle are jQuery and Vue. The warning about "asset size" from before references the raw fortawesome SVG imported at _patterns/01-atoms/svgicon/index.js. In dev mode this file is 644kb. When bundled, it's hacked down to 32kb (11kb gzipped).

So, TLDR: output bundle includes a couple of big libraries. Remove what you don't need, or break these up into multiple entry points that are loaded on specific routes.

[dipakpurbey]

@illepic - Thank your very much for the detailed information, its very helpful. I will look into filtering out the required v/s not required assets.

[illepic]

I'm going to close this issue for now. Thank you for the great question!