The compilation time in my project is around 20s. It could be acceptable if the following compilation times in watch mode were shorter, but they are the same.
It was working fine before I started using typescript + vue (I don’t know exactly which one of those started causing this issue).
It seems that HMR and/or caching are not working as they should.
╭─ sage ./public [00f08bb10023ea657771]
│
├─ entrypoints
│ ├─ app
│ │ ├─ js/runtime.js 48.4 kB
│ │ ├─ runtime.97eac932e86bab83cec2.hot-update.js 371 bytes
│ │ └─ js/app.js 1.44 MB
│ ├─ editor
│ │ ├─ js/runtime.js 48.4 kB
│ │ ├─ runtime.97eac932e86bab83cec2.hot-update.js 371 bytes
│ │ └─ js/editor.js 442.36 kB
│ └─ backend
│ ├─ js/runtime.js 48.4 kB
│ ├─ runtime.97eac932e86bab83cec2.hot-update.js 371 bytes
│ └─ js/backend.js 36.07 kB
│
├─ assets
│ ├─ fonts/subset-AvertaStdCY-ThinItalic.woff 21.95 kB
│ ├─ fonts/subset-AvertaStdCY-LightItalic.woff 21.9 kB
│ ├─ fonts/subset-AvertaStdCY-RegularItalic.woff 21.79 kB
│ ├─ fonts/subset-AvertaStdCY-ExtraboldItalic.woff 21.77 kB
│ └─ fonts/subset-AvertaStdCY-BoldItalic.woff 21.74 kB
│
│ … 56 additional asset(s) not shown
│
╰─ compiled 4436 modules in 20s 142ms
╭─ server
│
├─ proxy: https://strada.ddev.site/
├─ dev: http://localhost:3002/
│
╰─ watching project sources (and 276 other files)
I’m wondering about the compiled 4436 modules in 20s 142ms part. It seems something is wrong here.
Here’s my setup
bud.config.mjs :
export default async (app) => {
/**
* Application entrypoints
* @see {@link https://bud.js.org/docs/bud.entry/}
*/
app
.entry({
app: ['@scripts/app', '@styles/app'],
editor: ['@scripts/editor', '@styles/editor'],
backend: ['@styles/backend'],
})
.provide({
URL: 'url-polyfill',
jquery: ['jQuery', '$'],
})
.externals({
acf: 'window.acf',
jQuery: 'window.jquery',
});
app
.alias('vue$', app.path('@modules/vue/dist/vue.esm-bundler.js'))
.define({
__VUE_OPTIONS_API__: true, // If you are using the options api.
__VUE_PROD_DEVTOOLS__: false, // If you don't want people sneaking around your components in production.
})
/**
* Directory contents to be included in the compilation
* @see {@link https://bud.js.org/docs/bud.assets/}
*/
.assets(['images'])
/**
* URI of the `public` directory
* @see {@link https://bud.js.org/docs/bud.setPublicPath/}
*/
.setPublicPath('/app/themes/ds-custom/public/')
/**
* Development server settings
*
* @see {@link https://bud.js.org/docs/bud.setUrl}
* @see {@link https://bud.js.org/docs/bud.setProxyUrl}
* @see {@link https://bud.js.org/docs/bud.watch}
*/
.setUrl('http://localhost:3002')
.proxy('https://strada.ddev.site')
.watch(['resources/views', 'app']);
/**
* Preserve svg viewBox
* @see {@link https://discourse.roots.io/t/disable-removeviewbox-doesnt-work-bud-imagemin-svgo/}
*/
app.imagemin.svgo.set(`encodeOptions`, {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
});
/**
* Generate WordPress `theme.json`
*
* @note This overwrites `theme.json` on every build.
*
* @see {@link https://bud.js.org/extensions/sage/theme.json/}
* @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/}
*/
app.wpjson
.set('settings.color.custom', false)
.set('settings.color.customDuotone', false)
.set('settings.color.customGradient', false)
.set('settings.color.defaultDuotone', false)
.set('settings.color.defaultGradients', false)
.set('settings.color.defaultPalette', false)
.set('settings.color.duotone', [])
.set('settings.custom.spacing', {})
.set('settings.custom.typography.font-size', {})
.set('settings.custom.typography.line-height', {})
.set('settings.custom.breakpoints', twConfig.theme?.screens)
.set('settings.spacing.padding', true)
.set('settings.spacing.units', ['px', '%', 'em', 'rem', 'vw', 'vh'])
.set('settings.typography.customFontSize', false)
.set('styles.elements.link.typography.textDecoration', false)
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize()
.enable();
};
postcss.config.cjs:
const resolveConfig = require('tailwindcss/resolveConfig.js');
const tailwindConfig = require('./tailwind.config.cjs');
const twConfig = resolveConfig(tailwindConfig);
let plugins = {
stylelint: {},
'postcss-bem-linter': {},
'postcss-at-rules-variables': {atRules: ['for', 'each']},
'postcss-import-ext-glob': {},
'postcss-import': {},
'postcss-for': {},
'postcss-each': {},
'postcss-mixins': {},
'postcss-simple-vars': {},
'postcss-custom-media': {},
'tailwindcss/nesting': {},
tailwindcss: {},
'postcss-contrast': {
dark: twConfig.theme?.colors?.dark,
light: twConfig.theme?.colors?.light,
},
'postcss-reporter': {
clearReportedMessages: true,
},
};
if (process.env.NODE_ENV === 'production') {
plugins = {...plugins, ...{autoprefixer: {}}};
}
module.exports = {
plugins,
};
Is ths situation usual, or I’m I missing something ?
