'Using loadable, common files are bundled into a common bundle
I am using loadable for code splitting. The problem is all my files which are being used in more than one file are bundle into my initial bundle which is making it too large. Instead I want them to be included in my particular route bundle which is opened. How can I solve this?
I want my files to be included in route bundle only. I don't want any common bundle.
This is my webpack config
{
"cache": true,
"context": "/src/client",
"entry": {
"desktop": "./app.desktop.jsx",
"mobile": "./app.mobile.jsx"
},
"output": {
"path": "repo_name/dist/js",
"pathinfo": false,
"publicPath": "https://{url}/js/",
"chunkFilename": "[contenthash].[name].js",
"filename": "[name].bundle.[contenthash].js"
},
"resolve": {
"alias": {},
"symlinks": true,
"plugins": [{
"source": "module",
"nmPath": "node_modules",
"originDir": "repo_name/node_modules/electrode-archetype-react-app-dev",
"target": "resolve"
}],
"modules": [
"repo_name/src",
"repo_name",
"node_modules"
],
"extensions": [
".js",
".jsx",
".json"
]
},
"resolveLoader": {
"symlinks": true,
"modules": [
"repo_name/lib",
"repo_name"
],
"plugins": [{
"source": "module",
"nmPath": "node_modules",
"originDir": "repo_name/node_modules/electrode-archetype-react-app-dev",
"target": "resolve"
}]
},
"module": {
"rules": [{
"test": {},
"use": [{
"loader": "repo_name/node_modules/babel-loader/lib/index.js",
"options": {
"cacheDirectory": "repo_name/.etmp/babel-loader"
}
}]
},
{
"test": {},
"use": [{
"loader": "repo_name/node_modules/mini-css-extract-plugin/dist/loader.js",
"options": {
"hmr": false,
"reload": false,
"publicPath": "/js/"
}
},
{
"loader": "repo_name/node_modules/css-loader/index.js",
"options": {
"context": "repo_name/src",
"modules": true,
"localIdentName": "[hash:base64:5]"
}
},
{
"loader": "repo_name/node_modules/postcss-loader/src/index.js",
"options": {
"ident": "postcss"
}
}
]
},
{
"test": {},
"use": [{
"loader": "repo_name/node_modules/mini-css-extract-plugin/dist/loader.js",
"options": {
"hmr": false,
"reload": false,
"publicPath": ""
}
},
{
"loader": "repo_name/node_modules/css-loader/index.js",
"options": {
"context": "repo_name/src",
"modules": true,
"localIdentName": "[hash:base64:5]"
}
},
{
"loader": "repo_name/node_modules/postcss-loader/src/index.js",
"options": {
"ident": "postcss"
}
},
{
"loader": "repo_name/node_modules/sass-loader/lib/loader.js"
}
]
},
{
"test": {},
"use": [{
"loader": "repo_name/node_modules/mini-css-extract-plugin/dist/loader.js",
"options": {
"hmr": false,
"reload": false,
"publicPath": ""
}
},
{
"loader": "repo_name/node_modules/css-loader/index.js",
"options": {
"context": "repo_name/src",
"modules": true,
"localIdentName": "[hash:base64:5]"
}
},
{
"loader": "repo_name/node_modules/postcss-loader/src/index.js",
"options": {
"ident": "postcss"
}
},
{
"loader": "repo_name/node_modules/stylus-relative-loader/index.js"
}
]
},
{
"test": {},
"use": [{
"loader": "repo_name/node_modules/url-loader/index.js",
"options": {
"limit": 1000,
"mimetype": "application/font-woff"
}
},
"repo_name/node_modules/isomorphic-loader/index.js"
]
},
{
"test": {},
"use": [
"repo_name/node_modules/file-loader/dist/cjs.js",
"repo_name/node_modules/isomorphic-loader/index.js"
]
},
{
"test": {},
"use": [{
"loader": "repo_name/node_modules/electrode-cdn-file-loader/index.js",
"options": {
"limit": 10000
}
},
"repo_name/node_modules/isomorphic-loader/index.js"
]
}
]
},
"plugins": [{
"options": {
"filename": "[name].style.[contenthash].css",
"chunkFilename": "[name].style.[contenthash].css"
},
"__name": "MiniCssExtractPlugin"
},
{
"pluginDescriptor": {
"name": "OptimizeCssAssetsWebpackPlugin"
},
"options": {
"assetProcessors": [{
"phase": "compilation.optimize-chunk-assets",
"regExp": {}
}],
"assetNameRegExp": {},
"cssProcessorOptions": {
"zindex": false
},
"cssProcessorPluginOptions": {}
},
"phaseAssetProcessors": {
"compilation.optimize-chunk-assets": [{
"phase": "compilation.optimize-chunk-assets",
"regExp": {}
}],
"compilation.optimize-assets": [],
"emit": []
},
"deleteAssetsMap": {},
"__name": "OptimizeCssAssetsWebpackPlugin"
},
{
"options": {
"minimize": true,
"options": {
"context": "repo_name/src"
},
"test": {}
},
"__name": "LoaderOptionsPlugin"
},
{
"opts": {
"filename": "../server/stats.json",
"fields": [
"assetsByChunkName",
"assets",
"entrypoints",
"chunks"
]
},
"__name": "StatsWriterPlugin"
},
{
"config": {
"valid": false
},
"options": {
"assetsFile": "../isomorphic-assets.json",
"configFile": "repo_name/.isomorphic-loader-config.json",
"webpackDev": {
"url": "http://localhost:2992",
"addUrl": false
}
},
"__name": "IsomorphicLoaderPlugin"
},
{
"opts": {
"filename": "../server/loadable-stats.json",
"outputAsset": true
},
"compiler": null,
"__name": "LoadablePlugin"
},
{
"resourceRegExp": {},
"newContentRegExp": {},
"__name": "ContextReplacementPlugin"
},
{
"sourceMapFilename": "../map/[file].map",
"sourceMappingURLComment": "\n//# sourceMappingURL=/map/[url]",
"moduleFilenameTemplate": "webpack://[namespace]/[resourcePath]",
"fallbackModuleFilenameTemplate": "webpack://[namespace]/[resourcePath]?[hash]",
"namespace": "",
"options": {
"filename": "../map/[file].map",
"append": "\n//# sourceMappingURL=/map/[url]"
},
"__name": "SourceMapDevToolPlugin"
},
{
"isWatch": true,
"__name": "FailPlugin"
},
{
"__name": "DonePlugin"
},
{
"opts": {
"analyzerMode": "server",
"analyzerHost": "127.0.0.1",
"analyzerPort": 8888,
"reportFilename": "report.html",
"defaultSizes": "parsed",
"openAnalyzer": true,
"generateStatsFile": false,
"statsFilename": "stats.json",
"statsOptions": null,
"excludeAssets": null,
"logLevel": "info",
"startAnalyzer": true
},
"server": null,
"logger": {
"activeLevels": {}
}
},
{
"options": {},
"timeEventData": {},
"smpPluginAdded": true
}
],
"mode": "production",
"optimization": {
"splitChunks": {
"cacheGroups": {
"node_vendors": {
"name": "node_vendor",
"test": {},
"chunks": "initial",
"priority": 1
},
"sentry": {
"name": "sentry",
"test": {},
"chunks": "all",
"priority": 10
}
}
}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
