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

Posted 2023-02-24

【中文标题】使用 create-react-app 时，代码拆分会增加入口包大小

【英文标题】：Code splitting increases entry bundle size when using create-react-app

【发布时间】：2019-05-07 10:19:59

【问题描述】：

这里是手动分码前的相关代码：

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 正在做的事情是一样的。

我正在使用带有弹出的 create-react-app 和以下 babel 包/插件的 webpack v4：

"@babel/cli": "^7.2.0" "@babel/plugin-proposal-class-properties": "^7.2.1" "@babel/plugin-proposal-export-default-from": "^7.2.0" "@babel/preset-env": "^7.2.0" “橡子”：“^6.0.4” "babel-eslint": "^9.0.0" “babel-plugin-dynamic-import-node”：“^2.2.0” “babel-plugin-lodash”：“^3.3.4” "babel-core": "^6.26.3", "babel-jest": "20.0.3", "babel-loader": "^8.0.4", "babel-preset-react-app": "^6.1.0", "babel-runtime": "*",

它并没有减少捆绑包的大小，这并不是什么大不了的事，我似乎无法弄清楚为什么会这样。

【参考方案1】：

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

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

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