Closed dipakpurbey closed 5 years ago
Webpack is just being very helpful here.
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.
@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.
I'm going to close this issue for now. Thank you for the great question!
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!