Webpack bundle anazlyzer tool

In order to be able to analyze the content of a bundle generated with webpack, it is required to use a bundle analysis tool. webpack bundle analyzer provides a visual representation of the contents of the bundle.

in order to use it you can follow the instructions on webpack-bundle-analyzer

To use it in any glass wallet repository you need to:

1. install webpack bundle analyzer:

npm install --save-dev webpack-bundle-analyzer

2. import the dependency in gulpfile.js:

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

3. add the plugin to the webpack config inside the gulpfile.js:

function getWebpackConfig(isESM){  
    const webPackConfig = {
        //... Some code
            plugins: [
                new BundleAnalyzerPlugin()
            ],
        //... More code       
    }
}

4. Since you can only inspect one bundle at a time and gulpfile.js is creating two bundles, remove the bundle you don't want to inspect.
   Original method:

function controlFlow(){
    if (isDeploy())
        return parallel(exportDefault , exportESMDist, exportJSDist);
    if (isBuild())
        return series(exportDefault);
}

Example to create only one bundle:

function controlFlow(){
    if (isDeploy())
        return parallel(exportDefault , exportESMDist);
    if (isBuild())
        return series(exportDefault);
}

5. run the build:prod:

npm run build:prod

After the bundle is created a browser window will open and display the contents of your bundle.