Vite with Inertia | style missing, and purge unused JS?

I've installed PurgeCSS with Inertia-React and the login page is missing the style. The style is back if I remove purge() from Vite, obviously. In addition, is there a way I can purge unused JS while building my assets? I've just imported all css and js files from a template and when I build the package I get a warning saying that some assets (the JS bundle) are very large (>2Mb). For now, I'm not using any of that JS code, is Vite capable of purging unused JS code? According to Inertia [2] lazy-loading should be the default. Thanks

Laravel 11 with Breeze for React
PurgeCSS latest [1]

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import purge from '@erbelion/vite-plugin-laravel-purgecss'

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
        // purge(),   // tried this as well
        purge({
            paths: ['resources/{js,views, css}/**/*.{blade.php,react,html,js,css}']
        })
    ],
});

Portal.jsx

import React, { useState } from '@inertiajs/react';  


export default function Portal() {
    return ( 
           <>
            <Head title="Portal" />
            <h2>Hello </h2>
           </>
    );
}

app.jsx

import '../css/app.css';
import './bootstrap';
import '../bootstrap/css/bootstrap.min.css';
import '../bootstrap-icons/bootstrap-icons.css';
import '../bootstrap/js/bootstrap.bundle.min.js';
import '../css/boxicons/css/boxicons.min.css';
import '../css/quill/quill.snow.css';
import '../css/quill/quill.bubble.css';
import '../css/remixicon/remixicon.css';
import '../css/simple-datatables/style.css';

import './apexcharts/apexcharts.min.js';
import './chart.js/chart.umd.js'; 
import './echarts/echarts.min.js';
import './quill/quill.js';
import './simple-datatables/simple-datatables.js';
import './tinymce/tinymce.min.js';
import './php-email-form/validate.js';
import './main.js'; 
 
 
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob('./Pages/**/*.jsx'),
        ),
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

Build warning:


(!) Some chunks are larger than 500 kB after minification.

[1] https://github.com/erbelion/vite-plugin-laravel-purgecss

[2] https://inertiajs.com/code-splitting

RemiM

1 year ago

Best Answer

Level 16

Are you using both Tailwind and Bootstrap in your project?

Tailwind automatically handles purging, you don't need external configuration, whereas Bootstrap follows a different approach.

I've installed PurgeCSS with Inertia-React and the login page is missing the style.

Regarding the issue with your login page, the original version uses Tailwind unless you've customized it with Bootstrap.

I don’t think you should include the css folder in the purge plugin's paths. The documentation examples don’t include it, so try removing it. Don't forget to include the .jsx extention in your paths. With these changes, your login page's styles should be back.

In addition, is there a way I can purge unused JS while building my assets?

For unused JavaScript files, start by identifying what can and can't be removed. Various online tools and npm packages can assist with this. Generally, modifying external packages isn't advisable, but you can chunk JavaScript files if needed.

Avoid importing everything in app.jsx unless absolutely necessary, and follow the good practices and recommandations from the official documentations and various online resources to install packages. For example, you can follow this tutorial to install Bootstrap.

If you already know a JavaScript package won’t be used, remove it from your codebase (package.json) and delete any related import statements in your files.

Here’s a list of useful resources for your use case:

alex32

1 year ago

Level 2

@RemiM Thank you very much ! The missing style is back and I'm working on the Bootstrap's tutorial right now.

Please or to participate in this conversation.