webpackJsonp 更改 chunkHash
webpackJsonp changes the chunkHash
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
}
在上面的缓存组中,我试图拆分每个 node_module,输出文件名为 c[chunkhash].js
我希望 2 个不同的页面具有共同的导入,例如 axios
应该具有相同的 'chunkHash',但令我惊讶的是情况并非如此。
查看这些块后,我发现这两个块具有相同的主体,只是它们的 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
这会导致浏览器下载相同的内容两次。
周围有散步吗?
我发现,这是 多编译器 和 多入口 webpack 配置之间的主要区别。
当你为 webpack 做一个多编译器配置时,你就失去了重用块和做更好的代码拆分的能力。
因此,请尝试坚持使用多入口 webpack 配置和单一运行时
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
}
在上面的缓存组中,我试图拆分每个 node_module,输出文件名为 c[chunkhash].js
我希望 2 个不同的页面具有共同的导入,例如 axios
应该具有相同的 'chunkHash',但令我惊讶的是情况并非如此。
查看这些块后,我发现这两个块具有相同的主体,只是它们的 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
这会导致浏览器下载相同的内容两次。
周围有散步吗?
我发现,这是 多编译器 和 多入口 webpack 配置之间的主要区别。
当你为 webpack 做一个多编译器配置时,你就失去了重用块和做更好的代码拆分的能力。
因此,请尝试坚持使用多入口 webpack 配置和单一运行时