mirror of
https://github.com/aleleba/create-react-ssr.git
synced 2025-01-09 05:26:58 -06:00
PR-753737: Se agregan los vendors y la optimizacion para el build.
This commit is contained in:
parent
dd5bc3c55a
commit
e87a638e7d
198
src/package-lock.json
generated
198
src/package-lock.json
generated
@ -22,7 +22,8 @@
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-router-hash-link": "^2.4.3",
|
||||
"redux": "^4.1.2",
|
||||
"webpack": "^5.72.0"
|
||||
"webpack": "^5.72.0",
|
||||
"webpack-manifest-plugin": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.17.9",
|
||||
@ -31,6 +32,7 @@
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
|
||||
"babel-loader": "^8.2.4",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
"compression-webpack-plugin": "^9.2.0",
|
||||
"css-loader": "^6.7.1",
|
||||
"css-minimizer-webpack-plugin": "^3.4.1",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
@ -3206,6 +3208,79 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/compression-webpack-plugin": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-9.2.0.tgz",
|
||||
"integrity": "sha512-R/Oi+2+UHotGfu72fJiRoVpuRifZT0tTC6UqFD/DUo+mv8dbOow9rVOuTvDv5nPPm3GZhHL/fKkwxwIHnJ8Nyw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"schema-utils": "^4.0.0",
|
||||
"serialize-javascript": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12.13.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"webpack": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/compression-webpack-plugin/node_modules/ajv": {
|
||||
"version": "8.11.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
|
||||
"integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"json-schema-traverse": "^1.0.0",
|
||||
"require-from-string": "^2.0.2",
|
||||
"uri-js": "^4.2.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/compression-webpack-plugin/node_modules/ajv-keywords": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
|
||||
"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"ajv": "^8.8.2"
|
||||
}
|
||||
},
|
||||
"node_modules/compression-webpack-plugin/node_modules/json-schema-traverse": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
||||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/compression-webpack-plugin/node_modules/schema-utils": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
|
||||
"integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/json-schema": "^7.0.9",
|
||||
"ajv": "^8.8.0",
|
||||
"ajv-formats": "^2.1.1",
|
||||
"ajv-keywords": "^5.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12.13.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/compression/node_modules/debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
@ -7346,6 +7421,11 @@
|
||||
"websocket-driver": "^0.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/source-list-map": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
|
||||
"integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
@ -8328,6 +8408,41 @@
|
||||
"strip-ansi": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-manifest-plugin": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-5.0.0.tgz",
|
||||
"integrity": "sha512-8RQfMAdc5Uw3QbCQ/CBV/AXqOR8mt03B6GJmRbhWopE8GzRfEpn+k0ZuWywxW+5QZsffhmFDY1J6ohqJo+eMuw==",
|
||||
"dependencies": {
|
||||
"tapable": "^2.0.0",
|
||||
"webpack-sources": "^2.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.22.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"webpack": "^5.47.0"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-manifest-plugin/node_modules/source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-manifest-plugin/node_modules/webpack-sources": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
|
||||
"integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
|
||||
"dependencies": {
|
||||
"source-list-map": "^2.0.1",
|
||||
"source-map": "^0.6.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-merge": {
|
||||
"version": "5.8.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
|
||||
@ -10892,6 +11007,57 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"compression-webpack-plugin": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-9.2.0.tgz",
|
||||
"integrity": "sha512-R/Oi+2+UHotGfu72fJiRoVpuRifZT0tTC6UqFD/DUo+mv8dbOow9rVOuTvDv5nPPm3GZhHL/fKkwxwIHnJ8Nyw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"schema-utils": "^4.0.0",
|
||||
"serialize-javascript": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ajv": {
|
||||
"version": "8.11.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
|
||||
"integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"json-schema-traverse": "^1.0.0",
|
||||
"require-from-string": "^2.0.2",
|
||||
"uri-js": "^4.2.2"
|
||||
}
|
||||
},
|
||||
"ajv-keywords": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
|
||||
"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-deep-equal": "^3.1.3"
|
||||
}
|
||||
},
|
||||
"json-schema-traverse": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
||||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
|
||||
"dev": true
|
||||
},
|
||||
"schema-utils": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
|
||||
"integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/json-schema": "^7.0.9",
|
||||
"ajv": "^8.8.0",
|
||||
"ajv-formats": "^2.1.1",
|
||||
"ajv-keywords": "^5.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -13894,6 +14060,11 @@
|
||||
"websocket-driver": "^0.7.4"
|
||||
}
|
||||
},
|
||||
"source-list-map": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
|
||||
"integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
@ -14601,6 +14772,31 @@
|
||||
"strip-ansi": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"webpack-manifest-plugin": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-5.0.0.tgz",
|
||||
"integrity": "sha512-8RQfMAdc5Uw3QbCQ/CBV/AXqOR8mt03B6GJmRbhWopE8GzRfEpn+k0ZuWywxW+5QZsffhmFDY1J6ohqJo+eMuw==",
|
||||
"requires": {
|
||||
"tapable": "^2.0.0",
|
||||
"webpack-sources": "^2.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
||||
},
|
||||
"webpack-sources": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
|
||||
"integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
|
||||
"requires": {
|
||||
"source-list-map": "^2.0.1",
|
||||
"source-map": "^0.6.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"webpack-merge": {
|
||||
"version": "5.8.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
|
||||
|
||||
@ -36,7 +36,8 @@
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-router-hash-link": "^2.4.3",
|
||||
"redux": "^4.1.2",
|
||||
"webpack": "^5.72.0"
|
||||
"webpack": "^5.72.0",
|
||||
"webpack-manifest-plugin": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.17.9",
|
||||
@ -45,6 +46,7 @@
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
|
||||
"babel-loader": "^8.2.4",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
"compression-webpack-plugin": "^9.2.0",
|
||||
"css-loader": "^6.7.1",
|
||||
"css-minimizer-webpack-plugin": "^3.4.1",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
|
||||
11
src/server/getHashManifest.js
Normal file
11
src/server/getHashManifest.js
Normal file
@ -0,0 +1,11 @@
|
||||
import fs from 'fs';
|
||||
|
||||
const getHashManifest = () => {
|
||||
try {
|
||||
return JSON.parse(fs.readFileSync(`${__dirname}/../build/assets/manifest-hash.json`))
|
||||
}catch(err){
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
export default getHashManifest
|
||||
@ -19,6 +19,8 @@ import { createStore } from 'redux'; //, applyMiddleware
|
||||
import { Provider } from 'react-redux';
|
||||
import reducer from '../frontend/reducers';
|
||||
import initialState from '../frontend/reducers/initialState';
|
||||
//Get Hashes
|
||||
import getHashManifest from './getHashManifest';
|
||||
//App
|
||||
import App from '../frontend/components/App';
|
||||
|
||||
@ -41,13 +43,29 @@ if(env === 'development'){
|
||||
}));
|
||||
}else{
|
||||
app
|
||||
.use((req, res, next) => {
|
||||
if(!req.hashManifest) req.hashManifest = getHashManifest();
|
||||
next();
|
||||
})
|
||||
.use(express.static(`${__dirname}/../build`))
|
||||
.use(helmet())
|
||||
.use(helmet.permittedCrossDomainPolicies())
|
||||
.use(helmet({
|
||||
contentSecurityPolicy: {
|
||||
directives: {
|
||||
...helmet.contentSecurityPolicy.getDefaultDirectives(),
|
||||
"script-src": ["'self'", "'unsafe-inline'"],//"example.com"
|
||||
},
|
||||
},
|
||||
}))
|
||||
.disable('x-powered-by');
|
||||
}
|
||||
|
||||
const setResponse = (html, preloadedState) => {
|
||||
const setResponse = (html, preloadedState, manifest) => {
|
||||
const mainStyles = manifest ? manifest['main.css'] : 'assets/app.css';
|
||||
const mainBuild = manifest ? manifest['main.js'] : 'assets/app.js';
|
||||
const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
|
||||
|
||||
return(`
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
@ -55,7 +73,7 @@ const setResponse = (html, preloadedState) => {
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="assets/app.css" rel="stylesheet" type="text/css"></link>
|
||||
<link href="${mainStyles}" rel="stylesheet" type="text/css"></link>
|
||||
<title>App</title>
|
||||
</head>
|
||||
<body>
|
||||
@ -63,7 +81,8 @@ const setResponse = (html, preloadedState) => {
|
||||
<script>
|
||||
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
|
||||
</script>
|
||||
<script src="assets/app.js" type="text/javascript"></script>
|
||||
<script src="${mainBuild}" type="text/javascript"></script>
|
||||
<script src="${vendorBuild}" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
`)
|
||||
@ -79,7 +98,7 @@ const renderApp = (req, res) => {
|
||||
</StaticRouter>
|
||||
</Provider>
|
||||
)
|
||||
res.send(setResponse(html, preloadedState));
|
||||
res.send(setResponse(html, preloadedState, req.hashManifest));
|
||||
};
|
||||
|
||||
app.get('*', renderApp)
|
||||
|
||||
@ -48,4 +48,23 @@ module.exports = {
|
||||
'process.env': JSON.stringify(dotenv.parsed),
|
||||
}),
|
||||
],
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: 'async',
|
||||
cacheGroups: {
|
||||
vendors: {
|
||||
name: 'vendors',
|
||||
chunks: 'all',
|
||||
reuseExistingChunk: true,
|
||||
priority: 1,
|
||||
filename: 'assets/vendor.js',
|
||||
enforce: true,
|
||||
test (module, chunks){
|
||||
const name = module.nameForCondition && module.nameForCondition();
|
||||
return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
const path = require('path');
|
||||
const dotenv = require('dotenv').config();
|
||||
const webpack = require('webpack');
|
||||
const CompressionWebpackPlugin = require('compression-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: './frontend/index.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'build'),
|
||||
filename: 'assets/app.js',
|
||||
filename: 'assets/app-[fullhash].js',
|
||||
publicPath: '/',
|
||||
},
|
||||
resolve: {
|
||||
@ -41,8 +43,15 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new CompressionWebpackPlugin({
|
||||
test: /\.(js|css)$/,
|
||||
filename: '[path][base].gz',
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'assets/app.css',
|
||||
filename: 'assets/app-[fullhash].css',
|
||||
}),
|
||||
new WebpackManifestPlugin({
|
||||
fileName: 'assets/manifest-hash.json',
|
||||
}),
|
||||
new CleanWebpackPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
@ -55,5 +64,22 @@ module.exports = {
|
||||
new CssMinimizerPlugin(),
|
||||
new TerserPlugin(),
|
||||
],
|
||||
splitChunks: {
|
||||
chunks: 'async',
|
||||
cacheGroups: {
|
||||
vendors: {
|
||||
name: 'vendors',
|
||||
chunks: 'all',
|
||||
reuseExistingChunk: true,
|
||||
priority: 1,
|
||||
filename: 'assets/vendor-[fullhash].js',
|
||||
enforce: true,
|
||||
test (module, chunks){
|
||||
const name = module.nameForCondition && module.nameForCondition();
|
||||
return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user