I have large application, and I want split it. Currently I have this structure:
application.js < entry point
Messages.js < application.js inner module
SystemSetup.js < application.js inner module
/node_modules/react.js < node modules
Common.js < local file, used inside of Messages and SystemSetup
Is it possible to split it into same chunks? I mean, I need to get
Common.js < module(chunk) with no dependencies
node_module.js < module(chunk) without dependencies
Messages.js < depends from Common and node_modules
SystemSetup.js < depends from Common and node_modules
application.js < depends from Messages and SystemSetup
Currently I made this webpack config file:
const path = require('path');
const WebpackNotifierPlugin = require('webpack-notifier');
const AsyncChunkNames = require('webpack-async-chunk-names-plugin');
const Profile = require('./src/js/Profile');
const production = Profile.environment === 'prod';
module.exports = {
mode: production ? 'production' : 'development',
entry: {
application: './src/js/Application.js',
Messages: './src/js/components/routes/Messages.js',
SystemSetup: './src/js/components/routes/SystemSetup.js'
},
output: {
path: path.resolve(__dirname, '../assets/js/'),
filename: '[name].js',
chunkFilename: '[name].js',
publicPath: "/"
},
cache: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
watchOptions: {
ignored: /node_modules/
},
plugins: [
new WebpackNotifierPlugin({alwaysNotify: true, title: 'Webpack JS job'}),
new AsyncChunkNames()
],
devtool: 'source-map',
resolve: {
alias: {
root: path.join(__dirname, 'src/js/'),
'~': path.resolve(__dirname, 'src/js/'),
}
},
optimization: {
splitChunks: production ? {} : {
cacheGroups: {
default: false,
vendors: false,
node_modules: {
name: 'node_modules',
chunks: 'all',
test: /node_modules/,
priority: 40
},
common: {
name: 'common',
minChunks: 2,
chunks: 'all',
priority: 20,
reuseExistingChunk: true,
enforce: true
},
Messages: {
name: 'Messages',
chunks: 'all',
test: /.*\/Messages\.js$/,
reuseExistingChunk: true,
priority: 30
},
SystemSetup: {
name: 'SystemSetup',
chunks: 'all',
test: /.*\/SystemSetup\.js$/,
reuseExistingChunk: true,
priority: 30
},
}
}
}
};
I got all bundles - But result is not good. I have such files:
Common.js < 11mb files, expected around 5mb
node_module.js < 3.7 mb < looks good
Messages.js < 7kb, expected around 3mb
SystemSetup.js < 7kb, expected around 3mb
application.js < 7kb < looks good