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: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
built in 8.88s
Replies (3)
Optimizing build asset sizes involves reducing the file sizes of assets like images, scripts, and stylesheets to improve website performance.image background removal service Techniques include compressing images, minifying CSS and JavaScript files, and using modern formats like WebP. Lazy loading non-critical assets and leveraging caching also help reduce load times. Smaller assets lead to faster page rendering, enhancing user experience and SEO.
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.
https://v2.tailwindcss.com/docs/optimizing-for-production
Let me know if you need more details.
Would be great if anyone could advice on this.
