-
-
Notifications
You must be signed in to change notification settings - Fork 874
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vendor bundling example #758
Comments
Same here, doesn't work. |
Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal. |
Vendor bundling is pretty important, so would be good to get this fixed. I might have some time to look at it in the next few weeks |
Hi, this example still doesn't work. I can't figure it out why. Vendor bundle doesn't include any react code, same with other libs. Please, can somebody help me with this? Thanks |
Review the documentation on |
Scratch that. Tried a number of things and couldn't get splitChunks to work. Don't have time to continue on this right now. |
Any updates on this? I really need to get vendor splitting to work as after code splitting with react-loadable, the main bundle size is still 1mb after gzip 😭 |
Okay I am not sure if this solves it but I got vendor splitting to work using cacheGroups instead.
This thread from stackoverflow helped me. |
Followed Webpack site: split chunks example optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
name: 'vendor',
chunks: 'all',
}
}
}
} This worked for me. I can see And we do not even need this part in the example (still work when comment it out), not sure how we deal with razzle/polyfills though config.entry.vendor = [
require.resolve('razzle/polyfills'),
require.resolve('react'),
require.resolve('react-dom'),
// ... add any other vendor packages with require.resolve('xxx')
]; If @jaredpalmer can help confirm this is the right way, I can submit PR to update the example |
@6thfdwp I can confirm your solution worked for me as well. Thanks for sharing it. To include razzle/polyfills in your example, I think you should be able to just do this: vendor: {
test: /[\\/]node_modules[\\/](razzle|react|react-dom)[\\/]/,
name: 'vendor',
chunks: 'all',
} The way in the docs seems to explicitly state each module to include in the vendor, whereas using Edit: It seems that disables splitting the vendor bundle into chunks, which isn't ideal for production builds (see here). So it will work, but will increase the vendor bundle filesize and prevent it from being chunked up which may not be ideal. |
In order to support vendor bundle splitting in production, it seems you need to use webpack's // Some additional imports:
const ManifestPlugin = require('webpack-manifest-plugin');
const { extname } = require('path');
// Replace the existing AsetsWebpackPlugin with ManifestPlugin:
config.plugins = config.plugins.map((plugin) => {
if (plugin.constructor.name === 'AssetsWebpackPlugin') {
return new ManifestPlugin({
fileName: '../assets.json',
writeToFileEmit: true,
generate: (seed, files) => (
files.filter(file => !file.isAsset).reduce((manifest, { name, path }) => {
// Group files by extension in the manifest
const ext = extname(path).substr(1);
manifest[ext] = manifest[ext] || [];
manifest[ext].push(path);
return manifest;
}, seed)
),
});
}
return plugin;
});
// Do vendor splitting:
config.entry.vendor = [
require.resolve('razzle/polyfills'),
require.resolve('react'),
require.resolve('react-dom'),
];
config.optimization = {
splitChunks: {
chunks: 'all',
name: dev ? 'vendor' : false,
},
}; You need to specify a Then you can import all the assets in your app like so: ${assets.css ? assets.css.reduce((styles, asset) => `${styles}<link rel="stylesheet" ref="${asset}">`, '') : ''}
${assets.js.reduce((scripts, asset) => `${scripts}<script src="${asset}" defer></script>`, '')} Perhaps Razzle should migrate to using the |
@scraton Thanks for sharing and explanation. So what you suggested here will produce more chunks, while the Webpack site example using test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
name: 'vendor', will always give one chunk Is this also the reason why the |
I gave it another try to no avail. Using splitChunks leads to endless reloads and no matter what I do, no vendor.js is generated. Tried various .env vars |
Well, got it done. No idea, why I didn't before. Here's my working config.
|
@mschipperheyn Could you please send a PR ? |
Should be fixed in dev but not using vendors but chunkGroups config |
The vendor bundling example doesn't appear to work as intended. I pulled and ran it and although everything server-rendered fine the output bundles look far too small—React + React DOM can't be 6kb total. Also the client-side code just doesn't run—the click-handler in the example doesn't appear to do anything.
I reproduced this in my own Razzle project too by copying the same config over. I'm not sure exactly what's going on because I'm far from a webpack expert but I know webpack 4 made a lot of changes to commons chunks etc, so is it possible that broke this?
Also probably unrelated to this but the example code in the README doesn't match the project code (and appear to not even build correctly)
The text was updated successfully, but these errors were encountered: