webpack 4.13.0 → 4.16.0

package/lib/optimize/SplitChunksPlugin.js

@@ -8,9 +8,16 @@ const crypto = require("crypto");
 const SortableSet = require("../util/SortableSet");
 const GraphHelpers = require("../GraphHelpers");
 const { isSubset } = require("../util/SetHelpers");
+const deterministicGrouping = require("../util/deterministicGrouping");
+const contextify = require("../util/identifier").contextify;
 
+/** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Chunk")} Chunk */
 /** @typedef {import("../Module")} Module */
+/** @typedef {import("../util/deterministicGrouping").Options<Module>} DeterministicGroupingOptionsForModule */
+/** @typedef {import("../util/deterministicGrouping").GroupedItems<Module>} DeterministicGroupingGroupedItemsForModule */
+
+const deterministicGroupingForModules = /** @type {function(DeterministicGroupingOptionsForModule): DeterministicGroupingGroupedItemsForModule[]} */ (deterministicGrouping);
 
 const hashFilename = name => {
 	return crypto
@@ -104,25 +111,29 @@ module.exports = class SplitChunksPlugin {
 				options.chunks || "all"
 			),
 			minSize: options.minSize || 0,
+			maxSize: options.maxSize || 0,
 			minChunks: options.minChunks || 1,
 			maxAsyncRequests: options.maxAsyncRequests || 1,
 			maxInitialRequests: options.maxInitialRequests || 1,
-			getName:
-				SplitChunksPlugin.normalizeName({
-					name: options.name,
-					automaticNameDelimiter: options.automaticNameDelimiter
-				}) || (() => {}),
+			hidePathInfo: options.hidePathInfo || false,
 			filename: options.filename || undefined,
 			getCacheGroups: SplitChunksPlugin.normalizeCacheGroups({
 				cacheGroups: options.cacheGroups,
+				name: options.name,
 				automaticNameDelimiter: options.automaticNameDelimiter
-			})
+			}),
+			automaticNameDelimiter: options.automaticNameDelimiter,
+			fallbackCacheGroup: SplitChunksPlugin.normalizeFallbackCacheGroup(
+				options.fallbackCacheGroup || {},
+				options
+			)
 		};
 	}
 
