Optimize build assets sizes
I'm currently using Metronic with Laravel and Tailwind CSS. My backend dashboard is powered by Metronic, which is its primary strength. The frontend uses a separate Tailwind CSS package.
Everything compiles well, except I noticed that after adding Metronic, my build size increased significantly.
Could you please advice what is where is the best place for me to disable components i'm not using so i can reduce both the .js file size and .css file size
> vite build
vite v5.4.8 building for production...
300 modules transformed.
public/build/manifest.json 3.76 kB │ gzip: 0.56 kB
public/build/assets/keenicons-duotone-DGcKa84C.ttf 220.18 kB
public/build/assets/keenicons-duotone-CKhy9TPl.woff 220.25 kB
public/build/assets/keenicons-solid-BpuJqYZv.ttf 223.77 kB
public/build/assets/keenicons-solid-Bg1JIIe2.woff 223.84 kB
public/build/assets/keenicons-outline-CZvMTwJs.ttf 323.14 kB
public/build/assets/keenicons-outline-B2SVicN3.woff 323.22 kB
public/build/assets/keenicons-filled-CE921hZa.ttf 431.30 kB
public/build/assets/keenicons-filled-BkDGg1uE.woff 431.38 kB
public/build/assets/keenicons-duotone-BzRXiZuU.svg 822.29 kB │ gzip: 309.83 kB
public/build/assets/keenicons-solid-CtVlmjct.svg 898.88 kB │ gzip: 349.22 kB
public/build/assets/keenicons-outline-AHGPNOLp.svg 1,310.50 kB │ gzip: 517.14 kB
public/build/assets/keenicons-filled-CrMg3cU0.svg 1,721.20 kB │ gzip: 620.60 kB
public/build/assets/app-Bu1-15Om.css 350.63 kB │ gzip: 50.24 kB
public/build/assets/app-DNVxMJgI.js 120.66 kB │ gzip: 28.18 kB
public/build/assets/app-CqyJ2EYJ.js 692.51 kB │ gzip: 226.36 kB
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking:
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
built in 8.88s
Replies (2)
Hi John
To reduce the build size, you can disable unused components by modifying the imports in /resources/metronic/core/index.ts. Comment out or remove the imports for any Metronic components you don’t need. This approach will help slim down the .js.
Also, consider using tools like Laravel Mix’s purgeCSS or Tailwind’s built-in purging to remove unused CSS classes in the Tailwind build.
Let me know if you need more details.
