Bud dev slow and page not refreshing

Hello, thank you for all your work on Sage so far.

I’ve got a foundation project with SCSS that I upgraded from Mix. When I run bud dev it seems very slow to compile (Usually around 22s).

It also doesn’t refresh the css even though it is connected and I am on the server URL. It refreshes blade and PHP files fine.

Here is my bud file and package.json. If you need any more please let me know. Thanks!

/**
 * @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.js'],
    })

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

    /**
     * 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('http://site.test')

    /**
     * Development URL
     */
    .serve('http://site.test:3000');
};
{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "npm run translate:pot && npm run translate:js",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
  },
  "devDependencies": {
    "@roots/bud": "5.6.2",
    "@roots/bud-eslint": "5.6.2",
    "@roots/bud-postcss": "5.6.2",
    "@roots/bud-prettier": "5.6.2",
    "@roots/bud-sass": "5.6.2",
    "@roots/bud-stylelint": "5.6.2",
    "@roots/bud-tailwindcss": "5.6.2",
    "@roots/eslint-config": "5.6.2",
    "@roots/sage": "5.6.2"
  },
  "dependencies": {
    "foundation-sites": "^6.6.3",
    "is-in-viewport": "^3.0.4",
    "jquery": "^3.5.1",
    "swiper": "^8.0.3"
  }
}

I would update to 5.7.0. We ended up forking webpack-hot-middleware to address some issues with dev rebuilds not working after syntax errors.

You can also remove @roots/bud-postcss from your devDependencies. It’s already included as a peer by @roots/sage. I don’t think this makes much of a difference viz a viz yr problem, however.

Last thing, unless you are doing something specific I don’t know about, I’m not sure what this does:

.assets(['images'], ['fonts'])

but you probably want:

.assets(['images', 'fonts'])

Other than that, I don’t know what to say. In my testing bud is significantly faster than mix, and your build shouldn’t be slow like that at all.

With all of your dependencies installed and imported into app.js:

import foundation from "foundation-sites";
import swiper from "swiper";
import * as isInViewport from "is-in-viewport";
import jquery from "jQuery";

const main = async () => {
  console.log({ foundation, jquery, swiper, isInViewport });
};

main()

import.meta.webpackHot?.accept(main);

and importing all of foundation-sites into app.scss and editor.scss:

@import "foundation-sites/dist/css/foundation.css";

I end up with some pretty bloated bundles but it’s all pretty much going just about as fast as webpack can:

│ ✔    vendor/app               vendor/app.js               1.1 MB       
│ ✔    editor                   editor.js                   205.98 kB    
│ ✔    app                      app.js                      205.03 kB    
│ ✔    vendor/bud.app.editor    vendor/bud.app.editor.js    49.96 kB     
│ ✔    ᠃                        manifest.json               146 bytes    
│ ✔    ᠃                        entrypoints.json            125 bytes    
│ ✔    ᠃                        wordpress.json              41 bytes     

 duration    254ms   

 mode    development    hash       9675348b4e1d1b67d32f   
 bud     5.7.0          webpack    5.70.0

5.6.2 is a similar story:

 duration    286ms   

 mode    development    hash       52ad18ff4610f33e2b4d   
 bud     5.6.2          webpack    5.68.0 

I wish I could be of any help here, but I’m at a loss as to why your experience is going the way it is. But, try updating to 5.7.0 and that should at least address your HMR issues.

Thanks for that. Hot reloading is now fixed which was my main concern.

I moved to 5.7.0 and removed postcss. I also fixed the assets line.

Just to mention, I’m not using all of foundation or swiper. I’m importing specific parts to keep the bundle size down but it still looks like the CSS from foundation is the culprit.

If I remove that my build goes back to 5 seconds. My JS is fine regardless.

One other small thing is since I upgraded to 5.7.0 I’m getting this error:

> dev
> bud dev

✖  TypeError: Patterns must be a string or an array of strings
    at assertPatternsInput ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:129568:9)
    at toPatternsArray ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:129574:2)
    at Module.<anonymous> ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:129608:66)
    at Watcher.getWatchedFiles ([secure]/node_modules/@roots/bud-server/lib/cjs/server/server.watcher.js:35:43)
    at Watcher.watch ([secure]/node_modules/@roots/bud-server/lib/cjs/server/server.watcher.js:45:39)
    at [secure]/node_modules/@roots/bud-server/lib/cjs/server/index.js:99:78
    at [secure]/node_modules/@roots/bud-hooks/lib/cjs/Hooks/index.js:243:26
    at async Hooks.fire ([secure]/node_modules/@roots/bud-hooks/lib/cjs/Hooks/index.js:237:9)
    at async Server.run ([secure]/node_modules/@roots/bud-server/lib/cjs/server/index.js:152:9)
    at async Bud.run ([secure]/node_modules/@roots/bud-api/lib/cjs/a
[4%] [setup] WordPressDependenciesWebpackPlugin normal module factor
[99%] [done] MultiCompiler plugins

Thanks

I didn’t mean to say that you were importing all of it like that – I’m sure you are running a tight ship, sincerely! I was just doing that for the sake of creating a worst case scenario to try and get to the bottom of it.

Thanks for the heads up on the bud.watch API change. That was unintended.

I want functions like asset and watch to all be variadic but it looks like I broke arrays. I’ll fix that in a patch today.

But, it works with variadic arguments! You can fix it by removing the brackets:

.watch('resources/views/**/*', 'app/**/*')
1 Like

Of course! No offence taken :grin:

Cheers for the quick fix. I’ll close this as I don’t think there is anything further to be done.

2 Likes