Webpack Code Splitting
Splitting code for better performance
Entry Points
entry: {
app: './src/app.js',
vendor: './src/vendor.js' # separate vendor code
}
Dynamic Import
// lazy load module
import('./module').then(module => { # dynamic import
module.default();
});
SplitChunks Plugin
optimization: {
splitChunks: {
chunks: 'all', # split all chunks
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
Magic Comments
import(
/* webpackChunkName: "my-chunk" */ # name chunk
'./module'
);