Open oyeanuj opened 6 years ago
You should try to run this command npm run analyze:client
, and see what dependency that has bloated your bundle size.
@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 😞
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
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.
I have been running into a couple of issues with production client bundle sizes. I'll often see messages like the following:
Now, that's a pretty high
index.js
size (master
has something around 98K). Few observations around that.feature/redux-opinionated
branch seems to haveindex.js
file size of almost 300kB for not too much addition compared tomaster
. (index.js
infeature/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