webpackJsonp 改变 chunkHash答案

【问题标题】：webpackJsonp changes the chunkHashwebpackJsonp 改变 chunkHash
【发布时间】：2020-07-14 14:27:24
【问题描述】：

vendors: {
 minSize: 20000,
 test: /[\\/]node_modules[\\/]/,
 chunks: 'initial',
 name(module) {
    // get the name. E.g. node_modules/packageName/not/this/part.js
    // or node_modules/packageName
    const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
    // npm package names are URL-safe, but some servers don't like @ symbols
    return `npm.${packageName.replace('@', '')}`;
 },
 reuseExistingChunk: true
}

在上面的cacheGroup中我尝试拆分每个node_module，输出文件名为c[chunkhash].js

我希望 2 个不同的页面具有共同的导入，例如 axios 应该具有相同的“chunkHash”，但令我惊讶的是，事实并非如此。

在查看了这些块之后，我发现这 2 个块具有相同的主体，只是它们的 webpackJsonp 不同。

块1

(window.webpackJsonp = window.webpackJsonp || []).push([[1], {
    4: function (e, t, r) {
        "use strict";
        (function (e) {
            r.d(t, "a", (function () {
                return ye
            }));
            var n, o, i, a, c = r(0), u = r.n(c), s = r(5), l = r.n(s), f = r(6), p = r.n(f), d = r(1), h = r.n(d),
                y = r(7), T = r.n(y), b = "bodyAttributes", m = "htmlAttributes", g = "titleAttributes", v = {
                    BASE: "base",
                    BODY: "body",
                    HEAD: "head",
                    HTML: "html",
...

块 2

(window.webpackJsonp = window.webpackJsonp || []).push([[2], {
    5: function (e, t, r) {
        "use strict";
        (function (e) {
            r.d(t, "a", (function () {
                return ye
            }));
            var n, o, i, a, c = r(0), u = r.n(c), s = r(6), l = r.n(s), f = r(7), p = r.n(f), d = r(1), h = r.n(d),
                y = r(8), T = r.n(y), b = "bodyAttributes", m = "htmlAttributes", g = "titleAttributes", v = {
                    BASE: "base",
                    BODY: "body",
                    HEAD: "head",
                    HTML: "html",
...

两个块的主体相同，但 Jsonp 索引不同。在 chunk1 中是 4，在 chunk2 中是 5

这会导致浏览器下载相同的东西两次。

有逛街吗？

【问题讨论】：

标签： javascript webpack webpack-4 chunks

【解决方案1】：

我发现，这是 multi-compiler 和 multi-entry webpack 配置之间的主要区别。

当您为 webpack 进行多编译器配置时，您将失去重用块和更好地进行代码拆分的能力。

因此，尝试坚持多入口 webpack 配置和单一运行时

【讨论】：