Javascript 使用网页包、节点、Express、React、React路由器时的文件大小_Javascript_Node.js_Webpack 2

Javascript 使用网页包、节点、Express、React、React路由器时的文件大小

javascript node.js

Javascript 使用网页包、节点、Express、React、React路由器时的文件大小,javascript,node.js,webpack-2,Javascript,Node.js,Webpack 2,Webpack正在为一个简单的服务器绑定一个1.34mb大小的文件。对我来说，考虑到服务器的局限性，它似乎太大了。我知道使用express、react、react router等会使文件膨胀，但对我来说，它似乎很大首先，我想知道我是否正确使用了webpack？第二，我应该从哪里着手使它变小 server.js var express = require('express') var path = require('path') import React from 'react' import

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

你要找的是一份工作

-p

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

从这里，您可以开始查看包的实际大小，例如使用

正如您所看到的，

db.json

from是到目前为止捆绑包中最大的一部分，大约占总规模的四分之一。而且，

react-dom

总共也占用了大约相同的空间

您可能想知道为什么捆绑包中有

mime db

。如果正在使用，则可以运行以下命令：

这告诉你：

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

所以你真的无法摆脱它。使用Express和React时，捆绑包的大小可能不会太小。

在捆绑时，您可能会使代码变丑，文件大小应减少约50%

webpack -p

yarn why mime-db

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