Why is the web single-page application based on React,Webpack and antd compiled and packaged and the app.js is as big as 17.5m?

problem description

webpack is not compiled in the production environment, but the local environment compilation is 17.5m.
put it on the server and run it. It won"t load at all. It"s always a white screen. I hope there is a way to make my project at least run.

compile screenshot

I tried it today, and it was reduced to 13.8

.

thanks

webpack configuration

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var proxy = require("http-proxy-middleware");
let WEBPACK_ENV = process.env.WEBPACK_ENV || "dev";
console.log(WEBPACK_ENV);

const context2 = [`/api/task/`, `/api/account`, `/api/api-token-auth`, `/api/cluster/`];
const context1 = [`/api/account`];
module.exports = {
    entry: "./src/app.jsx",
    output: {
        path: path.resolve(__dirname, "dist"),
        publicPath: "/dist/",
        filename: "js/app.js"
    },
    resolve: {
        alias: {
            page: path.resolve(__dirname, "src/page"),
            component: path.resolve(__dirname, "src/component"),
            service: path.resolve(__dirname, "src/service"),
            util: path.resolve(__dirname, "src/util"),

        }
    },
    module: {
        rules: [
            // react(jsx)
            {
                test: /\.(jsx|js)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env", "react", "stage-0"],
                        plugins: [require("babel-plugin-transform-object-rest-spread")]
                    }
                }
            },
            // css
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // sass
            {
                test: /\.scss$/,
                loader: "style-loader!css-loader!sass-loader"
            },
            // 
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            name: "resource/[name].[ext]"
                        }
                    }
                ]
            },
            // 
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            name: "resource/[name].[ext]"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // html 
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            favicon: "./favicon.ico"
        }),
        // css
        new ExtractTextPlugin("css/[name].css"),
        // 
        new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            filename: "js/base.js"
        }),
        
    ],
    devServer: {
        port: 8001,
        host: "0.0.0.0",
        historyApiFallback: {
            index: "/dist/index.html"
        },

        proxy: [
            {
                context: context1,
                target: "http://www.simplehpc.com",
                changeOrigin: true,
                secure: false
            }, {
                context: context2,
                target: "http://api_sjtu001.simplehpc.com",
                changeOrigin: true,
                secure: false
            }
        ]
    }
};

Code in app.js

import React            from "react";
import ReactDOM         from "react-dom";
import { BrowserRouter as Router, Switch, Redirect, Route } from "react-router-dom"
import Layout           from "component/layout/index.jsx";
// 
import Home             from "page/home/index.jsx";
import Storage          from "page/storage/index.jsx";
import Net              from "page/net/index.jsx";
import Application      from "page/application/index.jsx";
import Login            from "page/login/index.js";
import UserSubmit       from "page/user/userSubmit";
import UserList         from "page/user/index.jsx";
import GroupList        from "page/group/index.jsx";
import ErrorPage        from "page/error/index.jsx";
import NodeList         from "page/pbs/nodelist.jsx";
import TaskList         from "page/pbs/tasklist/index.jsx";  
import Cluster         from "page/cluster/index.js";  
import Mirror           from "page/mirror";
import "./app.css";
class App extends React.Component{
    render(){  
        let LayoutRouter = (
            <Layout> 
                <Switch>
                    <Route exact path="/" component={Home}/>                   
                    <Route path="/net" component={Net}/>
                    <Route path="/mirror" component={Mirror}/>
                    <Route path="/storage/:name" component={Storage}/>                    
                    <Route path="/app" component={Application}/>  
                    <Route path="/node/index" component={NodeList}/>
                    <Route path="/task/index" component={TaskList}/>                             
                    <Route path="/user/index" component={UserList}/>
                    <Route path="/group/index" component={GroupList}/>
                    <Route path="/cluster/:name" component={Cluster}/>
                    <Redirect exact from="/user" to="/user/index"/>
                    <Route component={ErrorPage}/> 
                </Switch>
            </Layout>
        );
        return (
            <Router>
                <Switch>
                    <Route path="/login" component={Login}/>
                    <Route path="/user-submit" component={UserSubmit}/>
                    <Route path="/" render={ props => LayoutRouter}/>
                </Switch>
            </Router>
        )
    }
}


ReactDOM.render(
    <App />,
    document.getElementById("app")
);

I guess antd doesn't have modules loaded, it's all loaded.


reason why app.js is too large

  1. the code is not segmented (see ides/code-splitting-require/" rel=" nofollow noreferrer "> http://www.css88.com/doc/webp.)
  2. extraction of public modules is not written correctly. There is no common in entry (reference: https://webpack.toobug.net/zh.)

Why are you running? at least post the code of how you deploy the service, and what errors are reported on the page


compressing it with unlifyJs will be much smaller


it is recommended to use a tool to analyze it, find out the larger modules, and then ask questions.

Menu