1
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']
}
}
]
}
}
バンドル中にコードを醜くすることができます。ファイルサイズを50％オフにする必要があります – lonewarrior556