使用create-react-app时，代码拆分会增加条目包大小

Question

以下是手动代码拆分前的相关代码：

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Protected from '../container-components/authentication/protected.js';
import LoginContainer from '../container-components/authentication/loginContainer.js';
import axios from 'axios';
import {Loader} from 'semantic-ui-react';

  render(){
    if(this.state.isLoading){
      return(
        <div>
          <Loader style={{marginTop: '30vh'}} active inline='centered'/>
        </div>
      )
    }
    return(
        <BrowserRouter>
            <div>
              <Switch>
                <Route
                  path='/stream'
                  render={(props) =>
                    <Protected {...props}
                    isLoggedIn={this.state.isLoggedIn}
                    onLogout={this.handleLogout}
                    user={this.state.user}
                    />
                  }
                />
                <Route
                  path='*'
                  render={(props) =>
                    <LoginContainer {...props}
                      isLoggedIn={this.state.isLoggedIn}
                      onLogin={this.handleLogin}
                    />
                  }
                />
              </Switch>
            </div>
        </BrowserRouter>
    )

以下是代码拆分后的代码：

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import LoginContainer from '../container-components/authentication/loginContainer.js';
import axios from 'axios';
import {Loader} from 'semantic-ui-react';
import Loadable from 'react-loadable';

const LoadableProtected = Loadable({
  loader: () => import('../container-components/authentication/protected.js'),
  loading: Loader,
  render(loaded, props) {
    let Component = loaded.default;
    return <Component {...props} />
  }
})

  render(){
    if(this.state.isLoading){
      return(
        <div>
          <Loader style={{marginTop: '30vh'}} active inline='centered'/>
        </div>
      )
    }
    return(
        <BrowserRouter>
            <div>
              <Switch>
                <Route
                  path='/stream'
                  render={(props) =>
                    <LoadableProtected {...props}
                      isLoggedIn={this.state.isLoggedIn}
                      onLogout={this.handleLogout}
                      user={this.state.user}
                    />
                  }
                />
                <Route
                  path='*'
                  render={(props) =>
                    <LoginContainer {...props}
                      isLoggedIn={this.state.isLoggedIn}
                      onLogin={this.handleLogin}
                    />
                  }
                />
              </Switch>
            </div>
        </BrowserRouter>
    )
  }

我也在这里尝试了教程：https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

这似乎和react loadable所做的是一样的。

我正在使用webpack v4和弹出的create react应用程序以及以下babel软件包/插件：

“@babel/cli”：“^7.2.0”@babel/plugin提案类属性”：“^7.2.1”@babel/plugin提案导出默认自“^7.2.0”@babel/preset env”：“^7.2.0”acorn“^6.0.4”babel eslint“^9.0.0”babel插件动态导入节点“^2.2.0”babel插件lodash“^3.3”babel核心“^6.26.3”、“babel jest”：“20.0.3”、“babel加载程序”：“^8.0.4”，“巴别塔预设反应应用程序”：“^6.1.0”，“巴别塔运行时”：“*”，

这不是什么大不了的事情，它没有减少捆绑包的大小，我只是似乎不明白为什么会这样。

Answer 1

也许你可以试试TerserPLugin，最小化JS？

  optimization: {
    minimizer: [new TerserPlugin({ /* additional options here */ })],
  },

资料来源：https://github.com/webpack-contrib/terser-webpack-plugin