Level 37
Are they that big in the development build or the production build?
Vite doesn't minify development builds but will minify production ones so don't be super concerned if it's just in dev.
1 like
Jul 30, 2023
6
Level 1
Too big css and js files
Hey everyone, I'm using an admin panel that has a huge style.css file 1.3mb and other js files that are 200kb each. How do i reduce their sizes? I tried purgeCss with laravel mix but it's removing classes that my project is using. I didn't find anything helpful and simple for beginners on youtube and in the docs. Any suggestions ?
Level 1
@nexxai thank you. I'm in development build. So if I understood you correctly as I figure out how to host the project this issue will be resolved? (I'm new to this so excuse my dumb questions)
Level 51
@peuf Yes.
When you run npm run build the generated files will be minified.
1 like
Level 1
@MohamedTammam thank you, I tried that and the file got minified to 972kb (from 1.3mb) its still too much. This is the code from vite.config.js import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin';
export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', 'public/assets/css/style.css', ], refresh: true, }), ], build: { minify: true, outDir: 'public/dist', }, });
Level 3
cssnano for CSS and terser for JS. and use Lazy Loading
1 like
Level 1
@moath231 thank you
Please or to participate in this conversation.