Skip to content

Commit e43fcd0

Browse files
JSerFengJSerFeng
authored
feat: remove empty needless js output for normal css module (#20162)
1 parent 714a0e3 commit e43fcd0

File tree

15 files changed

+78
-41
lines changed

15 files changed

+78
-41
lines changed

‎.changeset/olive-moose-turn.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@fake-scope/fake-pkg": minor
3+
---
4+
5+
Remove empty needless js output for normal css module

‎lib/css/CssGenerator.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const {
1919
const RuntimeGlobals = require("../RuntimeGlobals");
2020
const Template = require("../Template");
2121
const CssImportDependency = require("../dependencies/CssImportDependency");
22+
const HarmonyImportSideEffectDependency = require("../dependencies/HarmonyImportSideEffectDependency");
2223
const { getUndoPath } = require("../util/identifier");
2324
const memoize = require("../util/memoize");
2425

@@ -469,6 +470,7 @@ class CssGenerator extends Generator {
469470
getTypes(module) {
470471
const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
471472
const sourceTypes = new Set();
473+
472474
const connections = this._moduleGraph.getIncomingConnections(module);
473475

474476
for (const connection of connections) {
@@ -478,9 +480,17 @@ class CssGenerator extends Generator {
478480
) {
479481
continue;
480482
}
483+
484+
// when no hmr required, css module js output contains no sideEffects at all
485+
// js sideeffect connection doesn't require js type output
486+
if (connection.dependency instanceof HarmonyImportSideEffectDependency) {
487+
continue;
488+
}
489+
481490
if (!connection.originModule) {
482491
continue;
483492
}
493+
484494
if (connection.originModule.type.split("/")[0] !== CSS_TYPE) {
485495
sourceTypes.add(JAVASCRIPT_TYPE);
486496
} else {

‎lib/dependencies/HarmonyImportSideEffectDependency.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
"use strict";
77

8+
const { CSS_TYPE } = require("../ModuleSourceTypeConstants");
89
const makeSerializable = require("../util/makeSerializable");
910
const HarmonyImportDependency = require("./HarmonyImportDependency");
1011

@@ -61,6 +62,14 @@ makeSerializable(
6162
"webpack/lib/dependencies/HarmonyImportSideEffectDependency"
6263
);
6364

65+
/**
66+
* @param {string[]} sourceTypes the source type of referencing module
67+
* @returns {boolean} returns if need to render executing js code
68+
*/
69+
function noNeedJs(sourceTypes) {
70+
return sourceTypes.every((sourceType) => sourceType === CSS_TYPE);
71+
}
72+
6473
HarmonyImportSideEffectDependency.Template = class HarmonyImportSideEffectDependencyTemplate extends (
6574
HarmonyImportDependency.Template
6675
) {
@@ -72,11 +81,16 @@ HarmonyImportSideEffectDependency.Template = class HarmonyImportSideEffectDepend
7281
*/
7382
apply(dependency, source, templateContext) {
7483
const { moduleGraph, concatenationScope } = templateContext;
75-
if (concatenationScope) {
76-
const module = /** @type {Module} */ (moduleGraph.getModule(dependency));
77-
if (concatenationScope.isModuleInScope(module)) {
78-
return;
79-
}
84+
85+
const module = /** @type {Module} */ (moduleGraph.getModule(dependency));
86+
87+
if (module && noNeedJs([...module.getSourceTypes()])) {
88+
// no need to render import
89+
return;
90+
}
91+
92+
if (concatenationScope && concatenationScope.isModuleInScope(module)) {
93+
return;
8094
}
8195
super.apply(dependency, source, templateContext);
8296
}

‎lib/optimize/ConcatenatedModule.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const ConcatenationScope = require("../ConcatenationScope");
1717
const { UsageState } = require("../ExportsInfo");
1818
const Module = require("../Module");
1919
const {
20+
CSS_TYPE,
2021
JAVASCRIPT_TYPE,
2122
JAVASCRIPT_TYPES
2223
} = require("../ModuleSourceTypeConstants");
@@ -1004,6 +1005,13 @@ class ConcatenatedModule extends Module {
10041005
if (!(connection.dependency instanceof HarmonyImportDependency)) {
10051006
return false;
10061007
}
1008+
if (
1009+
[...connection.module.getSourceTypes()].every(
1010+
(sourceType) => sourceType === CSS_TYPE
1011+
)
1012+
) {
1013+
return false;
1014+
}
10071015
return (
10081016
connection &&
10091017
connection.resolvedOriginModule === module &&

‎lib/optimize/ModuleConcatenationPlugin.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -466,7 +466,10 @@ class ModuleConcatenationPlugin {
466466
chunk,
467467
m
468468
);
469-
if (sourceTypes.size === 1) {
469+
if (
470+
sourceTypes.size === 1 &&
471+
sourceTypes.has(JAVASCRIPT_TYPE)
472+
) {
470473
chunkGraph.disconnectChunkAndModule(chunk, m);
471474
} else {
472475
const newSourceTypes = new Set(sourceTypes);

‎test/__snapshots__/ConfigCacheTestCases.basictest.js.snap‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@ exports.modules = {
1818
;// external \\"fs\\"
1919
const external_fs_namespaceObject = require(\\"fs\\");
2020
var external_fs_default = /*#__PURE__*/__webpack_require__.n(external_fs_namespaceObject);
21-
;// css ./style.css
22-
2321
// EXTERNAL MODULE: ./dependency.js
2422
var dependency = __webpack_require__(784);
2523
;// ./foo.js
@@ -64,9 +62,8 @@ export const __webpack_esm_modules__ = {
6462
\\\\****************/
6563
(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
6664

67-
/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ 125);
68-
/* harmony import */ var _dependency_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dependency.js */ 784);
69-
/* harmony import */ var _dependency_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_dependency_js__WEBPACK_IMPORTED_MODULE_1__);
65+
/* harmony import */ var _dependency_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./dependency.js */ 784);
66+
/* harmony import */ var _dependency_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_dependency_js__WEBPACK_IMPORTED_MODULE_0__);
7067

7168

7269

@@ -78,16 +75,6 @@ it(\\"The dependOn chunk must be loaded before the common chunk.\\", async () =>
7875
});
7976

8077

81-
/***/ },
82-
83-
/***/ 125
84-
/*!***********************!*\\\\
85-
!*** css ./style.css ***!
86-
\\\\***********************/
87-
() {
88-
89-
90-
9178
/***/ }
9279

9380
};

‎test/__snapshots__/ConfigTestCases.basictest.js.snap‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@ exports.modules = {
1818
;// external \\"fs\\"
1919
const external_fs_namespaceObject = require(\\"fs\\");
2020
var external_fs_default = /*#__PURE__*/__webpack_require__.n(external_fs_namespaceObject);
21-
;// css ./style.css
22-
2321
// EXTERNAL MODULE: ./dependency.js
2422
var dependency = __webpack_require__(784);
2523
;// ./foo.js
@@ -64,9 +62,8 @@ export const __webpack_esm_modules__ = {
6462
\\\\****************/
6563
(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
6664

67-
/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ 125);
68-
/* harmony import */ var _dependency_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dependency.js */ 784);
69-
/* harmony import */ var _dependency_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_dependency_js__WEBPACK_IMPORTED_MODULE_1__);
65+
/* harmony import */ var _dependency_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./dependency.js */ 784);
66+
/* harmony import */ var _dependency_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_dependency_js__WEBPACK_IMPORTED_MODULE_0__);
7067

7168

7269

@@ -78,16 +75,6 @@ it(\\"The dependOn chunk must be loaded before the common chunk.\\", async () =>
7875
});
7976

8077

81-
/***/ },
82-
83-
/***/ 125
84-
/*!***********************!*\\\\
85-
!*** css ./style.css ***!
86-
\\\\***********************/
87-
() {
88-
89-
90-
9178
/***/ }
9279

9380
};

‎test/configCases/chunk-index/issue-18008/webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ module.exports = {
5353
"B-2Index": "0: ./B-2.js",
5454
BIndex: "0: ./B.js",
5555
mainIndex: "0: ./main.js",
56-
sharedIndex: "1: css ./m.css"
56+
sharedIndex: "1: css ./m.css, 2: css ./n.css"
5757
});
5858
});
5959
};

‎test/configCases/chunk-index/recalc-index/webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ module.exports = {
4545
data[`${name}Index`] = text;
4646
}
4747
expect(data).toEqual({
48-
dynamicIndex: "0: css ./a.css",
48+
dynamicIndex: "0: css ./a.css, 1: css ./b.css",
4949
mainIndex: "0: ./index.js"
5050
});
5151
});

‎test/configCases/css/no-extra-empty-js/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import './style.css' // doesn't has js output
2+
3+
it('should contain no js outupt', () => {
4+
// only has index.js
5+
expect(Reflect.ownKeys(__webpack_modules__).length).toBe(1)
6+
})

0 commit comments

Comments
 (0)