ama
ama copied to clipboard
gaearon
Production
I'm working on a startup with my friends and we're approaching the finish line 🎉! The last thing to do is get file size of our application down. We're using Webpack, React, Redux, Immutable and at the moment the build of out application in production mode is 1.23MB and loads in the browser at about 2.34 seconds. We want to get the size down to 300-400kb range. What would you do to try to optimize the size of an application?
What we are contemplating doing:
- Server-Side Rendering with Code-Splitting
- Split out the vendor modules out to separate package (to help with caching)
What would you do if you we're in our shoes?
While @gaearon thinks about this one, check out http://survivejs.com/webpack/building-with-webpack/analyzing-build-statistics/ for a bunch of tools that help you analyze your code.
Also, do you really need Immutable? Unless you have a lot of data, it is not really needed and it does add quite a bit to the initial download…
On Sun, Jul 10, 2016 at 10:40 PM his [email protected] wrote:
I'm working on a startup with my friends and we're approaching the finish line 🎉! The last thing to do is get file size of our application down. We're using Webpack, React, Redux, Immutable and at the moment the build of out application in production mode is 1.23MB and loads in the browser at about 2.34 seconds. We want to get the size down to 300-400kb range. What would you do to try to optimize file size of an application?
What we are contemplating doing:
- Server-Side Rendering with Code-Splitting
- Split out the vendor modules out to separate package (to help with caching)
What would you do if you we're in our shoes?
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/gaearon/ama/issues/119, or mute the thread https://github.com/notifications/unsubscribe/AADWliMcJLYAnOF1btHQCeheYENjpwVQks5qUVjPgaJpZM4JI6du .
@sandysaders Are the files being served with gzip compression? Also, for code splitting, take a look at https://github.com/webpack/react-proxy-loader to automatically add split points to any react component.
Hi! This ama is intended for personal questions, not technical support 😄 .
That said first thing I’d check is that you correctly envify and uglify React, and that you don’t use webpack devtool in production configs (assuming you use webpack). Surprisingly many projects bundle incorrectly. You can look at https://github.com/facebookincubator/create-react-app configs for inspiration.
