opensourcemirror
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Releases Wiki Activity

improve css exports transfer format for the common case

This commit is contained in:
Tobias Koppers 2021-12-15 09:19:06 +01:00
parent d0f5d44c3a
commit 5676030623
5 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
examples/css/README.md
View File

@ -182,7 +182,7 @@ module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
/******/ var installedChunks = {};
/******/
/******/ var loadCssChunkData = (chunkId, link) => {
/******/ var data, token = "", token2, exports = {}, i = 0, cc = 1;
/******/ var data, token = "", token2, exports = {}, exportsWithId = [], i = 0, cc = 1;
/******/ try { if(!link) link = loadStylesheet(chunkId); data = link.sheet.cssRules; data = data[data.length - 1].style; } catch(e) { data = getComputedStyle(document.head); }
/******/ data = data.getPropertyValue("--webpack-" + chunkId);
/******/ if(!data) return;
@ -190,9 +190,10 @@ module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
/******/ cc = data.charCodeAt(i);
/******/ if(cc == 40) { token2 = token; token = ""; }
/******/ else if(cc == 41) { exports[token2.replace(/^_/, "")] = token.replace(/^_/, ""); token = ""; }
/******/ else if(!cc || cc == 44) { __webpack_require__.r(exports); __webpack_require__.m[token.replace(/^_/, "")] = ((exports, module) => {
/******/ else if(cc == 47) { token = token.replace(/^_/, ""); exports[token] = token + "_"; exportsWithId.push(token); token = ""; }
/******/ else if(!cc || cc == 44) { token = token.replace(/^_/, ""); exportsWithId.forEach((x) => (exports[x] += token)); __webpack_require__.r(exports); __webpack_require__.m[token] = ((exports, module) => {
/******/ module.exports = exports;
/******/ }).bind(null, exports); token = ""; exports = {}; }
/******/ }).bind(null, exports); token = ""; exports = {}; exportsWithId.length = 0; }
/******/ else if(cc == 92) { token += data[++i] }
/******/ else { token += data[i]; }
/******/ }
@ -431,7 +432,7 @@ body {
color: darkblue;
}
head{--webpack-0:_4,_2,_1,_5,main(main_6)_6;}
head{--webpack-0:_4,_2,_1,_5,main/_6;}
```
# dist/1.output.css
@ -449,15 +450,15 @@ head{--webpack-1:_7;}
## Unoptimized
```
assets by chunk 16.3 KiB (name: main)
asset output.js 16 KiB [emitted] (name: main)
asset 0.output.css 332 bytes [emitted] (name: main)
assets by chunk 16.5 KiB (name: main)
asset output.js 16.2 KiB [emitted] (name: main)
asset 0.output.css 325 bytes [emitted] (name: main)
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
asset 1.output.css 45 bytes [emitted]
Entrypoint main 16.3 KiB (14.6 KiB) = output.js 16 KiB 0.output.css 332 bytes 1 auxiliary asset
chunk (runtime: main) output.js, 0.output.css (main) 218 bytes (javascript) 301 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.52 KiB (runtime) [entry] [rendered]
Entrypoint main 16.5 KiB (14.6 KiB) = output.js 16.2 KiB 0.output.css 325 bytes 1 auxiliary asset
chunk (runtime: main) output.js, 0.output.css (main) 218 bytes (javascript) 301 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.76 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 9.52 KiB 9 modules
runtime modules 9.76 KiB 9 modules
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 301 bytes (css) 42 bytes (css-import) [dependent] 6 modules
./example.js 176 bytes [built] [code generated]
[no exports]
@ -475,20 +476,20 @@ webpack 5.64.4 compiled successfully
## Production mode
```
assets by chunk 3.99 KiB (name: main)
asset output.js 3.66 KiB [emitted] [minimized] (name: main)
asset 179.output.css 339 bytes [emitted] (name: main)
assets by chunk 4.08 KiB (name: main)
asset output.js 3.76 KiB [emitted] [minimized] (name: main)
asset 179.output.css 333 bytes [emitted] (name: main)
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
asset 159.output.css 49 bytes [emitted]
Entrypoint main 3.99 KiB (14.6 KiB) = output.js 3.66 KiB 179.output.css 339 bytes 1 auxiliary asset
Entrypoint main 4.08 KiB (14.6 KiB) = output.js 3.76 KiB 179.output.css 333 bytes 1 auxiliary asset
chunk (runtime: main) 159.output.css 23 bytes
> ./lazy-style.css ./example.js 4:0-26
./lazy-style.css 23 bytes [built] [code generated]
[no exports]
import() ./lazy-style.css ./example.js 4:0-26
chunk (runtime: main) output.js, 179.output.css (main) 218 bytes (javascript) 301 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.53 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js, 179.output.css (main) 218 bytes (javascript) 301 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.76 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 9.53 KiB 9 modules
runtime modules 9.76 KiB 9 modules
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 301 bytes (css) 42 bytes (css-import) [dependent] 6 modules
./example.js 176 bytes [built] [code generated]
[no exports]

18
lib/css/CssLoadingRuntimeModule.js
View File

@ -134,7 +134,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
).join(",")}};`,
"",
`var loadCssChunkData = ${runtimeTemplate.basicFunction("chunkId, link", [
'var data, token = "", token2, exports = {}, i = 0, cc = 1;',
'var data, token = "", token2, exports = {}, exportsWithId = [], i = 0, cc = 1;',
"try { if(!link) link = loadStylesheet(chunkId); data = link.sheet.cssRules; data = data[data.length - 1].style; } catch(e) { data = getComputedStyle(document.head); }",
'data = data.getPropertyValue("--webpack-" + chunkId);',
"if(!data) return;",
@ -145,14 +145,20 @@ class CssLoadingRuntimeModule extends RuntimeModule {
`else if(cc == ${cc(
")"
)}) { exports[token2.replace(/^_/, "")] = token.replace(/^_/, ""); token = ""; }`,
`else if(!cc || cc == ${cc(",")}) { ${
RuntimeGlobals.makeNamespaceObject
}(exports); ${
`else if(cc == ${cc(
"/"
)}) { token = token.replace(/^_/, ""); exports[token] = token + "_"; exportsWithId.push(token); token = ""; }`,
`else if(!cc || cc == ${cc(
","
)}) { token = token.replace(/^_/, ""); exportsWithId.forEach(${runtimeTemplate.expressionFunction(
"exports[x] += token",
"x"
)}); ${RuntimeGlobals.makeNamespaceObject}(exports); ${
RuntimeGlobals.moduleFactories
}[token.replace(/^_/, "")] = (${runtimeTemplate.basicFunction(
}[token] = (${runtimeTemplate.basicFunction(
"exports, module",
`module.exports = exports;`
)}).bind(null, exports); token = ""; exports = {}; }`,
)}).bind(null, exports); token = ""; exports = {}; exportsWithId.length = 0; }`,
`else if(cc == ${cc("\\")}) { token += data[++i] }`,
`else { token += data[i]; }`
]),

22
lib/css/CssModulesPlugin.js
View File

@ -56,13 +56,13 @@ const validateParserOptions = createSchemaValidation(
}
);
const escapeCssIdentifierPart = (str, useOptionalUnderscore) => {
const escapeCss = (str, omitOptionalUnderscore) => {
const escaped = `${str}`.replace(
// cspell:word uffff
/[^a-zA-Z0-9_\u0081-\uffff-]/g,
s => `\\${s}`
);
return useOptionalUnderscore && /^[0-9_-]/.test(escaped)
return !omitOptionalUnderscore && /^[0-9_-]/.test(escaped)
? `_${escaped}`
: escaped;
};
@ -257,19 +257,17 @@ class CssModulesPlugin {
}
const exports =
codeGenResult.data && codeGenResult.data.get("css-exports");
const moduleId = chunkGraph.getModuleId(module) + "";
metaData.push(
`${
exports
? Array.from(
exports,
([n, v]) =>
`${escapeCssIdentifierPart(
n,
true
)}(${escapeCssIdentifierPart(v, true)})`
? Array.from(exports, ([n, v]) =>
v === `${n}_${moduleId}`
? `${escapeCss(n)}/`
: `${escapeCss(n)}(${escapeCss(v)})`
).join("")
: ""
}${escapeCssIdentifierPart(chunkGraph.getModuleId(module), true)}`
}${escapeCss(moduleId)}`
);
} catch (e) {
e.message += `\nduring rendering of css ${module.identifier()}`;
@ -277,9 +275,7 @@ class CssModulesPlugin {
}
}
source.add(
`head{--webpack-${escapeCssIdentifierPart(chunk.id)}:${metaData.join(
","
)};}`
`head{--webpack-${escapeCss(chunk.id, true)}:${metaData.join(",")};}`
);
return source;
}

