How to analyze your Webpack bundle in Sage9

sage
, ,
1

Today I wanted to share with you a quick tip - how to analyze your Webpack bundles. This will let you know what modules are getting bundled and what is being sent to your visitors.

There are various ways to achieve that, today I would like to showcase the simplest one (in my opinion).

All points below are applicable to the newest Sage 9 version - 18th April 2019

1. Installation of Webpack Bundle Analyzer
Let’s start with the installation of Webpack Bundle Analyzer

yarn add -D webpack-bundle-analyzer

(please run it from your theme directory)

2. Package.json modificaton
Add following line into your package.json scripts object. For example somewhere below build:profile... command (line 29)

"build:analyze" : "webpack --progress --config resources/assets/build/webpack.config.js --env.analyze",

3. Edit /resources/assets/build/config.js
Edit config.js file and add following code around line 30 (or anywhere in the config object).

bundleAnalyze: !!(argv.env && argv.env.analyze),

4. Edit resources/assets/build/webpack.config.js
Import the Webpack Analyzer on the top of the file:

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

And around line 199 add the following lines:

if (config.bundleAnalyze) {
  webpackConfig.plugins.push(
    new BundleAnalyzerPlugin()
  );
}

Actually you can place this code “almost” anywhere below the webpackConfig object initialization but for the sake of clarity let’s be strict and use line 199.

And done :wink:
That’s all. From now on you can analyze your bundles and check what is being shipped to production, how many kilobytes your precious libraries are eating and how much it costs your end user. Maybe it will be a good time to finally get rid of that slider?

You can see the analysis by running:

yarn build:analyze

The browser window should open and show you something like on following [screen] (https://cloud.githubusercontent.com/assets/302213/20628702/93f72404-b338-11e6-92d4-9a365550a701.gif) Screen comes from Webpack Analyzer repository.

In case you need more sophisticated options please visit the Webpack Bundle Analyzer Github Repo.

That’s all! I hope you will find it useful.

93f72404-b338-11e6-92d4-9a365550a701

13 Likes
2

Just missing the BundleAnalyzerPlugin import in webpack.config.js:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Nice!

1 Like
3

Ah yes, thank you, I forgot to copy that from my project. At least one person read the tutorial :slight_smile:

4

Hi guys, I’ve been trying this with a lando setup and I seem to get site cant be reached when attempting to browse to http://127.0.0.1:8888

Any tips would be really appreciated. I’ve edited my lando.yml to try and proxy the port 8888 as follows:

name: bedrock
recipe: wordpress
proxy:
  appserver_nginx:
- bedrock.test
  theme:
- localhost:3000
- localhost:8888

config:
  php: '7.2'
  via: nginx
  webroot: web
  database: mariadb
  xdebug: true

services:
  theme:
type: node
overrides:
  ports:
    - 3000:3000
    - 8888:8888
tooling:
  yarn:
service: theme
5

I’ve updated to ONLY ports 8888:8888 on the proxy and theme services.

I’ve also checked with docker container -ls to see the ports are forwarding and it shows like so:

CONTAINER ID        IMAGE                        COMMAND                  CREATED             STATUS                    PORTS                                                                                       NAMES
0df01011847f        bitnami/nginx:1.14           "/lando-entrypoint.s…"   25 seconds ago      Up 23 seconds             8080/tcp, 0.0.0.0:32906->80/tcp, 0.0.0.0:32905->443/tcp                                     bedrock_appserver_nginx_1
ec2e141d2cd2        bitnami/mariadb:10.1         "/lando-entrypoint.s…"   25 seconds ago      Up 24 seconds (healthy)   0.0.0.0:32904->3306/tcp                                                                     bedrock_database_1
69c6cc65726d        node:10                      "/lando-entrypoint.s…"   25 seconds ago      Up 23 seconds             0.0.0.0:8888->8888/tcp                                                                      bedrock_theme_1
247a0ff50793        devwithlando/php:7.2-fpm-2   "/lando-entrypoint.s…"   46 seconds ago      Up 24 seconds             9000/tcp                                                                                    bedrock_appserver_1
bed0ae174751        traefik:1.6.3-alpine         "/lando-entrypoint.s…"   3 days ago          Up 9 hours                0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp, 0.0.0.0:32768->443/tcp, 0.0.0.0:58087->8080/tcp   landoproxyhyperion5000gandalfedition_proxy_1

However when I browse to 127.0.0.1:8888 I’m just getting:

This site can’t be reached

Any ideas?

— EDIT—

AHAAAA! I cracked it! You need to specify analyzer host as 0.0.0.0 otherwise webpack seems to refuse to serve up to anyone but the localhost.

In step 4 - Edit resources/assets/build/webpack.config.js

if (config.bundleAnalyze) {
  webpackConfig.plugins.push(
    new BundleAnalyzerPlugin({
      analyzerMode: "server",
      analyzerHost: "0.0.0.0",
      analyzerPort: 8888,
      openAnalyzer: false
    })
  );
}