Skip to content

feat: add support for link preload/prefetch #1043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexander-akait merged 9 commits into from
Apr 16, 2024
Merged

feat: add support for link preload/prefetch #1043

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4bc0aae
feat: add webpackPrefetch support for css files
FogelAI Jul 13, 2023
978b5fa
feat: add webpackPreload support for css files
FogelAI Jul 13, 2023
d14f62c
fix: avoid prefetch/preload of loaded CSS files
FogelAI Jul 13, 2023
b785fd8
fix: skip webpackPrefetch if preloaded
FogelAI Jul 13, 2023
c10b21b
Merge forked v2.7.6 with changes to v2.8.1
FogelAI Mar 12, 2024
6451833
refactor: add type annotations
FogelAI Mar 12, 2024
c0ec939
test: add preload and prefetch tests
FogelAI Mar 13, 2024
16a7d32
test: update prefetch-preload-mixed
FogelAI Mar 13, 2024
c47bd0f
refactor: logic
alexander-akait Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: avoid prefetch/preload of loaded CSS files
  • Loading branch information
@FogelAI
FogelAI committed Jul 13, 2023
commit d14f62c9d382b5cbaa7df12436bf236bfa42de82
29 changes: 28 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -845,9 +845,10 @@ class MiniCssExtractPlugin {
const { chunkGraph, chunk, runtimeRequirements } = this;
const {
runtimeTemplate,
outputOptions: { crossOriginLoading },
outputOptions: { chunkLoadingGlobal, crossOriginLoading },
} = this.compilation;
const chunkMap = getCssChunkObject(chunk, this.compilation);
const globalObject = runtimeTemplate.globalObject;
const { linkPreload, linkPrefetch } =
JsonpChunkLoadingRuntimeModule.getCompilationHooks(compilation);
Copy link
Member

@alexander-akait alexander-akait Mar 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please put these hooks here, i.e. just copy/paste, because this plugin can work not only with Jsonp, also with ESM modules

const conditionMap = chunkGraph.getChunkConditionMap(
Expand All @@ -868,6 +869,9 @@ class MiniCssExtractPlugin {
const withPreload = runtimeRequirements.has(
RuntimeGlobals.preloadChunkHandlers
);
const chunkLoadingGlobalExpr = `${globalObject}[${JSON.stringify(
chunkLoadingGlobal
)}]`;

if (!withLoading && !withHmr) {
return "";
Expand Down Expand Up @@ -993,6 +997,23 @@ class MiniCssExtractPlugin {
),
"};",
"",
`var webpackJsonpCallback = ${runtimeTemplate.basicFunction(
"parentChunkLoadingFunction, data",
[
runtimeTemplate.destructureArray(["chunkIds"], "data"),
"for(var i=0;i < chunkIds.length; i++) {",
Template.indent([
"var chunkId = chunkIds[i];",
"installedCssChunks[chunkId] = 0;",
]),
"}",
]
)}`,
"",
`var chunkLoadingGlobal = ${chunkLoadingGlobalExpr} = ${chunkLoadingGlobalExpr} || [];`,
"chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));",
"chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));",
"",
`${
RuntimeGlobals.ensureChunkHandlers
}.miniCss = ${runtimeTemplate.basicFunction(
Expand Down Expand Up @@ -1213,6 +1234,12 @@ class MiniCssExtractPlugin {
compilation.hooks.runtimeRequirementInTree
.for(RuntimeGlobals.hmrDownloadUpdateHandlers)
.tap(pluginName, handler);
compilation.hooks.runtimeRequirementInTree
.for(RuntimeGlobals.prefetchChunkHandlers)
.tap(pluginName, handler);
compilation.hooks.runtimeRequirementInTree
.for(RuntimeGlobals.preloadChunkHandlers)
.tap(pluginName, handler);
});
}

Expand Down