Slow compiling with Bootstrap

bud
1

Hi,

I’m noticing a significant difference in compile time between Laravel Mix & Bud (in development mode).

A change in a scss file:
Laravel mix: 3.8s
Bud: 5.9s

Both times, I’m importing all bootstrap files in both app.scss & editor.scss. Is there any way I can speed up this compile time?

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    .when(app.isProduction, app => {
      app.purgecss({
        enabled: false,
        content: [
          app.path('project', 'resources/views/**/*.blade.php'),
          app.path('project', 'app/**/*.php'),
          app.path('project', 'index.php'),
        ],
        safelist: require('purgecss-with-wordpress').safelist.concat(require('./purge-safelist').safelist),
      })
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets(['images'])

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('https://example.text');
};

"devDependencies": {
    "@roots/bud": "5.5.0",
    "@roots/bud-eslint": "5.5.0",
    "@roots/bud-postcss": "5.5.0",
    "@roots/bud-prettier": "5.5.0",
    "@roots/bud-purgecss": "5.5.0",
    "@roots/bud-sass": "5.5.0",
    "@roots/bud-stylelint": "5.5.0",
    "@roots/eslint-config": "5.5.0",
    "@roots/sage": "5.5.0",
    "purgecss-with-wordpress": "^4.1.0",
    "stylelint-config-idiomatic-order": "^8.1.0",
    "stylelint-order": "^5.0.0"
  },
  "dependencies": {
    "bootstrap": "^5.1.3"
  }
2

Thanks for your Bud config and packages… but we have no comparison. Where is your Mix config?

3

My bad, here it is:

const mix = require('laravel-mix');
const path = require('path');
require('laravel-mix-purgecss');
require('@tinypixelco/laravel-mix-wp-blocks');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Sage application. By default, we are compiling the Sass file
 | for your application, as well as bundling up your JS files.
 |
 */

mix
  .setPublicPath('./public')
  .browserSync('https://development.local');

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .purgeCss({
    extend: { content: [path.join(__dirname, 'index.php')] },
    safelist: require('purgecss-with-wordpress').safelist.concat(require('./purge-safelist').safelist),
  })
  .options({
    processCssUrls: false,
  });

mix
  .js('resources/scripts/app.js', 'scripts')
  .blocks('resources/scripts/editor.js', 'scripts')
  .autoload({ jquery: ['$', 'window.jQuery'] })
  .extract();

mix
  .copyDirectory('resources/images', 'public/images')
  .copyDirectory('resources/fonts', 'public/fonts');

mix
  .sourceMaps()
  .version();
4

Doesn’t look like you’re doing any sort of linting? If you remove all of the linting from your theme (example), what change does that have on your build times?

5

I tested without linting, there might be a small difference, but it is not noticable. If you would like to investigate this a little further, I created a branch which contain both ways to compile.

You can just clone the branch, run yarn & switch between mix & bud (see README.md).

6

Thank you for the repo :pray:

On my machine, the Bud build completes in ~3.5s and the Mix build completes in ~7.5s pretty consistently :confused:

7

Running yarn build is indeed faster with bud (2.35s) vs mix (4.03s). I’m talking about development (yarn dev & yarn dev-mix), and how fast the changes are reflected in my browser.

8

:man_facepalming: We’ll try and take a look soon