CODEWITHSUNDEEP
javascriptreactjswebpack
Saraband
Saraband

Reputation: 1590

index bundle chunk is too big

I'm new to code splitting with React and Webpack so I'm not sure if this is an OK size for a bundle chunk.

I tried to split my React app based on the routes (basically done the same thing as in the example in the React doc).

This works fine, but the main bundle which contains the index of my app (i.e. rendering my app to the DOM) seems quite big (~400Ko), and I don't really know what could be removed, everything included seems essential (My app uses apollo, react, redux, styled-components).

Here's the index.js so you can have a look at the dependencies:

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import { BrowserRouter } from 'react-router-dom';
import { Provider as StoreProvider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from 'STORE/index';
import App from './App';

const apolloClient = new ApolloClient({
  uri: 'http://localhost:3000/graphql'
});

const render = (App) => {
  ReactDOM.render(
    <ApolloProvider client={apolloClient}>
      <StoreProvider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </PersistGate>
      </StoreProvider>
    </ApolloProvider>,
    document.getElementById('root')
  );
};

render(App);

if (module.hot) {
  module.hot.accept('./App', () => {
    render(require('./App'));
    console.log('App updated successfully.');
  });
}

Again, I'm new to code splitting so maybe this is an OK size but webpack keeps telling me that the size of the bundle is too big.

Thanks again !

EDIT: Here's a look at a webpack bundle analyzer of my app if that helps.

Upvotes: 0

Views: 1057

Answers (1)

moigonz
moigonz

Reputation: 76

This unfortunately a problem when using apollo-client together with react because both are required in the entry point of the app :/

Seems like apollo- client is working on it: https://github.com/apollographql/apollo-client/issues/4324

Upvotes: 1

Related Questions