Add a way to implement the webpack bundle analyzer

[TPXP]

https://github.com/webpack-contrib/webpack-bundle-analyzer enables developers to analyze what's inside their bundles. It's a great way to identify huge dependencies that slow down the app's loading time. I believe it would be a valuable addition to Webpack-Encore.

[versedi]

It works with Encore out of the box.

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    Encore.addPlugin(new BundleAnalyzerPlugin());

[TPXP]

Good catch, did not know about that "addPlugin" method. Thanks 😁

[pbowyer]

It does, but when running yarn watch only appears to calculate the data on the first run, not when any JS file changes. I have it included in webpack.config.js like so:

if (!Encore.isProduction()) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    Encore.addPlugin(new BundleAnalyzerPlugin())
}

[TPXP]

Hum, unless I'm mistaken, the bundle analyzer should only be used on production bundles since it's what you want to optimize and production builds are much more optimized than development bundles (for example, JS files are minified, and treeshaked only when making a production build)...

[abranhe]

I think this is not necessary since it can be easily accomplished. On your webpack.config.js add:

const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const isAnalyzing = 'analyze' === process.env.NODE_ENV;

// More Encore config...

if(isAnalyzing) {
	Encore.addPlugin(new BundleAnalyzerPlugin());
}

then on your package.json add a script:

{
	"scripts": {
		"analyze": "NODE_ENV=analyze encore production"
	}
}

then you can easily run:

npm run analyze

and it will start the web server.