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

Webpack为一个简单的服务器捆绑了一个大小为1.34mb的文件。对我来说，考虑到服务器的有限性，似乎不必要地大。我知道使用快递，反应，反应路由器等会使文件气球化，但对我来说，这看起来很大！使用Webpack，Node，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'] 
        } 
       } 
      ] 
     } 
    }

来源

2017-03-02 2K01B5

你可以uglify代码，而bundeling，应剃须〜50％的文件大小 – lonewarrior556

什么你要找的是一个Production build。

webpack -p

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

从这里您可以开始查看实际使您的包的大小，例如通过使用Webpack Bundle Analyzer。

正如你可以看到从mime-dbdb.json是迄今为止束的最大组成部分，占约四分之一的总规模。而总共react-dom也占用大致相同的空间。

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

yarn why mime-db

它告诉你：

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

所以你不能真正摆脱这一点。在使用Express和React的时候，你可能不会在捆绑包的大小上下得太多。

来源

2017-03-02 22:27:04

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

回答

相关问题