Я изучал стратегии комплектации веб-пакетов и нашел здесь довольно хорошее руководство: https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
Похоже, стоит рекомендовать, чтобы множество отдельных файлов (часто) было лучшим способом.Я последовал за этим и создал простой пакет, состоящий из файла js, который импортирует flexslider:
import "flexslider"
$(window).on('load', function () {
$('.flexslider').flexslider({
});
});
Очевидно, что flexslider живет в папке node_modules, и моя конфигурация webpack настроена для разделения пакетов npm:
runtimeChunk: 'single',
splitChunks: {
chunks: "all",
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
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('@', '')}`;
},
},
}
Теперь для этого довольно простого сценария вот что сгенерировал веб-пакет
Игнорируйте core и main, поскольку это другие пакеты.
homeUS - это файл, который импортировал flexslider. Что касается моего HomeUS.html, должен ли я ссылаться на все эти js-файлы?или это что-то внутреннее в веб-пакете, и я просто ссылаюсь на HomeUs.js и flexslider.js, и все это просто «работает»?
Я предполагаю, что некоторые из них являются зависимостями flexslider. Как вы, вероятно, можете сказать, что я неэксперт по веб-пакетам - похоже, идея состоит в том, что возвращающимся посетителям нужно будет загружать отдельные пакеты npm только в том случае, если они изменились, а не в виде огромного пакета «вендора».
Спасибо