Debugging production client index.js sizes

[oyeanuj]

I have been running into a couple of issues with production client bundle sizes. I'll often see messages like the following:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  index-53d0c3e8c25a725bf591.js (1.34 MB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
  index (1.34 MB)
      index-53d0c3e8c25a725bf591.js
      index-365b754b63a637909897f4839d5b0f57.css

Now, that's a pretty high index.js size (master has something around 98K). Few observations around that.

1. It doesn't seem to occur consistently. Sometimes, the bundle size seems more reasonable.
2. Even the feature/redux-opinionated branch seems to have index.js file size of almost 300kB for not too much addition compared to master. ( index.js in feature/styled-components is about 250kB).

So, for all of the above, how can I detect if my setup is messed up, or where the size might be coming from? Is there a recommended way to debug that and see where it might be coming from?

Tips, thoughts, experiences anyone? cc: @ctrlplusb @strues @diondirza

[diondirza]

You should try to run this command npm run analyze:client, and see what dependency that has bloated your bundle size.

[oyeanuj]

@diondirza that command doesn't help since it shows index.js as the bloated file but doesn't tell you what within it is bloating it 😞

[vikamirror]

I'm just a beginner of react ecosystem.

I've merged feature/redux-opinionated and feature/postcss-sass with master before build. Here is what I tried in ./internal/webpack/configFactory.js

import webpackBundleAnalyzer from 'webpack-bundle-analyzer';

const BundleAnalyzerPlugin = webpackBundleAnalyzer.BundleAnalyzerPlugin; let webpackConfig = { ...

plugins: ifProdClient(new webpack.optimize.ModuleConcatenationPlugin()), ifProdClient(new BundleAnalyzerPlugin())

Then you can see details of index.js with lauched http://127.0.0.1:port after the command npm run build

[sendlo]

I'm seeing the same issue. It doesn't appear that tree shaking is working properly, if I understand tree shaking and uglifyjs-webpack-plugin correctly.

I took the master branch and added a component with 2 simple exports (both just simple strings). In the home route I imported just one of the imports. But the bundle for the home route includes both exports.