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:
- install webpack bundle analyzer:
npm install --save-dev webpack-bundle-analyzer
- import the dependency in gulpfile.js:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
- add the plugin to the webpack config inside the gulpfile.js:
function getWebpackConfig(isESM){
const webPackConfig = {
//... Some code
plugins: [
new BundleAnalyzerPlugin()
],
//... More code
}
}
- 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);
}
- 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.