Загружайте куски / связки по мере необходимости (например, SystemJS) - PullRequest
Новая
       11

Загружайте куски / связки по мере необходимости (например, SystemJS)

0 голосов
/ 21 ноября 2018

Используя 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/, и было бы идеально, если бы каждый из этих каталогов оказался в своем собственном пакете, который затем динамически загружался.Я не мог заставить это работать автоматизированным / умным способом.

...