Code Splitting with Webpack for Intl polyfill

Question

I'm trying to create a bundle for the intl polyfill to load it only for browser which requires it.

Using the following code, it creates the bundle in my output folder

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

The first thing I noticed is the size of the file is huge, it contains all the languages, is there a way to define the languages I want?

The other issue is that when the browser tries to download the file, it tries from the root folder of my app. So instead of downloading http://mydomain/js/1.intl-bundle.js, it tries to get http://mydomain/1.intl-bundle.js

Is there a way to set from where the file should be downloaded?

My webpack.config.js output looks like this:

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

And the last question, can I remove the 1. at the beginning of the name of the file, just to have intl-bundle.js?

Thanks

score 0 · Answer 1 · answered Mar 04 '16 at 17:06

I'm actually going to answer a few of my own question as I just found some of the solution after a few hours of research.

For the second question, I wasn't defining the publicPath in my build, which was the reason why the browser was downloading the file from the root of my domain. More info: https://github.com/webpack/docs/wiki/configuration#outputpublicpath

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

For the last question, you can name your chunks with the following:

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

This allows you to decide the name of your chunks.

I still don't have any answer to reduce the size of the intl file.

Code Splitting with Webpack for Intl polyfill

1 Answers1