Source Map Explorer is a bundle analyzer tool which shows treemap visualizaton of your component sizes. Check it’s Github for more expalanation.
Let’s see how we can use source-map-explorer with webpack.
First install source-map-explorer globally using npm
npm install -g source-map-explorer
Now go to your project folder and make sure you have a sourc emap file for your bundle.js. It will named like this, bundle.js.map
If the source map file is not available, you can easily generate it by configuring devtool option in webpack.
Open webpack.config.js and add devtool: ‘source-map’ after output configuration.
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: `./src/index.jsx` , output: { path: path.resolve(__dirname,"build"), filename: "bundle.js" }, devtool: 'source-map', module: { loaders: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } } ] }, };
Hereafter you will be generating source maps along with your bundle.js
Now just run the following command to see the magic of source-map-explorer
source-map-explorer bundle.js bundle.js.map
Here is how it will took,