React js asset size limit(1.5mb)

v_mazurets
Member

Hey guys!

Maybe someone can help me. Have a problem: max size of bundle is 1.5mb. So i need to split my code from webpack config. But if i create chunks - Hubspot can't resolwe it (i think he waiting from me main.js file without dependencies). My website is falling when i deploy modules with external dependencies. I try all cases from webpack config to optimize my code. Can someon help me...

0 Upvotes
4 Replies 4
dennisedson
Community Manager

@theAndreyK , you are using webpack, right?  Any advice for @v_mazurets 

 

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
theAndreyK
Contributor | Partner

I might be able to help when I get more familar with adding React to the mix. I really only understand things with a somewhat basic Hubspot + Webpack setup. I use webpack to generate the files that Hubspot wants in the end. Is the structure so complex that it it doesn't fit in the standard Hubspot file structure? @v_mazurets are you getting any specific errors? Are you logging errors from Webpack? 

v_mazurets
Member

Hey @theAndreyK  ! Thanks for replying. Error is that hubspot can upload only files smaller than 1.5 mb. My bundle of js is bigger (main.js after build project). I try all casses with the minifying and chunks. If i use chuks - hubspot not displaying my components. I think he wait only one main.js file like in cms-react-boilerplate. So i stuck on this and don't know what to do. About import and exports - everything like in example. Webpack put all dep from package.json to build(like react-hook-form and others libraries). When i try to config webpack so all deps will be in sepparate files - it's not wotking(hubspot stop to display modules)

0 Upvotes
theAndreyK
Contributor | Partner

Have you looked into the Hubspot React Boilerplate: https://github.com/HubSpot/cms-react-boilerplate? 

 

I'm sorry if this is obvious but I'm still learning myself. When that boilerplate compiles it creates a `/dist` folder with all of your packaged depenencies. You need to import and export your dependencies so that they are available when you need them. Take a look at how `src/components/Card.js` exports `Card` and then `src/App.js` imports `Card` and exports `App` until finally `index.js` imports `App`—you need to setup that kind of system.

 

Hope that helps.