javascript - 使用 Webpack 进行 Intl polyfill 的代码拆分

Question

我正在尝试为intlpolyfill 创建一个包，以便仅为需要它的浏览器加载它。

使用以下代码，它在我的输出文件夹中创建包

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吗？

谢谢

score 0 · Accepted Answer

实际上，我会回答一些我自己的问题，因为经过几个小时的研究，我刚刚找到了一些解决方案。

对于第二个问题，我没有publicPath在我的构建中定义，这就是浏览器从我的域的根目录下载文件的原因。更多信息：https ://github.com/webpack/docs/wiki/configuration#outputpublicpath

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

对于最后一个问题，您可以使用以下内容命名您的块：

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

这使您可以决定块的名称。

我仍然没有任何答案来减小 intl 文件的大小。

1 回答 1