-	static normalizeName({ name, automaticNameDelimiter }) {
+	static normalizeName({ name, automaticNameDelimiter, automaticNamePrefix }) {
 		if (name === true) {
-			const cache = new Map();
+			/** @type {WeakMap<Chunk[], Record<string, string>>} */
+			const cache = new WeakMap();
 			const fn = (module, chunks, cacheGroup) => {
 				let cacheEntry = cache.get(chunks);
 				if (cacheEntry === undefined) {
@@ -137,10 +148,12 @@ module.exports = class SplitChunksPlugin {
 					return;
 				}
 				names.sort();
-				let name =
-					(cacheGroup && cacheGroup !== "default"
-						? cacheGroup + automaticNameDelimiter
-						: "") + names.join(automaticNameDelimiter);
+				const prefix =
+					typeof automaticNamePrefix === "string"
+						? automaticNamePrefix
+						: cacheGroup;
+				const namePrefix = prefix ? prefix + automaticNameDelimiter : "";
+				let name = namePrefix + names.join(automaticNameDelimiter);
 				// Filenames and paths can't be too long otherwise an
 				// ENAMETOOLONG error is raised. If the generated name if too
 				// long, it is truncated and a hash is appended. The limit has
@@ -177,7 +190,27 @@ module.exports = class SplitChunksPlugin {
 		if (typeof chunks === "function") return chunks;
 	}
 
-	static normalizeCacheGroups({ cacheGroups, automaticNameDelimiter }) {
+	static normalizeFallbackCacheGroup(
+		{
+			minSize = undefined,
+			maxSize = undefined,
+			automaticNameDelimiter = undefined
+		},
+		{
+			minSize: defaultMinSize = undefined,
+			maxSize: defaultMaxSize = undefined,
+			automaticNameDelimiter: defaultAutomaticNameDelimiter = undefined
+		}
+	) {
+		return {
+			minSize: typeof minSize === "number" ? minSize : defaultMinSize || 0,
+			maxSize: typeof maxSize === "number" ? maxSize : defaultMaxSize || 0,
+			automaticNameDelimiter:
+				automaticNameDelimiter || defaultAutomaticNameDelimiter || "~"
+		};
+	}
+
+	static normalizeCacheGroups({ cacheGroups, name, automaticNameDelimiter }) {
 		if (typeof cacheGroups === "function") {
 			// TODO webpack 5 remove this
 			if (cacheGroups.length !== 1) {
@@ -216,15 +249,21 @@ module.exports = class SplitChunksPlugin {
 						results.push({
 							key: key,
 							priority: option.priority,
-							getName: SplitChunksPlugin.normalizeName({
-								name: option.name,
-								automaticNameDelimiter
-							}),
+							getName:
+								SplitChunksPlugin.normalizeName({
+									name: option.name || name,
+									automaticNameDelimiter:
+										typeof option.automaticNameDelimiter === "string"
+											? option.automaticNameDelimiter
+											: automaticNameDelimiter,
+									automaticNamePrefix: option.automaticNamePrefix
+								}) || (() => {}),
 							chunksFilter: SplitChunksPlugin.normalizeChunksFilter(
 								option.chunks
 							),
 							enforce: option.enforce,
 							minSize: option.minSize,
+							maxSize: option.maxSize,
 							minChunks: option.minChunks,
 							maxAsyncRequests: option.maxAsyncRequests,
 							maxInitialRequests: option.maxInitialRequests,
@@ -278,6 +317,10 @@ module.exports = class SplitChunksPlugin {
 		return false;
 	}
 
+	/**
+	 * @param {Compiler} compiler webpack compiler
+	 * @returns {void}
+	 */
 	apply(compiler) {
 		compiler.hooks.thisCompilation.tap("SplitChunksPlugin", compilation => {
 			let alreadyOptimized = false;
@@ -447,6 +490,12 @@ module.exports = class SplitChunksPlugin {
 									chunksKeys: new Set()
 								})
 							);
+						} else {
+							if (info.cacheGroup !== cacheGroup) {
+								if (info.cacheGroup.priority < cacheGroup.priority) {
+									info.cacheGroup = cacheGroup;
+								}
+							}
 						}
 						info.modules.add(module);
 						info.size += module.size();
@@ -486,6 +535,12 @@ module.exports = class SplitChunksPlugin {
 										: cacheGroupSource.enforce
 											? 0
 											: this.options.minSize,
+								maxSize:
+									cacheGroupSource.maxSize !== undefined
+										? cacheGroupSource.maxSize
+										: cacheGroupSource.enforce
+											? 0
+											: this.options.maxSize,
 								minChunks:
 									cacheGroupSource.minChunks !== undefined
 										? cacheGroupSource.minChunks
@@ -512,6 +567,10 @@ module.exports = class SplitChunksPlugin {
 									cacheGroupSource.filename !== undefined
 										? cacheGroupSource.filename
 										: this.options.filename,
+								automaticNameDelimiter:
+									cacheGroupSource.automaticNameDelimiter !== undefined
+										? cacheGroupSource.automaticNameDelimiter
+										: this.options.automaticNameDelimiter,
 								reuseExistingChunk: cacheGroupSource.reuseExistingChunk
 							};
 							// For all combination of chunk selection
@@ -537,6 +596,9 @@ module.exports = class SplitChunksPlugin {
 						}
 					}
 
+					/** @type {Map<Chunk, {minSize: number, maxSize: number, automaticNameDelimiter: string}>} */
+					const maxSizeQueueMap = new Map();
+
 					while (chunksInfoMap.size > 0) {
 						// Find best matching entry
 						let bestEntryKey;
@@ -563,6 +625,7 @@ module.exports = class SplitChunksPlugin {
 
 						let chunkName = item.name;
 						// Variable for the new chunk (lazy created)
+						/** @type {Chunk} */
 						let newChunk;
 						// When no chunk name, check if we can reuse a chunk instead of creating a new one
 						let isReused = false;
@@ -591,7 +654,7 @@ module.exports = class SplitChunksPlugin {
 								isReused = true;
 							}
 						}
-						// Check if maxRequests condition can be fullfilled
+						// Check if maxRequests condition can be fulfilled
 
 						const usedChunks = Array.from(item.chunks).filter(chunk => {
 							// skip if we address ourself
@@ -689,6 +752,22 @@ module.exports = class SplitChunksPlugin {
 								}
 							}
 						}
+
+						if (item.cacheGroup.maxSize > 0) {
+							const oldMaxSizeSettings = maxSizeQueueMap.get(newChunk);
+							maxSizeQueueMap.set(newChunk, {
+								minSize: Math.max(
+									oldMaxSizeSettings ? oldMaxSizeSettings.minSize : 0,
+									item.cacheGroup.minSize
+								),
+								maxSize: Math.min(
+									oldMaxSizeSettings ? oldMaxSizeSettings.maxSize : Infinity,
+									item.cacheGroup.maxSize
+								),
+								automaticNameDelimiter: item.cacheGroup.automaticNameDelimiter
+							});
+						}
+
 						// remove all modules from other entries and update size
 						for (const [key, info] of chunksInfoMap) {
 							if (isOverlap(info.chunks, item.chunks)) {
@@ -709,6 +788,77 @@ module.exports = class SplitChunksPlugin {
 							}
 						}
 					}
+
+					// Make sure that maxSize is fulfilled
+					for (const chunk of compilation.chunks.slice()) {
+						const { minSize, maxSize, automaticNameDelimiter } =
+							maxSizeQueueMap.get(chunk) || this.options.fallbackCacheGroup;
+						if (!maxSize) continue;
+						const results = deterministicGroupingForModules({
+							maxSize,
+							minSize,
+							items: chunk.modulesIterable,
+							getKey(module) {
+								const ident = contextify(
+									compilation.options.context,
+									module.identifier()
+								);
+								const name = module.nameForCondition
+									? contextify(
+											compilation.options.context,
+											module.nameForCondition()
+									  )
+									: ident.replace(/^.*!|\?[^?!]*$/g, "");
+								const fullKey =
+									name + automaticNameDelimiter + hashFilename(ident);
+								return fullKey.replace(/[\\/?]/g, "_");
+							},
+							getSize(module) {
+								return module.size();
+							}
+						});
+						results.sort((a, b) => {
+							if (a.key < b.key) return -1;
+							if (a.key > b.key) return 1;
+							return 0;
+						});
+						for (let i = 0; i < results.length; i++) {
+							const group = results[i];
+							const key = this.options.hidePathInfo
+								? hashFilename(group.key)
+								: group.key;
+							let name = chunk.name
+								? chunk.name + automaticNameDelimiter + key
+								: null;
+							if (name && name.length > 100) {
+								name =
+									name.slice(0, 100) +
+									automaticNameDelimiter +
+									hashFilename(name);
+							}
+							let newPart;
+							if (i !== results.length - 1) {
+								newPart = compilation.addChunk(name);
+								chunk.split(newPart);
+								newPart.chunkReason = chunk.chunkReason;
+								// Add all modules to the new chunk
+								for (const module of group.items) {
+									if (typeof module.chunkCondition === "function") {
+										if (!module.chunkCondition(newPart)) continue;
+									}
+									// Add module to new chunk
+									GraphHelpers.connectChunkAndModule(newPart, module);
+									// Remove module from used chunks
+									chunk.removeModule(module);
+									module.rewriteChunkInReasons(chunk, [newPart]);
+								}
+							} else {
+								// change the chunk to be a part
+								newPart = chunk;
+								chunk.name = name;
+							}
+						}
+					}
 				}
 			);
 		});

package/lib/util/Semaphore.js

@@ -5,12 +5,24 @@
 "use strict";
 
 class Semaphore {
+	/**
+	 * Creates an instance of Semaphore.
+	 *
+	 * @param {number} available the amount available number of "tasks"
+	 * in the Semaphore
+	 */
 	constructor(available) {
 		this.available = available;
+		/** @type {(function(): void)[]} */
 		this.waiters = [];
+		/** @private */
 		this._continue = this._continue.bind(this);
 	}
 
+	/**
+	 * @param {function(): void} callback function block to capture and run
+	 * @returns {void}
+	 */
 	acquire(callback) {
 		if (this.available > 0) {
 			this.available--;

package/lib/util/SetHelpers.js

@@ -5,7 +5,7 @@
  * @param {Set[]} sets an array of sets being checked for shared elements
  * @returns {Set<TODO>} returns a new Set containing the intersecting items
  */
-function intersect(sets) {
+const intersect = sets => {
 	if (sets.length === 0) return new Set();
 	if (sets.length === 1) return new Set(sets[0]);
 	let minSize = Infinity;
@@ -28,7 +28,7 @@ function intersect(sets) {
 		}
 	}
 	return current;
-}
+};
 
 /**
  * Checks if a set is the subset of another set
@@ -36,13 +36,13 @@ function intersect(sets) {
  * @param {Set<TODO>} smallSet the set whos elements might be contained inside of bigSet
  * @returns {boolean} returns true if smallSet contains all elements inside of the bigSet
  */
-function isSubset(bigSet, smallSet) {
+const isSubset = (bigSet, smallSet) => {
 	if (bigSet.size < smallSet.size) return false;
 	for (const item of smallSet) {
 		if (!bigSet.has(item)) return false;
 	}
 	return true;
-}
+};
 
 exports.intersect = intersect;
 exports.isSubset = isSubset;

package/lib/util/SortableSet.js

@@ -7,7 +7,7 @@
 class SortableSet extends Set {
 	/**
 	 * Create a new sortable set
-	 * @param {Array<T>=} initialIterable The initial iterable value
+	 * @param {Iterable<T>=} initialIterable The initial iterable value
 	 * @typedef {function(T, T): number} SortFunction
 	 * @param {SortFunction=} defaultSort Default sorting function
 	 */

package/lib/util/cachedMerge.js

@@ -7,7 +7,7 @@
 const mergeCache = new WeakMap();
 
 /**
- * Merges two given objects and caches the result to avoid computation if same objects passed as arguements again.
+ * Merges two given objects and caches the result to avoid computation if same objects passed as arguments again.
  * @example
  * // performs Object.assign(first, second), stores the result in WeakMap and returns result
  * cachedMerge({a: 1}, {a: 2})

package/lib/util/createHash.js

@@ -4,8 +4,18 @@
 */
 "use strict";
 
+/** @typedef {{new(): Hash}} HashConstructor */
+/**
+ * @typedef {Object} Hash
+ * @property {function(string|Buffer, string=): Hash} update
+ * @property {function(string): string} digest
+ */
+
 const BULK_SIZE = 1000;
 
+/**
+ * @implements {Hash}
+ */
 class BulkUpdateDecorator {
 	constructor(hash) {
 		this.hash = hash;
@@ -63,6 +73,11 @@ class DebugHash {
 	}
 }
 
+/**
+ * Creates a hash by name or function
+ * @param {string | HashConstructor} algorithm the algorithm name or a constructor creating a hash
+ * @returns {Hash} the hash
+ */
 module.exports = algorithm => {
 	if (typeof algorithm === "function") {
 		return new BulkUpdateDecorator(new algorithm());

package/lib/util/deterministicGrouping.js

@@ -0,0 +1,251 @@
+"use strict";
+
+// Simulations show these probabilities for a single change
+// 93.1% that one group is invalidated
+// 4.8% that two groups are invalidated
+// 1.1% that 3 groups are invalidated
+// 0.1% that 4 or more groups are invalidated
+//
+// And these for removing/adding 10 lexically adjacent files
+// 64.5% that one group is invalidated
+// 24.8% that two groups are invalidated
+// 7.8% that 3 groups are invalidated
+// 2.7% that 4 or more groups are invalidated
+//
+// And these for removing/adding 3 random files
+// 0% that one group is invalidated
+// 3.7% that two groups are invalidated
+// 80.8% that 3 groups are invalidated
+// 12.3% that 4 groups are invalidated
+// 3.2% that 5 or more groups are invalidated
+
+/**
+ *
+ * @param {string} a key
+ * @param {string} b key
+ * @returns {number} the similarity as number
+ */
+const similarity = (a, b) => {
+	const l = Math.min(a.length, b.length);
+	let dist = 0;
+	for (let i = 0; i < l; i++) {
+		const ca = a.charCodeAt(i);
+		const cb = b.charCodeAt(i);
+		dist += Math.max(0, 10 - Math.abs(ca - cb));
+	}
+	return dist;
+};
+
+/**
+ * @param {string} a key
+ * @param {string} b key
+ * @returns {string} the common part and a single char for the difference
+ */
+const getName = (a, b) => {
+	const l = Math.min(a.length, b.length);
+	let r = "";
+	for (let i = 0; i < l; i++) {
+		const ca = a.charAt(i);
+		const cb = b.charAt(i);
+		r += ca;
+		if (ca === cb) {
+			continue;
+		}
+		return r;
+	}
+	return a;
+};
+
+/**
+ * @template T
+ */
+class Node {
+	/**
+	 * @param {T} item item
+	 * @param {string} key key
+	 * @param {number} size size
+	 */
+	constructor(item, key, size) {
+		this.item = item;
+		this.key = key;
+		this.size = size;
+	}
+}
+
+/**
+ * @template T
+ */
+class Group {
+	/**
+	 * @param {Node<T>[]} nodes nodes
+	 * @param {number[]} similarities similarities between the nodes (length = nodes.length - 1)
+	 */
+	constructor(nodes, similarities) {
+		this.nodes = nodes;
+		this.similarities = similarities;
+		this.size = nodes.reduce((size, node) => size + node.size, 0);
+		/** @type {string} */
+		this.key = undefined;
+	}
+}
+
+/**
+ * @template T
+ * @typedef {Object} GroupedItems<T>
+ * @property {string} key
+ * @property {T[]} items
+ * @property {number} size
+ */
+
+/**
+ * @template T
+ * @typedef {Object} Options
+ * @property {number} maxSize maximum size of a group
+ * @property {number} minSize minimum size of a group (preferred over maximum size)
+ * @property {Iterable<T>} items a list of items
+ * @property {function(T): number} getSize function to get size of an item
+ * @property {function(T): string} getKey function to get the key of an item
+ */
+
+/**
+ * @template T
+ * @param {Options<T>} options options object
+ * @returns {GroupedItems<T>[]} grouped items
+ */
+module.exports = ({ maxSize, minSize, items, getSize, getKey }) => {
+	/** @type {Group<T>[]} */
+	const result = [];
+
+	const nodes = Array.from(
+		items,
+		item => new Node(item, getKey(item), getSize(item))
+	);
+
+	/** @type {Node<T>[]} */
+	const initialNodes = [];
+
+	// return nodes bigger than maxSize directly as group
+	for (const node of nodes) {
+		if (node.size >= maxSize) {
+			result.push(new Group([node], []));
+		} else {
+			initialNodes.push(node);
+		}
+	}
+
+	if (initialNodes.length > 0) {
+		// lexically ordering of keys
+		initialNodes.sort((a, b) => {
+			if (a.key < b.key) return -1;
+			if (a.key > b.key) return 1;
+			return 0;
+		});
+
+		// calculate similarities between lexically adjacent nodes
+		/** @type {number[]} */
+		const similarities = [];
+		for (let i = 1; i < initialNodes.length; i++) {
+			const a = initialNodes[i - 1];
+			const b = initialNodes[i];
+			similarities.push(similarity(a.key, b.key));
+		}
+
+		const queue = [new Group(initialNodes, similarities)];
+
+		while (queue.length) {
+			const group = queue.pop();
+			// only groups bigger than maxSize need to be splitted
+			if (group.size < maxSize) {
+				result.push(group);
+				continue;
+			}
+
+			// find unsplittable area from left and right
+			// going minSize from left and right
+			let left = 0;
+			let leftSize = 0;
+			while (leftSize < minSize) {
+				leftSize += group.nodes[left].size;
+				left++;
+			}
+			let right = group.nodes.length - 1;
+			let rightSize = 0;
+			while (rightSize < minSize) {
+				rightSize += group.nodes[right].size;
+				right--;
+			}
+
+			if (left - 1 > right) {
+				// can't split group while holding minSize
+				// because minSize is preferred of maxSize we return
+				// the group here even while it's too big
+				// To avoid this make sure maxSize > minSize * 3
+				result.push(group);
+				continue;
+			}
+			if (left <= right) {
+				// when there is a area between left and right
+				// we look for best split point
+				// we split at the minimum similarity
+				// here key space is separated the most
+				let best = left - 1;
+				let bestSimilarity = group.similarities[best];
+				for (let i = left; i <= right; i++) {
+					const similarity = group.similarities[i];
+					if (similarity < bestSimilarity) {
+						best = i;
+						bestSimilarity = similarity;
+					}
+				}
+				left = best + 1;
+				right = best;
+			}
+
+			// create two new groups for left and right area
+			// and queue them up
+			const rightNodes = [group.nodes[right + 1]];
+			/** @type {number[]} */
+			const rightSimilaries = [];
+			for (let i = right + 2; i < group.nodes.length; i++) {
+				rightSimilaries.push(group.similarities[i - 1]);
+				rightNodes.push(group.nodes[i]);
+			}
+			queue.push(new Group(rightNodes, rightSimilaries));
+
+			const leftNodes = [group.nodes[0]];
+			/** @type {number[]} */
+			const leftSimilaries = [];
+			for (let i = 1; i < left; i++) {
+				leftSimilaries.push(group.similarities[i - 1]);
+				leftNodes.push(group.nodes[i]);
+			}
+			queue.push(new Group(leftNodes, leftSimilaries));
+		}
+	}
+
+	// lexically ordering
+	result.sort((a, b) => {
+		if (a.nodes[0].key < b.nodes[0].key) return -1;
+		if (a.nodes[0].key > b.nodes[0].key) return 1;
+		return 0;
+	});
+
+	// give every group a name
+	for (let i = 0; i < result.length; i++) {
+		const group = result[i];
+		const first = group.nodes[0];
+		const last = group.nodes[group.nodes.length - 1];
+		let name = getName(first.key, last.key);
+		group.key = name;
+	}
+
+	// return the results
+	return result.map(group => {
+		/** @type {GroupedItems} */
+		return {
+			key: group.key,
+			items: group.nodes.map(node => node.item),
+			size: group.size
+		};
+	});
+};

package/lib/util/identifier.js

@@ -74,3 +74,30 @@ exports.makePathsRelative = (context, identifier, cache) => {
 		return relativePath;
 	}
 };
+
+/**
+ * @param {string} context absolute context path
+ * @param {string} request any request string may containing absolute paths, query string, etc.
+ * @returns {string} a new request string avoiding absolute paths when possible
+ */
+exports.contextify = (context, request) => {
+	return request
+		.split("!")
+		.map(r => {
+			const splitPath = r.split("?", 2);
+			if (/^[a-zA-Z]:\\/.test(splitPath[0])) {
+				splitPath[0] = path.win32.relative(context, splitPath[0]);
+				if (!/^[a-zA-Z]:\\/.test(splitPath[0])) {
+					splitPath[0] = splitPath[0].replace(/\\/g, "/");
+				}
+			}
+			if (/^\//.test(splitPath[0])) {
+				splitPath[0] = path.posix.relative(context, splitPath[0]);
+			}
+			if (!/^(\.\.\/|\/|[a-zA-Z]:\\)/.test(splitPath[0])) {
+				splitPath[0] = "./" + splitPath[0];
+			}
+			return splitPath.join("?");
+		})
+		.join("!");
+};