joffreypersia's avatar

Optimize Vite build time and avoid unnecessary builds

Hi,

I am using Laravel 10 and Vite / TailwindCSS V4.

I am wondering if I can optimize the time of the build.

Usually the build says :

Which is a little bit a big time.

I was wondering how I could avoid unnecessary build on files that didn't changed. Here is my vite.config.mjs

Thank you in advanced. :)

0 likes
3 replies
LaryAI's avatar
LaryAI
AI
1 year ago
Level 58

To optimize Vite build times and avoid unnecessary builds, you can consider the following strategies:

  1. Cache Optimization: Ensure that Vite is properly caching files that haven't changed. Vite should automatically handle this, but you can verify that your cache is working correctly by checking your environment and build setup.

  2. Code Splitting: You're already using manualChunks to split node modules into separate chunks. This is a good practice as it allows for better caching and reduces the size of individual chunks. You might want to further refine this by grouping related modules together if they are often used together.

  3. Optimize Dependencies: Review your dependencies and see if there are any that can be removed or replaced with lighter alternatives. This can reduce the number of modules that need to be processed.

  4. Use esbuild for Faster Builds: Vite uses esbuild under the hood for development, which is very fast. Ensure that your build process is leveraging esbuild optimally. You can configure esbuild options in your Vite config if needed.

  5. Minimize CSS: TailwindCSS can generate a lot of CSS. Ensure that you are purging unused styles in production builds. TailwindCSS should automatically purge unused styles in production, but verify your configuration:

    // tailwind.config.js
module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  // other configurations...
};

  6. Parallelize Builds: If you have a multi-core CPU, ensure that Vite is using all available cores. This is usually handled automatically, but you can check your system's resource usage during builds.

  7. Incremental Builds: Vite doesn't natively support incremental builds for production, but you can use tools like esbuild or swc for faster incremental builds if your project setup allows it.

  8. Analyze Build Output: Use Vite's build analysis tools to understand which parts of your build are taking the most time. You can use plugins like rollup-plugin-visualizer to generate a visual representation of your bundle:

    npm install --save-dev rollup-plugin-visualizer

    Then, add it to your Vite config:

    import { defineConfig } from 'vite';
import visualizer from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    // other plugins...
    visualizer({ open: true }),
  ],
});

  9. Environment Configuration: Ensure that your environment is optimized for builds. This includes using the latest Node.js version and having sufficient memory and CPU resources.

By implementing these strategies, you should be able to reduce your Vite build times and avoid unnecessary builds.

RemiM's avatar

  1. Your chunking strategy will likely increase build time because it creates a separate chunk for every single package in node_modules.

  2. I'm not sure if it will help, but upgrading to the latest version (6+), and following the installation of Tailwind 4 within Laravel from this discussion could provide some improvement.

Example of built assets in a fresh Laravel 11 installation with Tailwind 4:

test-laravel-tailwind npm run build

> build
> vite build

vite v6.2.0 building for production...
✓ 53 modules transformed.
public/build/manifest.json             0.27 kB │ gzip:  0.15 kB
public/build/assets/app-Dhc3K8qG.css   5.14 kB │ gzip:  1.64 kB
public/build/assets/app-D03Ay3w-.js   35.03 kB │ gzip: 14.03 kB
✓ built in 566ms
1 like

Please or to participate in this conversation.