Nwb: Support use of Webpack Bundle Analyzer

Created on 22 Feb 2017  路  5Comments  路  Source: insin/nwb

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

enhancement

Most helpful comment

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}))

All 5 comments

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}))

and how do you generate stats.json!!

@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 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

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 .

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AndyOGo picture AndyOGo  路  4Comments

tbillington picture tbillington  路  6Comments

pedrocostadev picture pedrocostadev  路  5Comments

tlindsay picture tlindsay  路  3Comments

LeoDT picture LeoDT  路  5Comments