使用Webpack，Node，Express，React，React-Router时的文件大小
Webpack捆绑一个文件到一个简单的服务器为1.34mb的大小。 对我来说，考虑到服务器的有限性，似乎是不必要的大。 我知道，使用快递，反应，反应路由器等将气球的文件，但对我来说，这似乎是巨大的！
首先，我想知道我是否正确使用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'] } } ] } }
你正在寻找的是一个生产版本 。
webpack -p
-p标志自动启用生产模式，从而优化软件包。 或者您可以手动configuration这些步骤。 有了这个包的大小只有原来的三分之一。
从这里开始，您可以开始查看实际使您的包的大小，例如使用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的时候，你的捆绑大小可能不会太小。