Смешайте долгосрочное кэширование и разделение кода в webpack 2

Я пишу веб-приложение javascript, используя webpack 2 в качестве сборщика модулей.

Что мне нужно, так это способ смешивания функции долгосрочного кэширования (https://webpack.js.org/guides/caching/) и разделение кода (https://webpack.js.org/guides/code-splitting/).

Я могу лениво загрузить библиотеку поставщика (в моем случае pixi.js), используя require.ensure, но это приводит к созданию пакета, включая библиотеку. Я также могу создавать кэшируемые пакеты, но я хотел бы создать пакет для долгосрочного кэширования и использовать его в части с ленивой загрузкой.

Является ли это возможным?

Изменить 1

Я добавляю некоторые части моей конфигурации для лучшего объяснения.

entry: {
  vendor: ['some', 'vendors', 'libs'],
  pixi: ['pixi.js'],
  main: ['babel-polyfill', './app/index.js'],
},
output: {
  [... other configuration]
  filename: '[name].[chunkhash].bundle.js',
  chunkFilename: '[name].[chunkhash].js'
},

Я использую пакет поставщика для внешних библиотек, необходимых во время запуска, но pixi.js нужен только в некоторых случаях, но я хотел бы, чтобы его кэшировали на длительный срок.

Фаза связывания выдает эти 2 файла (и многие другие):

pixi.8ef3aeac142f1bf921bf.bundle.js 6.9331d810904191781167.js

их содержание почти одинаково. Второй создается с помощью require.ensure, но я бы хотел, чтобы использовался pixi.8ef3aeac142f1bf921bf.bundle.js.


webpack javascript frontend caching code-splitting
person c3s4    schedule 16.03.2017    source источник
comment
вопрос: зачем вам pixi бандл? Если вы загружаете компонент pixi с помощью require.ensure, он уже предоставлен 6.9331d810904191781167.js. Вам не нужно объявлять пакет для него.   -  person Jonathan Argentiero    schedule 16.03.2017
comment
Я хотел бы включить долгосрочное кэширование, и я не уверен, что 6. часть имени файла чанка останется прежней, если я добавлю другой require.ensure.   -  person c3s4    schedule 16.03.2017
comment
Хорошо, тогда я обновляю существующий ответ. Посмотри на это.   -  person Jonathan Argentiero    schedule 16.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

Используя require.ensure, создайте другой фрагмент кода, который будет построен в другом файле. Тип кеша, который вы хотите предложить, зависит от политики именования, которую вы даете этим пакетам (и, конечно же, от конфигурации вашего сервера).

Искомый параметр: chunckFilename.

output: {
  chunkFilename: '[name].chunk.js',
}

Если вы установите его таким образом, у вас всегда будут предопределенные фрагменты с именами 0.chunk.js, 1.chunk.js и т. д.

Конечно, это может создать проблемы для клиентов, поэтому вы хотели бы настроить этот параметр следующим образом:

output: {
  chunkFilename: '[name].[chunkhash].chunk.js',
}

Добавление chunkhash к имени вашего чанка даст вам имена чанков 0.4c473bca1d7688737499.chunk.js, 1.2cfbf4a9cc0e1f24ec2c.chunk.js и т. д.

Фрагмент хэша идентичен для каждой сборки приложения, которая не изменяет код фрагмента. Это означает, что если вы никогда не меняете свою библиотеку, чанкхэш никогда не изменится, поэтому пользователю никогда не придется повторно загружать этот файл снова.

Если вы хотите убедиться, что чанк всегда имеет одно и то же имя, вы можете указать имя в объявлении require.ensure:

require.ensure([], function(require){
  var pixi = require('pixi');
  // ...
}, "pixi"); // this will be passed webpack template under [name] and can be used with chunkFilename

Я лично предлагаю тот же подход для именования пакетов:

output: {
  /**
   * Specifies the name of each output file on disk.
   * IMPORTANT: You must not specify an absolute path here!
   *
   * See: https://webpack.js.org/configuration/output/#output-filename
   */
  filename: '[name].[hash].bundle.js',

  /** The filename of non-entry chunks as relative path
   * inside the output.path directory.
   *
   * See: https://webpack.js.org/concepts/output/#output-chunkfilename
   */
  chunkFilename: '[name].[chunkhash].chunk.js',
}
person Jonathan Argentiero    schedule 16.03.2017
comment
У меня почти идентичная конфигурация, но это не то, что я ищу. Я попытаюсь отредактировать свой ответ с некоторыми фрагментами конфигурации. - person c3s4; 16.03.2017
comment
@c3s4 c3s4 Я обновил ответ примером того, как назвать свой фрагмент - person Jonathan Argentiero; 16.03.2017
comment
извините за поздний ответ. Он отлично работает для того, что мне нужно. Спасибо - person c3s4; 28.04.2017