Giters

robertknight / webpack-bundle-size-analyzer

A tool for finding out what contributes to the size of Webpack bundles

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

does just specifying the UglifyJsPlugin as a plugin trigger usage before the stats are generated?

faceyspacey opened this issue · comments

commented

I don't understand whether the readme is saying that you have to do something else in addition to just specifying the UglifyJsPlugin in your webpack config, or whether just specifying it is enough. If there's more that needs to be done, an example would be greatly appreciated.

What it seems to be saying is that I have to pipe the output of webpack --json to Uglify manually before piping the result into webpack-bundle-size-analzyer.

commented

Thank-you for the feedback. I have created a PR that attempts to explain the issue with minifying code using the UglifyJS plugin and the workaround more clearly. Could you take a look and let me know if it makes things clearer for you?

commented

Totally makes sense now. Thanks so much!

commented

@robertknight it seems to be working, but is there any reason, it's showing so few packages:

> NODE_ENV=production webpack --json -p --config web/webpack.config.js | webpack-bundle-size-analyzer

babel-polyfill: 116.76 KB (87.6%)
  core-js: 116.05 KB (99.4%)
  <self>: 728 B (0.609%)
whatwg-fetch: 6.28 KB (4.71%)
regenerator-runtime: 5.55 KB (4.16%)
process: 2.47 KB (1.85%)
webpack: 149 B (0.109%)
<self>: 2.11 KB (1.58%)

Notably, React isn't even there, and my own code seems way too small.

I have the uglify plugin turned off, and I have these js loaders:

       {
         test: /\.js$/,
         exclude: /node_modules\/(?!(format-money)\/).*/,
         loader: 'babel-loader',
         query: {
           cacheDirectory: '/tmp/',
         },
      },
      {
        test: /\.js$/,
        loader: 'uglify-loader',
      },
commented

UPDATE: i later figured it had to be because I was excluding node_modules, but by that time I had upgraded babel-presets, babel-core and the like, and couldn't get it to work again. I tried downgrading things back, but still couldn't get it to work. The error I was getting was:

ERROR in ./index.web.js.js
Module build failed: Error
    at new JS_Parse_Error (eval at <anonymous> (/Users/jamesgillmore/React/celebvidy-web/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1545:18)

index.web.js is my entry file. Even though it doesn't tell you the line # something is wrong on, I deleted everything in the file, and obviously it worked (with no stats for this entry point). Then I left the first line (an import) statement, it didn't work. So clearly the babel-loader isn't transpiling things before uglify gets it. I tried changing the order of the loaders and the like. I've made sure I don't have "presets": [["es2015", {modules: false}] etc. Uglify just doesn't like what it's receiving.

I do however get the feeling it has to do with the fact that uglify is receiving import statements as part of webpack 2 treeshaking, even though I've tried turning them off by not passing "modules": false.

commented

Solving issues with getting UglifyJS loader to work for your project is out of scope for this project I'm afraid. There is some discussion upstream about getting stats for modules after processing by plugins: webpack/webpack#2198

In the meantime, you may wish to try https://github.com/th0r/webpack-bundle-analyzer which claims support for minified bundles.