[Bundle visualiser] - does it show minified version of the files?

avalanche1 · February 26, 2018, 9:15am

Does anyone know?

Also I’ve found that it displays incorrect (bigger!) sizes for .css files than their actual size on disk. Why would that happen?

robfallows · February 26, 2018, 10:23am

github.com

meteor/meteor/blob/170de0c11878e965b4a52560840401d103dcaa3a/packages/non-core/bundle-visualizer/README.md#how-it-works

# bundle-visualizer

The `bundle-visualizer` package is an analysis tool which provides a visual
representation within the web browser showing what is included in the initial
client bundle.  The initial client bundle is the primary package of code
downloaded and executed by the browser to run a Meteor application and includes
packages which have been added via `meteor add <package>` or Node modules
included in the `node_modules` directory and used in an application.

This visualization can uncover details about which files or packages are
occupying space within the initial client bundle.  This can be useful in
determining which imports might be candidates for being converted to dynamic
`import()` statements (which are excluded from the initial client bundle), or
for identifying packages which have been inadvertently included in a project.

## How it works

This package utilizes the `<hash>.stats.json` files which are written alongside
file bundles when the application is ran with the `--production` flag.  The
specific details for the minified file sizes is added by the minifier package

This file has been truncated. show original

avalanche1 · February 26, 2018, 6:54pm

Yes, I’ve read it. And after I’ve read it I’ve got those two questions above

I assume it shows minified version.
But why are .css files get bigger??
In particular I was profiling 'antd' component library (to find out why adding a single Datepicker component adds 400kb to my app ) and it turned out that .js files were of lesser size than on disk, but .css files were bigger!

filipenevola · February 26, 2018, 7:13pm

Hello, you should import antd like this

import { default as DatePicker } from 'antd/lib/date-picker';

and not

import { DatePicker } from 'antd';

with the first way Meteor will include only the DatePicker file in your bundle.

avalanche1 · February 26, 2018, 7:51pm

Thank you for the advice, but unfortunately, the DatePicker component itself weights about 400kb! (I’ve used bundle-visualiser to measure)
Here’s an issue with detailed analysis of what is being imported.

Btw, you don’t need default keyword. Just use

import Datepicker from 'antd/lib/date-picker'