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'
);