admin管理员组文章数量:1336340
I am working on a web app containing widgets that should be lazily loaded using dynamic imports. Each widget should receive its separate bundle for it and their dependencies to only be fetched by the browser once it is being requested by the user. There's an exception to this: Popular widgets should be included in the main bundle as well as the library classes they use or extend. Below you see the folder structure I intend to achieve and the output I aim for:
File Structure Desired chunk
src/
├── widgets/
│ ├── popular-widget/index.ts main
│ ├── edge-case-widget/index.ts edge-case-widget
│ └── interesting-widget/index.ts interesting-widget
├── library/
│ ├── Widget.ts main
│ └── WidgetFactory.ts main
└── index.ts main (incl. entry point)
dist/
├── edge-case-widget.app.js edge-case-widget
├── interesting-widget.app.js interesting-widget
└── main.app.js main (incl. entry point)
To lazily load widgets I am using following expression in a create
method in WidgetFactory
. This works fine, the widget modules get magically picked up by Webpack.
const Widget = await import(`../widgets/${name}/index`)
I was trying to solve the code splitting challenge by configuring optimization.splitChunks.cacheGroups
in Webpack. Providing a test
function I allocate modules into either the library
or widgets
cache group.
module.exports = {
entry: './src/index.ts',
[...]
optimization: {
splitChunks: {
cacheGroups: {
library: {
test: module => isInLibrary(module.identifier()),
name: 'library',
chunks: 'all',
minSize: 0
},
widgets: {
test: module => isWidgetBundle(module.identifier()),
name: module => widgetNameFromModuleId(module.identifier()),
chunks: 'async',
minSize: 0
}
}
}
}
}
I am stuck!
- How can I include widget dependencies in the widget bundles?
- Using
chunks: 'async'
on thelibrary
cache group make some library classes go to themain
chunk while others stay in thelibrary
chunk. Why? - When I use
chunks: 'all'
on thelibrary
cache group all modules properly get bined in it but I lose the entry point on themain
chunk and get a blank page. How? - When I rename the
library
cache group tomain
I lose the entry point, as documented here. I don't quite understand why this is the case and how I manage to bine themain
entry point with thelibrary
into a single bundle.
Hopefully you can shed some light onto my steep learning curve with Webpack.
I am working on a web app containing widgets that should be lazily loaded using dynamic imports. Each widget should receive its separate bundle for it and their dependencies to only be fetched by the browser once it is being requested by the user. There's an exception to this: Popular widgets should be included in the main bundle as well as the library classes they use or extend. Below you see the folder structure I intend to achieve and the output I aim for:
File Structure Desired chunk
src/
├── widgets/
│ ├── popular-widget/index.ts main
│ ├── edge-case-widget/index.ts edge-case-widget
│ └── interesting-widget/index.ts interesting-widget
├── library/
│ ├── Widget.ts main
│ └── WidgetFactory.ts main
└── index.ts main (incl. entry point)
dist/
├── edge-case-widget.app.js edge-case-widget
├── interesting-widget.app.js interesting-widget
└── main.app.js main (incl. entry point)
To lazily load widgets I am using following expression in a create
method in WidgetFactory
. This works fine, the widget modules get magically picked up by Webpack.
const Widget = await import(`../widgets/${name}/index`)
I was trying to solve the code splitting challenge by configuring optimization.splitChunks.cacheGroups
in Webpack. Providing a test
function I allocate modules into either the library
or widgets
cache group.
module.exports = {
entry: './src/index.ts',
[...]
optimization: {
splitChunks: {
cacheGroups: {
library: {
test: module => isInLibrary(module.identifier()),
name: 'library',
chunks: 'all',
minSize: 0
},
widgets: {
test: module => isWidgetBundle(module.identifier()),
name: module => widgetNameFromModuleId(module.identifier()),
chunks: 'async',
minSize: 0
}
}
}
}
}
I am stuck!
- How can I include widget dependencies in the widget bundles?
- Using
chunks: 'async'
on thelibrary
cache group make some library classes go to themain
chunk while others stay in thelibrary
chunk. Why? - When I use
chunks: 'all'
on thelibrary
cache group all modules properly get bined in it but I lose the entry point on themain
chunk and get a blank page. How? - When I rename the
library
cache group tomain
I lose the entry point, as documented here. I don't quite understand why this is the case and how I manage to bine themain
entry point with thelibrary
into a single bundle.
Hopefully you can shed some light onto my steep learning curve with Webpack.
Share Improve this question edited Nov 18, 2019 at 15:54 ffraenz asked Nov 17, 2019 at 14:01 ffraenzffraenz 6602 gold badges10 silver badges35 bronze badges2 Answers
Reset to default 5 +50created a simple github repo with configuration you need.
- SplitChunks configuration (change
test
andname
functions to yours if you want):
splitChunks: {
cacheGroups: {
widgets: {
test: module => {
return module.identifier().includes('src/widgets');
},
name: module => {
const list = module.identifier().split('/');
list.pop();
return list.pop();
},
chunks: 'async',
enforce: true
}
}
}
- If you want PopularWidget to be in
main
, you should not import it dynamically. Use regularimport
statement. Because webpack will ALWAYS create a new chunk for any dynamic import. So please take a look at this file.
import { Widget } from '../widgets/popular-widget';
export class WidgetFactory {
async create(name) {
if (name === 'popular-widget') return await Promise.resolve(Widget);
return await import(`../widgets/${name}/index`)
}
}
UPD
Changed configuration to keep related node_modules with widgets.
I wrote two simple functions for new widgets chunk creation.
The trick here is module.issuer
property which means who imported this file. So function isRelativeToWidget
will return true for any dependencies (node_modules or not) imported at any depth of widget's file structure.
Code can be found here.
Resulting configuration:
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: false,
default: false,
edgeCaseWidget: getSplitChunksRuleForWidget('edge-case-widget'),
interestingWidget: getSplitChunksRuleForWidget('interesting-widget')
}
}
function isRelativeToWidget(module, widgetName) {
if (module.identifier().includes(widgetName)) return true;
if (module.issuer) return isRelativeToWidget(module.issuer, widgetName)
}
function getSplitChunksRuleForWidget(widgetName) {
return {
test: module => isRelativeToWidget(module, widgetName),
name: widgetName,
chunks: 'async',
enforce: true,
}
}
According to what I usually use in my Webpack (v4) configuration, I'd configure it this way:
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: true,
cacheGroups: {
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
library: {
test: module => module => isInLibrary(module.identifier()),
chunks: 'all',
enforce: true
},
}
}
If widgets are only required lazily, do not add widgets
to the cacheGroups.
Webpack should resolve the widget dependencies in library for each async require.
I didn't try forcing bundle names but I think it will behave the same.
本文标签:
版权声明:本文标题:javascript - Webpack: Split dynamic imported modules into separate chunks while keeping the library in the main bundle - Stack O 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742289118a2447471.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论