nwb icon indicating copy to clipboard operation
nwb copied to clipboard

Support use of Webpack Bundle Analyzer

Open insin opened this issue 7 years ago • 5 comments

Add an --analyze/--analyse flag which enables use of BundleAnalyzerPlugin to make it easy to inspect the contents of bundles.

insin avatar Feb 21 '17 23:02 insin

I added it to my project. I believe the only changes I made were:

package.json scripts (my script should probably run build first):

    "stats:analyzer": "webpack-bundle-analyzer dist/stats.json dist",

package.json devDependencies:

    "stats-webpack-plugin": "^0.4.3",
    "webpack-bundle-analyzer": "^2.2.3",

nwb.config.js webpack plugins:

    plugins.push(new StatsPlugin('stats.json', {chunkModules: true}))

grahamlyus avatar Feb 24 '17 21:02 grahamlyus

and how do you generate stats.json!!

broncha avatar Nov 23 '17 15:11 broncha

@grahamlyus I have this, but npm run build does not generate stats.json

plugins: [
  new StatsPlugin('stats.json', {chunkModules: true}),
  new BundleAnalyzerPlugin({generateStatsFile: true, analyzerMode: 'disabled'})
]

broncha avatar Nov 23 '17 16:11 broncha

@broncha Perhaps BundleAnalyzerPlugin conflicts with StatsPlugin? Personally I prefer to run the stats analysis on an on-demand basis, as my build is already quite long.

StatsPlugin should output stats.json in the dist folder, unless you have changed it.

Perhaps you can paste you entire package.json and nwb.config.js if it's still not working

grahamlyus avatar Nov 23 '17 17:11 grahamlyus

Late to the party here, but just in case anyone else stumbles on this issue...I was able to get stats.json created during npm run build with the following nwb.config.js file.

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

module.exports = {
  type: 'react-component',
  npm: {
    esModules: true,
  },
  webpack: {
    extra: {
      plugins: [new BundleAnalyzerPlugin({ generateStatsFile: true, analyzerMode: 'disabled' })],
    },
  },
};

and then add webpack-bundle-analyzer as a dev dependency and the same script mentioned above, "stats:analyzer": "nprm run build && webpack-bundle-analyzer dist/stats.json dist", replacing the stats.json file to wherever yours ends up being generated.

And this works with "nwb": "0.24.x", "webpack-bundle-analyzer": "^3.7.0" at the moment .

alexfinnarn avatar Apr 16 '20 20:04 alexfinnarn