javascript - 索引包 block 太大

Question

我是 React 和 Webpack 代码分割的新手，所以我不确定这对于捆绑 block 来说是否合适。

我尝试根据路由 ( basically done the same thing as in the example in the React doc ) 拆分我的 React 应用程序。

这工作正常，但是包含我的应用程序索引的主包(即将我的应用程序渲染到 DOM)似乎很大(~400Ko)，而且我真的不知道可以删除什么，包含的所有内容似乎必不可少(我的应用程序使用 apollo、react、redux、styled-components)。

这是index.js，您可以查看依赖项:

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.');
  });
}

再说一遍，我对代码分割很陌生，所以也许这是一个合适的大小，但 webpack 一直告诉我 bundle 的大小太大。

再次感谢!

编辑:这是 webpack bundle analyzer of my app if that helps .

Answer 1

不幸的是，当将 apollo-client 与 React 一起使用时，这是一个问题，因为应用程序的入口点需要两者:/

似乎 apollo- 客户端正在处理它:https://github.com/apollographql/apollo-client/issues/4324