8
lib/dependencies/CssLocalIdentifierDependency.js
View File

@ -90,8 +90,12 @@ CssLocalIdentifierDependency.Template = class CssLocalIdentifierDependencyTempla
.getExportInfo(module, dep.name)
.getUsedName(dep.name, runtime);
const moduleId = chunkGraph.getModuleId(module);
const identifier = escapeCssIdentifier((used || "_") + "_" + moduleId);
source.replace(dep.range[0], dep.range[1] - 1, identifier);
const identifier = (used || "_") + "_" + moduleId;
source.replace(
dep.range[0],
dep.range[1] - 1,
escapeCssIdentifier(identifier)
);
if (used) cssExports.set(used, identifier);
}
};

8
test/configCases/css/css-modules/index.js
View File

@ -8,16 +8,16 @@ it("should allow to create css modules", done => {
try {
expect(x).toEqual({
global: undefined,
class: prod ? "S_491" : "class_\\.\\/style\\.module\\.css",
class: prod ? "S_491" : "class_./style.module.css",
local: prod
? "Zw_491 yl_491 J__491 gc_491"
: "local1_\\.\\/style\\.module\\.css local2_\\.\\/style\\.module\\.css local3_\\.\\/style\\.module\\.css local4_\\.\\/style\\.module\\.css",
: "local1_./style.module.css local2_./style.module.css local3_./style.module.css local4_./style.module.css",
local2: prod
? "Xg_491 AY_491"
: "local5_\\.\\/style\\.module\\.css local6_\\.\\/style\\.module\\.css",
: "local5_./style.module.css local6_./style.module.css",
nested: prod
? "RX_491 undefined X2_491"
: "nested1_\\.\\/style\\.module\\.css undefined nested3_\\.\\/style\\.module\\.css"
: "nested1_./style.module.css undefined nested3_./style.module.css"
});
} catch (e) {
return done(e);