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总共也占用了相同的空间。

您可能想知道为什么捆绑中有mime-db。如果您使用Yarn，则可以运行why命令：

yarn why mime-db

告诉你：

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

所以你无法摆脱这种情况。使用Express和React时，你可能不会在捆绑包中获得更低的尺寸。

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

1 个答案: