feat: reduce runtime code

webpack-contrib · Jul 25, 2024 · 61f9a69 · 61f9a69
1 parent a2463ca
commit 61f9a69
Show file tree

Hide file tree

Showing 12 changed files with 3,540 additions and 4,606 deletions.
diff --git a/src/index.js b/src/index.js
@@ -80,8 +80,9 @@ export default async function loader(content) {
  html = await options.postprocessor(html, this);
  }
 
- const importCode = getImportCode(html, this, imports, options);
- const moduleCode = getModuleCode(html, replacements, {
+ const importCode = getImportCode(html, imports, options);
+ const moduleCode = getModuleCode(html, replacements, this, {
+ esModule: options.esModule,
  isTemplateLiteralSupported,
  });
  const exportCode = getExportCode(html, options);

diff --git a/src/plugins/sources-plugin.js b/src/plugins/sources-plugin.js
@@ -139,15 +139,7 @@ export default (options) =>
  let offset = 0;
 
  for (const source of sources) {
- const {
- name,
- value,
- isValueQuoted,
- format,
- runtime,
- startOffset,
- endOffset,
- } = source;
+ const { name, value, isValueQuoted, startOffset, endOffset } = source;
 
  let request = value;
 
@@ -172,7 +164,7 @@ export default (options) =>
  importName = `___HTML_LOADER_IMPORT_${imports.size}___`;
  imports.set(request, importName);
 
- options.imports.push({ format, importName, request });
+ options.imports.push({ importName, request });
  }
 
  const replacementKey = JSON.stringify({ request, isValueQuoted, hash });
@@ -187,7 +179,6 @@ export default (options) =>
  importName,
  hash,
  isValueQuoted,
- runtime,
  });
  }
 

diff --git a/src/runtime/getUrl.js b/src/runtime/getUrl.js
@@ -1,22 +1,12 @@
-module.exports = (url, options) => {
- if (!options) {
- // eslint-disable-next-line no-param-reassign
- options = {};
- }
-
+module.exports = (url, maybeNeedQuotes) => {
  if (!url) {
  return url;
  }
 
  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
- url = String(url.__esModule ? url.default : url);
-
- if (options.hash) {
- // eslint-disable-next-line no-param-reassign
- url += options.hash;
- }
+ url = String(url);
 
- if (options.maybeNeedQuotes && /[\t\n\f\r "'=<>`]/.test(url)) {
+ if (maybeNeedQuotes && /[\t\n\f\r "'=<>`]/.test(url)) {
  return `"${url}"`;
  }
 

diff --git a/src/utils.js b/src/utils.js
@@ -1218,43 +1218,21 @@ export function getFilter(filter) {
  };
 }
 
-const GET_SOURCE_FROM_IMPORT_NAME = "___HTML_LOADER_GET_SOURCE_FROM_IMPORT___";
-
-export function getImportCode(html, loaderContext, imports, options) {
+export function getImportCode(html, imports, options) {
  if (imports.length === 0) {
  return "";
  }
 
- // TODO simplify in the next major release
- const getURLRuntime = require.resolve("./runtime/getUrl.js");
- const context = loaderContext.context || loaderContext.rootContext;
- const fileURLToHelper =
- typeof loaderContext.utils !== "undefined" &&
- typeof loaderContext.utils.contextify === "function"
- ? loaderContext.utils.contextify(context, getURLRuntime)
- : contextify(context, getURLRuntime);
-
- let code = options.esModule
- ? `import ${GET_SOURCE_FROM_IMPORT_NAME} from "${fileURLToHelper}";\n`
- : `var ${GET_SOURCE_FROM_IMPORT_NAME} = require("${fileURLToHelper}");\n`;
+ let code = "";
 
  for (const item of imports) {
- const { format, importName, request } = item;
+ const { importName, request } = item;
 
- switch (format) {
- case "import":
- code += options.esModule
- ? `import ${importName} from ${JSON.stringify(request)};\n`
- : `var ${importName} = require(${JSON.stringify(request)});\n`;
- break;
- case "url":
- default:
- code += options.esModule
- ? `var ${importName} = new URL(${JSON.stringify(
- request,
- )}, import.meta.url);\n`
- : `var ${importName} = require(${JSON.stringify(request)});\n`;
- }
+ code += options.esModule
+ ? `var ${importName} = new URL(${JSON.stringify(
+ request,
+ )}, import.meta.url);\n`
+ : `var ${importName} = require(${JSON.stringify(request)});\n`;
  }
 
  return `// Imports\n${code}`;
@@ -1279,44 +1257,55 @@ export function convertToTemplateLiteral(str) {
  return `\`${escapedString}\``;
 }
 
-export function getModuleCode(html, replacements, options) {
+const GET_SOURCE_FROM_IMPORT_NAME = "___HTML_LOADER_GET_SOURCE_FROM_IMPORT___";
+
+export function getModuleCode(html, replacements, loaderContext, options) {
  let code = html;
- let replacersCode = "";
 
  const { isTemplateLiteralSupported } = options;
 
+ let needHelperImport = false;
+
  for (const item of replacements) {
- const { runtime, importName, replacementName, isValueQuoted, hash } = item;
+ const { importName, replacementName, isValueQuoted, hash } = item;
 
- if (typeof runtime === "undefined" || runtime === true) {
- const getUrlOptions = []
- .concat(hash ? [`hash: ${JSON.stringify(hash)}`] : [])
- .concat(isValueQuoted ? [] : "maybeNeedQuotes: true");
- const preparedOptions =
- getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(", ")} }` : "";
+ if (!isValueQuoted && !needHelperImport) {
+ needHelperImport = true;
+ }
 
- replacersCode += `var ${replacementName} = ${GET_SOURCE_FROM_IMPORT_NAME}(${importName}${preparedOptions});\n`;
+ const name = !isValueQuoted
+ ? `${GET_SOURCE_FROM_IMPORT_NAME}(${importName}${!isValueQuoted ? ", true" : ""})`
+ : importName;
 
- code = code.replace(new RegExp(replacementName, "g"), () =>
- isTemplateLiteralSupported
- ? `\${${replacementName}}`
- : `" + ${replacementName} + "`,
- );
- } else {
- code = code.replace(new RegExp(replacementName, "g"), () =>
- isTemplateLiteralSupported
- ? `\${${replacementName}}`
- : `" + ${replacementName} + "`,
- );
- }
+ code = code.replace(new RegExp(replacementName, "g"), () =>
+ isTemplateLiteralSupported
+ ? `\${${name}}${typeof hash !== "undefined" ? hash : ""}`
+ : `" + ${name}${typeof hash !== "undefined" ? ` + ${JSON.stringify(hash)}` : ""} + "`,
+ );
  }
 
  // Replaces "<script>" or "</script>" to "<" + "script>" or "<" + "/script>".
  code = code.replace(/<(\/?script)/g, (_, s) =>
  isTemplateLiteralSupported ? `\${"<" + "${s}"}` : `<" + "${s}`,
  );
 
- return `// Module\n${replacersCode}var code = ${code};\n`;
+ code = `// Module\nvar code = ${code};\n`;
+
+ if (needHelperImport) {
+ // TODO simplify in the next major release
+ const getURLRuntime = require.resolve("./runtime/getUrl.js");
+ const context = loaderContext.context || loaderContext.rootContext;
+ const fileURLToHelper =
+ typeof loaderContext.utils !== "undefined" &&
+ typeof loaderContext.utils.contextify === "function"
+ ? loaderContext.utils.contextify(context, getURLRuntime)
+ : contextify(context, getURLRuntime);
+ code = options.esModule
+ ? `import ${GET_SOURCE_FROM_IMPORT_NAME} from "${fileURLToHelper}";\n${code}`
+ : `var ${GET_SOURCE_FROM_IMPORT_NAME} = require("${fileURLToHelper}");\n${code}`;
+ }
+
+ return code;
 }
 
 export function getExportCode(html, options) {