Разделение кода увеличивает размер пакета ввода при использовании create-реагировать-приложение - PullRequest
Новая
       19

Разделение кода увеличивает размер пакета ввода при использовании create-реагировать-приложение

0 голосов
/ 05 декабря 2018

Вот соответствующий код перед разделением кода вручную: 

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>
    )

before code splitting

вот код после разделения кода: 

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>
    )
  }

after code splitting

Я также попробовал учебное пособие здесь: https://serverless -stack.com / chapters / code-split-in-create-реакции-app.html

, что похоже на то, что делает реагирующая загрузка.

Я использую webpack v4 с извлеченным приложением create-реагировать и следующеепакеты / плагины babel:

"@ babel / cli": "^ 7.2.0" "@ babel / plugin-offer-class-properties": "^ 7.2.1" "@ babel / plugin-offer-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-реакции-app ":" ^ 6.1.0 "," babel-runtime ":" * ",

это не такая большая проблема, что это не уменьшает размер пакетаЯ просто не могу понять, почему это так.

1 Ответ

0 голосов
/ 02 августа 2019

Может быть, вы можете попробовать TerserPLugin, чтобы минимизировать JS? 

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

Источник: https://github.com/webpack-contrib/terser-webpack-plugin

...