Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: production bundle minification problem

Belovol pro asked 6 years ago


Good morning

Would you give some advise on production bundle size minification. I have webpack warning like this

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.                                                                                                                                            
Assets:                                                                                                                                                                     
 912ec66d7572ff821749319396470bde.svg (434 KiB)                                                                                                                            
 main.css (659 KiB)                                                                                                                                                        
 main.js (1.9 MiB)

 


Jakub Mandra staff answered 6 years ago


"If I wrap every mdbreact component (as an example) in loadable, would webpack extract those components into independent chunks? Could it execute this operation?"

- Not sure if this will work with mdbreact as a dependency.

 

"if I clone repo, would it include pro components?"

- Yes, and then you could use f.e. Loadable to lazy load your desired components from /src/components

https://git.mdbootstrap.com/mdb/react/re-pro

So this should answer the previous thesis.

 


Belovol pro answered 6 years ago


I've downloaded package approx 2 moths ago. Discovered, that now it weights only 386 K. It exceeds recommended limit, but very much better than 1,4 M!

Is it possible to uclude in package source codes? React-bootstrap for example has lib directory with source codes, so I can

import SomeComponent from 'react-bootstrap/lib/SomeComponent'

 

It gives me possibility to manage bundle size manually.

And one more question. If I were to use dynamic import by means of, for ex, react Loadable, would it give any effect conserning bundle size if deffered loading concerns components in mdbreact.js? 


Jakub Mandra staff commented 6 years ago

1. Ah yes, we reduce the size and it is going to be much lower, as I said - we are still working on it :)

2. It is not possible that way, only if you clone the repo.

3. If you use Loadable, the whole bundle wont be smaller, but separated to smaller files. First page load would be much faster. The rest components would be downloaded only when they are needed. Not sure how this would work with mdbreact, we didn't tested that yet.

 

 

 


Belovol pro commented 6 years ago

To be more precise, the question is:

I can’t import desired components from mdbreact.js. Only the whole bundle. 

If I wrap every mdbreact component (as an example) in loadable, would webpack extract those components into independent chunks? Could it execute this operation?

My starting page contains Navbar. How could I reduce amount to load if I should import it from mdbreact.js, and this operation yields import the whole mdbreact.js? So my ”starting chunk” would contain the whole mdbreact. As I see, I have to choices:

1. Not use mdbreact components on starting page at all and have small starting chunk.

2. Use it and then have starting chunk size min 400K

if I clone repo, would it include pro components? 


Jakub Mandra staff answered 6 years ago


I see,

That's the case in our package, it doesn't cooperate with tree shaking for now.

We are hardly working on reducing the package size and to independence.
But our priority now is to bring on fresh and updated documentation so that proces is slowed down for now.

Will keep you updated.


Belovol pro answered 6 years ago


No. I've checked by means of  this plugin.  And result is that 1,4 M of total bundle size is mdbreact.js.

I've tried tree shaking, this plugin and so on. Nothing gains any reasonable size reducing. I've tried to intentionally make dead code. For ex, my index.js (entry) renders code like this

<Router>

<Main/>

</Router

I've tried to comment this and render something like 

<p>Hello, world</p>

 

Nothing. 1,4 M.

May be I wrongly understand tree shaking. I think so that if I import only component Fa (for ex) provided that Fa don't imports in turn some other component, then after tree shaking there should be leaved only this component in resulting bundle.  


Jakub Mandra staff answered 6 years ago


I assume those files are your written code?

Webpack provides some advice in how to split the code https://webpack.js.org/guides/code-splitting/

Here are some methods how to reduce your bundle. 



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: 4xIntel Core i7-4510U CPU @2 GHz
  • Browser: Google Chrome V- 68.0.3440.8
  • OS: openSUSE Leap 42.3
  • Provided sample code: No
  • Provided link: No