Webpack-encore: Use faster SourceMap type

[mneuhaus]

Currently encore uses "inline-source-map" as devtool setting to create SourceMaps in Development mode. This type of SourceMap is slow in initial build and rebuild.
I suggest encore should use one of these 2 by default:

cheap-module-eval-source-map medium build speed and fast rebuild speed while providing mapping down to specific lines of the code
eval-source-map slow build speed (same as current type) and pretty fast rebuild speed while mapping down to the exact original source code

Here are some numbers to compare the 3 variants on my MacBook Pro with a 2.7 Core i7:

inline-source-map	~30-40s	~30-40s
cheap-module-eval-source-map	~10s-15s	~1s-3s
eval-source-map	~30-40s	~0.5-1s

[Lyrkan]

Hi @mneuhaus,

Thank you for suggesting this change!

The eval-source-map setting looks like the best choice to me. @weaverryan What do you think?

[mneuhaus]

forgot to add the documentation link regarding an overview of all available options with their implications/speeds: https://webpack.js.org/configuration/devtool/#for-development

[stof]

I agree we should prefer eval-source-map over cheap-module-eval-source-map. While it is slower on initial build, it provides better quality source map (and it is reported faster on rebuilding, which will happen more often in dev).

[stof]

btw, webpack explicit documents inline-source-map as being not ideal for development: https://webpack.js.org/configuration/devtool/#special-cases

[guillaume-a]

Hi, while I'm waiting for this change, is there a way to set this in the webpack.config.js file ?
Thx.

[Lyrkan]

Hi @guillaume-a,

You can modify everything you want in the generated Webpack config.
Something like the following snippet should work:

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

// Configure Encore
Encore
    .setOutputPath('build/')
    .setPublicPath('/')
    // (...)
;

// Retrieve the config
const config = Encore.getWebpackConfig();

// Change the kind of source map generated in
// development mode
if (!Encore.isProduction()) {
    config.devtool = 'eval-source-map';
}

// Export the config (be careful not to call
// getWebpackConfig() again)
module.exports = config;

[guillaume-a]

Ohhhh thank you so much.
I just started using both webpack and Encore today.

[mneuhaus]

FYI, i tried to create a pull-request for eval-source-map yesterday but found out, that it is not capable to do css sourcemaps in conjunction with extractText.
After some tests "cheap-module-soure-map" seems to be the best candidate, but i'll do some more thorough tests and create a detailed comparison.

[ghost]

It may be worth noting that the use of eval will not get through a good CSP. It may still be a good idea to use the faster options as sensible default, but it is probably interesting to document somewhere that if you want CSP-compliant sourcemaps (for development builds), you'll need to change the defaults by e.g. setting config.devtool = 'inline-source-map';.

[weaverryan]

I'd also be interested in measuring just how big of a difference it makes in some real projects by changing this setting. One sourcemap setting might be way faster than another, but, in practice, does this cut an initial build time down from 10 seconds to 2 seconds? Or from 10 seconds to 9.9 seconds (because the sourcemap was not the reason the build was slow)? If someone can try this on their project and drop the info here, that could help us make a smart decision.

[olix21]

Webpack encourages to use 'source-map' as devtool.

https://webpack.js.org/guides/production/#source-mapping

Avoid inline-* and eval-* use in production as they can increase bundle size and reduce the overall performance.

[Lyrkan]

@olix21 In production only, which is what Encore currently does by default (if source maps are enabled):

https://github.com/symfony/webpack-encore/blob/9a4030cd71f5106a152e3609c951617e5b763df2/lib/config-generator.js#L75-L83

[Erfans]

Refer to this page https://webpack.js.org/configuration/devtool/ (please check the development and production sections) different suggested tools exist which can meet different requirements.
So my suggestion is to change the default devtool to something faster, but also allow to configure the devtool through the Api. Something like this
.enableSourceMaps(true,{tool: 'inline-source-map'})
which can be extended like
.enableSourceMaps(true,{tool: !Encore.isProduction()? 'cheap-eval-source-map':'source-map' })
or
.enableSourceMaps(true,{prod: 'source-map', dev: 'cheap-eval-source-map'})
They still have their default options and the second parameter can be left empty.
After all, encore is supposed to create a simple Api for webpack.

[Lyrkan]

We could probably do that... but I don't really like that naming.

In my opinion we should either:

• keep the exact same name used in Webpack: .enableSourceMaps(true, { devtool: '...' })
• use a name that'll probably be a little bit easier to understand for newcomers, for instance:
  
  
  
  • .enableSourceMaps(true, { type: '...' })
  
  
  • .enableSourceMaps(true, { style: '...' })