Dev compilation extremely slow (~200 seconds)

[Cypaubr]

When I compile my project, it takes a huge amount of time in dev --watch mode. The problem does not occur in production mode.

Here is my webpack.config.js:

var Encore = require('@symfony/webpack-encore');
const Terser = require('terser-webpack-plugin');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')
    .addEntry('admin', './assets/js/admin.js')
    .addEntry('admin-login', './assets/js/admin-login.js')
    .addEntry('login', './assets/js/login.js')
    .addEntry('chat', './assets/js/chat.js')
    .addEntry('profile', './assets/js/profile.js')

    // images copy
    .copyFiles({
        from: './assets/img',
        to: 'img/[path][name].[ext]'
    })

    .splitEntryChunks()

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())

    .enableVersioning(Encore.isProduction())

    // enabling @babel/preset-env polyfills
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })

    // enabling Sass/SCSS support
    .enableSassLoader()

    //enabling React
    .enableReactPreset()

    .enableIntegrityHashes(Encore.isProduction())

    //Terser Config
    .addPlugin(new Terser({
        parallel: true,
        sourceMap: !Encore.isProduction(),
        terserOptions: {
            mangle: Encore.isProduction()
        }

    }))
;

module.exports = Encore.getWebpackConfig();

Do you have any solution to speed up the compilation in dev mode?

[Lyrkan]

Hi @Cypaubr,

I'm closing this thread since we already have one about build performances: #476 (comment)

Some remarks regarding your webpack.config.js though:

• Don't add the terser-webpack-plugin manually, minification is already handled by Encore. If you want to configure the plugin, use Encore.configureTerserPlugin().
• Try disabling source maps to check how much it reduces the build times. If that's the issue then you could try using another source map type (see Use faster SourceMap type #214 (comment))

[Cypaubr]

@Lyrkan I already tried these solutions, it changes nothing...

[Lyrkan]

Your webpack.config.js file is pretty basic apart from the extra terser-webpack-plugin instance (which should be removed anyway), so it's not really possible to know what's causing your issue without a repro.

You could try adding the ProfilingPlugin to your config and then inspecting the generated events file: https://webpack.js.org/plugins/profiling-plugin/

It will be really verbose but if a single thing takes a really long time you should be able to see it.