add lazy compilation for entrypoints

This commit is contained in:
Tobias Koppers 2021-01-22 01:01:17 +01:00
parent 988cf8d47a
commit 100317556e
9 changed files with 79 additions and 34 deletions

View File

@ -1042,7 +1042,7 @@ export interface Experiments {
*/
layers?: boolean;
/**
* Compile import()s only when they are accessed.
* Compile entrypoints and import()s only when they are accessed.
*/
lazyCompilation?:
| boolean
@ -1064,6 +1064,10 @@ export interface Experiments {
* A custom client.
*/
client?: string;
/**
* Enable/disable lazy compilation for entries.
*/
entries?: boolean;
};
/**
* Allow output javascript files as module source type.

View File

@ -10,7 +10,9 @@ module.exports = {
idleTimeout: 5000
},
experiments: {
lazyCompilation: true
lazyCompilation: {
entries: false
}
},
devServer: {
hot: true,

View File

@ -2,16 +2,12 @@
"use strict";
if (!module.hot) {
throw new Error(
"Environment doesn't support lazy compilation (requires Hot Module Replacement enabled)"
);
}
var urlBase = decodeURIComponent(__resourceQuery.slice(1));
exports.keepAlive = function (options) {
var data = options.data;
var onError = options.onError;
var active = options.active;
var module = options.module;
var response;
var request = require("http").request(
urlBase + data,
@ -22,6 +18,11 @@ exports.keepAlive = function (options) {
function (res) {
response = res;
response.on("error", errorHandler);
if (!active && !module.hot) {
console.log(
"Hot Module Replacement is not enabled. Waiting for process restart..."
);
}
}
);
function errorHandler(err) {

View File

@ -2,9 +2,9 @@
"use strict";
if (typeof EventSource !== "function" || !module.hot) {
if (typeof EventSource !== "function") {
throw new Error(
"Environment doesn't support lazy compilation (requires EventSource and Hot Module Replacement enabled)"
"Environment doesn't support lazy compilation (requires EventSource)"
);
}
@ -45,12 +45,19 @@ var updateEventSource = function updateEventSource() {
exports.keepAlive = function (options) {
var data = options.data;
var onError = options.onError;
var active = options.active;
var module = options.module;
errorHandlers.add(onError);
var value = activeKeys.get(data) || 0;
activeKeys.set(data, value + 1);
if (value === 0) {
updateEventSource();
}
if (!active && !module.hot) {
console.log(
"Hot Module Replacement is not enabled. Waiting for process restart..."
);
}
return function () {
errorHandlers.delete(onError);

View File

@ -256,7 +256,10 @@ class WebpackOptionsApply extends OptionsApply {
options.experiments.lazyCompilation.client) ||
`webpack/hot/lazy-compilation-${
options.externalsPresets.node ? "node" : "web"
}.js`
}.js`,
entries:
typeof options.experiments.lazyCompilation !== "object" ||
options.experiments.lazyCompilation.entries !== false
}).apply(compiler);
}

View File

@ -59,12 +59,8 @@ class LazyCompilationDependency extends Dependency {
registerNotSerializable(LazyCompilationDependency);
class LazyCompilationProxyModule extends Module {
constructor(originalModule, request, client, data, active) {
super(
"lazy-compilation-proxy",
originalModule.context,
originalModule.layer
);
constructor(context, originalModule, request, client, data, active) {
super("lazy-compilation-proxy", context, originalModule.layer);
this.originalModule = originalModule;
this.request = request;
this.client = client;
@ -172,14 +168,16 @@ class LazyCompilationProxyModule extends Module {
.dependencies[0]);
const clientModule = moduleGraph.getModule(clientDep);
const block = this.blocks[0];
const keepActive = Template.asString([
const client = Template.asString([
`var client = ${runtimeTemplate.moduleExports({
module: clientModule,
chunkGraph,
request: clientDep.userRequest,
runtimeRequirements
})}`,
`var data = ${JSON.stringify(this.data)};`,
`var data = ${JSON.stringify(this.data)};`
]);
const keepActive = Template.asString([
`var dispose = client.keepAlive({ data, active: ${JSON.stringify(
!!block
)}, module, onError });`
@ -189,11 +187,7 @@ class LazyCompilationProxyModule extends Module {
const dep = block.dependencies[0];
const module = moduleGraph.getModule(dep);
source = Template.asString([
"module.hot.accept();",
`module.hot.accept(${JSON.stringify(
chunkGraph.getModuleId(module)
)}, function() { module.hot.invalidate(); });`,
"module.hot.dispose(function(data) { delete data.resolveSelf; dispose(data); });",
client,
`module.exports = ${runtimeTemplate.moduleNamespacePromise({
chunkGraph,
block,
@ -203,17 +197,31 @@ class LazyCompilationProxyModule extends Module {
message: "import()",
runtimeRequirements
})};`,
"if (module.hot.data && module.hot.data.resolveSelf) module.hot.data.resolveSelf(module.exports);",
"if (module.hot) {",
Template.indent([
"module.hot.accept();",
`module.hot.accept(${JSON.stringify(
chunkGraph.getModuleId(module)
)}, function() { module.hot.invalidate(); });`,
"module.hot.dispose(function(data) { delete data.resolveSelf; dispose(data); });",
"if (module.hot.data && module.hot.data.resolveSelf) module.hot.data.resolveSelf(module.exports);"
]),
"}",
"function onError() { /* ignore */ }",
keepActive
]);
} else {
source = Template.asString([
"module.hot.accept();",
client,
"var resolveSelf, onError;",
`module.exports = new Promise(function(resolve, reject) { resolveSelf = resolve; onError = reject; });`,
"if (module.hot.data && module.hot.data.resolveSelf) module.hot.data.resolveSelf(module.exports);",
"module.hot.dispose(function(data) { data.resolveSelf = resolveSelf; dispose(data); });",
"if (module.hot) {",
Template.indent([
"module.hot.accept();",
"if (module.hot.data && module.hot.data.resolveSelf) module.hot.data.resolveSelf(module.exports);",
"module.hot.dispose(function(data) { data.resolveSelf = resolveSelf; dispose(data); });"
]),
"}",
keepActive
]);
}
@ -263,10 +271,12 @@ class LazyCompilationPlugin {
* @param {Object} options options
* @param {(function(Compiler, string, function(Error?, any?): void): void) | function(Compiler, string): Promise<any>} options.backend the backend
* @param {string} options.client the client reference
* @param {boolean} options.entries true, when entries are lazy compiled
*/
constructor({ backend, client }) {
constructor({ backend, client, entries }) {
this.backend = backend;
this.client = client;
this.entries = entries;
}
/**
* Apply the plugin
@ -292,20 +302,28 @@ class LazyCompilationPlugin {
}
}
);
compiler.hooks.compilation.tap(
compiler.hooks.thisCompilation.tap(
"LazyCompilationPlugin",
(compilation, { normalModuleFactory }) => {
normalModuleFactory.hooks.module.tap(
"LazyCompilationPlugin",
(originalModule, createData, resolveData) => {
if (
resolveData.dependencies.every(dep => dep.type === "import()")
resolveData.dependencies.every(
dep =>
dep.type === "import()" ||
(this.entries && dep.type === "entry")
) &&
!/webpack[/\\]hot[/\\]|webpack-dev-server[/\\]client/.test(
resolveData.request
)
) {
const moduleInfo = backend.module(originalModule);
if (!moduleInfo) return;
const { client, data, active } = moduleInfo;
return new LazyCompilationProxyModule(
compiler.context,
originalModule,
resolveData.request,
client,

View File

@ -582,7 +582,7 @@
"type": "boolean"
},
"lazyCompilation": {
"description": "Compile import()s only when they are accessed.",
"description": "Compile entrypoints and import()s only when they are accessed.",
"anyOf": [
{
"type": "boolean"
@ -599,6 +599,10 @@
"client": {
"description": "A custom client.",
"type": "string"
},
"entries": {
"description": "Enable/disable lazy compilation for entries.",
"type": "boolean"
}
}
}

View File

@ -3,6 +3,8 @@
/** @type {import("../../../../").Configuration} */
module.exports = {
experiments: {
lazyCompilation: true
lazyCompilation: {
entries: false
}
}
};

6
types.d.ts vendored
View File

@ -2956,7 +2956,7 @@ declare interface Experiments {
layers?: boolean;
/**
* Compile import()s only when they are accessed.
* Compile entrypoints and import()s only when they are accessed.
*/
lazyCompilation?:
| boolean
@ -2975,6 +2975,10 @@ declare interface Experiments {
* A custom client.
*/
client?: string;
/**
* Enable/disable lazy compilation for entries.
*/
entries?: boolean;
};
/**