Webpack
The build system for Lore
The build system for Lore
Webpack defaults to putting all JavaScript files in a single bundle.js, but the default Lore config breaks the code up into two chunks; one for vendor files, and one for the main application code.
If you compare the output between the example development build and production build, you can see that the minification and uglification process has a significant impact in the size of the final JavaScript files.
The bundle.main.js file in the production build was reduced from 5.17 MBto 1.41 MB, and the bundle.vendor.js file was reduced from 1.04 MB to 197 kB.
That may seem a bit unbalanced, as one file clearly has more code than the other, so feel free to adjust the packages included in each bundle to play with the sizes.
If you want to experiment with the effect chunk size has on page load time, you can add and remove libraries from the vendor chunk by modifying this section in the webpack.config.js file:
...
entry: {
main: './index.js',
vendor: [
'react',
'react-dom',
'react-router'
]
},
...
This section of the Webpack config that controls this behavior is shown below:
entry: {
main: './index.js',
vendor: [
'react',
'react-dom',
'react-router'
]
},
...
ifProduction(new webpack.optimize.CommonsChunkPlugin({
names: [
'vendor'
]
})),