使用 Webpack、Node、Express、React、React-Router 时的文件大小

Question

Webpack 正在为一个简单的服务器打包一个大小为 1.34mb 的文件。对我来说，考虑到服务器的有限性，它似乎不必要地大。我知道使用 express、react、react-router 等会使文件膨胀，但对我来说，它看起来很大！

首先，我想知道我是否正确使用了webpack？其次，我应该从哪里开始着手缩小它？

server.js

var express = require('express')
var path = require('path')

import React from 'react'
import { match, RouterContext } from 'react-router'
import { renderToString } from 'react-dom/server'
import routes from './src/routes/routes'

var app = express()

app.use(express.static(path.join(__dirname, 'public')))

app.use(function(rq, rs, nx){
    console.log("rq.url: ", rq.url)
    nx()
})

app.get('*', function(req, res){

    match({
        routes: routes,
        location: req.url
    }, (err, redirect, props) => {

        if(err){
            res.status(500).send(err.message)   
        } else if(redirect) {
            res.redirect(redirect.pathname + redirect.search)
        } else if (props) {
            console.log("PROPS: ", props)

            let appHtml = renderToString(<RouterContext {...props} />)

            res.status(200).send(renderPage(appHtml))       
        } else {
            res.status(404).send('Not Found')
        }                        
    })
})

var PORT = process.env.PORT || 8089

app.listen(PORT, function(){
    console.log('listening on port ' + PORT)
})

function renderPage(appHtml){
    return `
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title>React With Server</title>
            </head>
            <body>
                <div id="main">${appHtml}</div>
                <script src="/javascript/bundle.js"></script>
            </body>
        </html>
    `
}

webapack.config.js:

module.exports = {
        entry: path.resolve(__dirname, 'server.js'),
        output: {
            filename: 'server.bundle.js',
            path: __dirname
        },
        target: 'node',
        node: {
            __filename: true,
            __dirname: true
        },
        module: {
            rules: [
                {
                    loader: 'babel-loader',
                    test: /\.js$/,
                    exclude: /node_modules/,
                    options: {
                        presets: ['latest', 'react']
                    }
                }
            ]
        }
    }

Answer 1

您要找的是 Production build。

webpack -p

-p 标志会自动启用生产模式，从而优化捆绑包。或者您可以配置这些步骤 manually。有了这个包的大小只有原来的 1/3。

从这里您可以开始查看实际上是什么使您的捆绑包达到现在的大小，例如通过使用 Webpack Bundle Analyzer.

如您所见，mime-db 中的 db.json 是迄今为止包中最大的部分，约占总大小的四分之一。而react-dom加起来也占了差不多space.

您可能想知道为什么捆绑包中有 mime-db。如果您使用 Yarn, you can run the why 命令：

yarn why mime-db

这告诉你：

This module exists because "express#accepts#mime-types" depends on it.

所以你无法真正摆脱它。在使用 Express 和 React 时，您可能不会获得更小的包大小。

使用 Webpack、Node、Express、React、React-Router 时的文件大小

File size when using Webpack, Node, Express, React, React-Router

javascript

node.js

webpack-2