Используя Webpack, у меня создается несколько блоков / пакетов, поэтому все приложение не загружается сразу. Я вручную выбрал, какие зависимости я хочу переместить в отдельные блоки. Вот важная часть моей конфигурации:
module.exports = {
devtool: 'inline-source-map',
mode: process.env.NODE_ENV,
entry: {
main: './src/index.tsx',
},
optimization: {
runtimeChunk: {
name: 'runtime',
},
splitChunks: {
cacheGroups: {
...makeChunkCacheGroup('chunk_1', //node_modules/(... list of deps ...)(/|$)/),
...makeChunkCacheGroup('chunk_2', //node_modules/(... list of deps ...)(/|$)/),
},
},
},
// ...
};
function makeChunkCacheGroup(name, ...moduleNameRegexps) {
return {
[name]: {
name,
test: module => moduleNameRegexps.some(pattern => pattern.test(module.context)),
chunks: 'all',
minChunks: 1,
minSize: 0,
maxSize: Infinity,
reuseExistingChunk: true,
enforce: true,
},
};
}
Эта конфигурация дает мне runtime, main, chunk_ и chunk_2. Однако все эти фрагменты вводятся в index.html, поэтому все они загружаются во время начальной загрузки страницы, а не динамически (как я наивно ожидал).
Раньше я использовал SystemJS для объединения вещей в несколько пакетов, и он загружал только данный пакет, как того требовало приложение. Теперь я понимаю, что Webpack так не работает.
Есть ли способ заставить Webpack сначала загружать только пакеты runtime и main, а затем загружать другие пакеты по мере необходимости?
Примечание 1: Я понимаю, что могу использовать динамический импорт, например. import('some-dep').then(...), но это неразумно делать из-за размера кодовой базы, а также, я думаю, что такого рода вещи лучше оставить для настройки (модуль не должен выбирать, какие зависимости он должен загружать динамически).
Заметка 2: Я пытался указать несколько точек входа, но так и не заработал. Приложение действительно имеет только одну точку входа. Но, например, у нас есть несколько каталогов в src/app/elements/, и было бы идеально, если бы каждый из этих каталогов оказался в своем собственном пакете, который затем загружался динамически. Я не мог заставить это работать автоматическим / умным способом.
На мой взгляд, это не место в «коде». Особенно так, как мне пришлось бы делать это с помощью Webpack, то есть с помощью «волшебных комментариев», например. import (/** webpackChunkName: chunk_1 */ /** webpackMode: lazt **/ 'my-dep'); Это очень хакерский и хрупкий. Конфигурация не принадлежит коду, она принадлежит к config. / rant



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


В примечании 1, разве не разумно ожидать, что приложение лучше всего знает, когда загружать модуль? например вы можете естественно писать что-то вроде
doSth() { const dep = await import('dep'); dep.runSth() };