Разбиение кода с помощью Webpack для Intl polyfill

Я пытаюсь создать пакет для intl Polyfill, чтобы загрузить его только для браузера, который этого требует.

Используя следующий код, он создает пакет в моей выходной папке

if (!window.Intl) {
  require.ensure(['intl/dist/Intl'], (require) => {
    window.Intl = require('intl/dist/Intl');
  }, 'intl-bundle');
}

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

Другая проблема заключается в том, что когда браузер пытается загрузить файл, он пытается из корневой папки моего приложения. Так что вместо скачивания http://mydomain/js/1.intl-bundle.jsпытается получить http://mydomain/1.intl-bundle.js

Есть ли способ установить откуда файл должен быть загружен?

мой webpack.config.js вывод выглядит так:

output: {
  path: './js/',
  filename: '[name].js'
},

И последний вопрос, могу ли я удалить 1. в начале имени файла, просто чтобы intl-bundle.js?

Спасибо

1 ответ

На самом деле я собираюсь ответить на несколько моих собственных вопросов, так как я только что нашел решение после нескольких часов исследований.

По второму вопросу я не определяю publicPath в моей сборке, которая была причиной, по которой браузер загружал файл из корня моего домена. Дополнительная информация: https://github.com/webpack/docs/wiki/configuration

output: {
  path: './js/',
  publicPath: './js/'
}

В последнем вопросе вы можете назвать свои куски следующим образом:

output: {
  chunkFilename: '[id]-[name]-[chunkhash].js'
}

Это позволяет вам определить имя ваших кусков.

У меня до сих пор нет ответа, чтобы уменьшить размер файла intl.

Другие вопросы по тегам