libraryTarget UMD and code splitting #6818
Description
Do you want to request a feature or report a bug?
Feature
What is the current behavior?
When splitting code in webpack, the chunks are loaded with temporary script tags:
/******/ var head = document.getElementsByTagName('head')[0];
/******/ var script = document.createElement('script');
/******/ script.type = 'text/javascript';
/******/ script.charset = 'utf-8';
/******/ script.async = true;
/******/ script.timeout = 120000;
/******/ script.src = __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "." + "<some_key>" + ".js";What is the expected behavior?
All chunks are wrapped within UMD blocks.
If this is a feature request, what is motivation or use case for changing the behavior?
When creating an umd library, the library might be loaded by another bundler again (webpack, jspm, etc.). In that case, the script tag loading isn't nice. It would be better to keep the AMD (or System.import for webpack 2) in the chunks which will be interpreted by the other bundler. I didn't find an option to enable this. Is it a missing feature? Or am I missing something and code splitting in umd libraries not possible?
Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.
Reopens #2471
Activity
AndyOGo commentedon Mar 27, 2018
@sokra
Did you have any chance to look into this?
Your feedback would be very much appreciated, especially since the last issue just got lost and automatically closed...
sokra commentedon Mar 29, 2018
This is not supported yet.
AndyOGo commentedon Mar 29, 2018
@sokra
Thanks for your reply.
Yes I know that, hence the issue.
mspoerer commentedon May 16, 2018
+1
import()internally #7843theiliad commentedon Sep 21, 2018
Any updates on this?
thebestnom commentedon Oct 17, 2018
I would really like it too, any updates on it?
Updated package.json to use module rather than main
bstst commentedon Apr 26, 2019
Was investigating this right now. And can't see this happening any time soon.
You library may be imported in to different projects with different asset delivery pipelines, and to deliver an async chunk your library needs to know where to look for it, a generic
publicPath: '/assets/won't simply work here. And for you library to know where to look for a chunk — there needs to be a generic way to pass this information to it. And there is no such generic mechanism.egucciar commentedon May 6, 2019
Yes, this would be awesome to fix. For now I'll continue to use rollup as this blocks me from using webpack for my bundle-split library.
MrBr commentedon Oct 7, 2019
I've built a Vendor injection plugin that solves this issue. I am actually not very familiar with webpack and I've improvised a lot to get it working. It works with CRA (create React application) application webpack config, but I guess it shouldn't be too hard to adapt it to non-CRA projects.
The current implementation is used solely for development. Useful in a monorepo structure, should speed up build time and help reduce the source map size of internal packages (libraries). Build time should improve in a case when working on multiple packages at the same time.
The idea is to split a library bundle into 2, vendors (modules) and the source. Making changes in a package source should build only the source bundle (as long as dependencies aren't changed).
For bundle caching add
HardSourceWebpackPlugin. Both plugins work with CSS as well.VendorsInjectionPlugin gist
Anyhow, I would really appreciate feedback and improvements suggestion as I believe it's not written in best webpack fashion.
ghost commentedon Feb 25, 2020
Would love to see something like this. I have a library that would greatly benefit from code-splitting.
webpack-bot commentedon Jan 16, 2021
This issue had no activity for at least three months.
It's subject to automatic issue closing if there is no activity in the next 15 days.
AndyOGo commentedon Jan 16, 2021
still an issue @webpack-bot
bdsanfelippo commentedon Jun 3, 2021
Does anyone have any good workarounds for this issue? Had a library that was umd. Library became too large, so split it into chunks but would still like to load it in similar fashion as before.
thebestnom commentedon Jun 4, 2021
@bdsanfelippo in the end I just wrote and transpiled directly with babel...
sedghi commentedon Aug 15, 2022
Is there any update for this?
tsi commentedon Dec 26, 2022
@AndyOGo @sokra is this really specific to
type: 'umd'? will this be any different with other types?As the library author, is there any property I can specify in my
package.jsonthat will tell the consuming bundlers to copy the chunks and put them beside the compiled output?karanrainafynd commentedon Apr 12, 2023
Any updates on this issue? Does anyone have a workaround ?