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
, должны иметь тот же 'chunkHa sh', но, к моему удивлению, это не так.
Изучив фрагменты, я выяснил, что 2 фрагмента имеют одинаковое тело, только их webpackJsonp отличается.
chunk1
(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",
...
chunk 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
Это заставляет браузер загружать одно и то же дважды.
Есть ли прогулка?