如何配置 babel 以在多个 webpack 入口点仅导入必要的 polyfill？

编程问答 2022-04-21

问题描述

我正在构建一个网络应用程序，我想提高它的性能。下面的示例只是为了说明情况并尝试了解 babel 和 core-js 的工作原理以及如何正确配置 webpack。

package.json

"devDependencies": {
  "@babel/core": "^7.14.6","@babel/preset-env": "^7.14.7","babel-loader": "^8.2.2","webpack": "^5.40.0","webpack-cli": "^4.7.2"
},"dependencies": {
  "core-js": "^3.15.1"
},"browserslist": [
  "defaults"
]

webpack.config.js

module.exports = {
  entry: {
    foo: "./src/foo",bar: "./src/bar",},output: {
    clean: true,mode: "development",devtool: false,module: {
    rules: [
      {
        test: /\.m?js$/,exclude: /node_modules/,use: {
          loader: "babel-loader",options: {
            presets: [
              [
                "@babel/preset-env",{
                  useBuiltIns: "usage",corejs: 3.15,],};

foo.js

Promise.resolve(42).then((x) => console.log(x));

bar.js

Promise.resolve(99).then((x) => console.log(x));

运行 webpack 构建时，useBuiltIns: "usage" 选项会自动检测要导入的 polyfill，但它会导致跨多个文件（输出包 dist/foo.js 和 dist/bar.js 包含 Promise) 的 polyfill：

asset bar.js 97.6 KiB [emitted] (name: bar)
asset foo.js 97.6 KiB [emitted] (name: foo)
runtime modules 2.38 KiB 10 modules
modules by path ./node_modules/core-js/internals/*.js 40.1 KiB 79 modules
modules by path ./src/*.js 376 bytes
  ./src/foo.js 188 bytes [built] [code generated]
  ./src/bar.js 188 bytes [built] [code generated]
modules by path ./node_modules/core-js/modules/*.js 14.3 KiB
  ./node_modules/core-js/modules/es.object.to-string.js 380 bytes [built] [code generated]
  ./node_modules/core-js/modules/es.promise.js 13.9 KiB [built] [code generated]
webpack 5.40.0 compiled successfully in 940 ms

如果我更改 useBuiltIns: "entry" 并添加一个新的 webpack 入口点来导入 polyfills entry: { polyfills: "core-js/stable" } 然后再次运行 webpack build，polyfills 被捆绑到一个单独的文件 dist/polyfills.js em> 但它太大了（其中包含不必要的代码）：

asset polyfills.js 640 KiB [emitted] (name: polyfills)
asset bar.js 265 bytes [emitted] (name: bar)
asset foo.js 265 bytes [emitted] (name: foo)
runtime modules 221 bytes 1 module
modules by path ./node_modules/core-js/modules/*.js 238 KiB 226 modules
modules by path ./node_modules/core-js/internals/*.js 152 KiB 167 modules
modules by path ./src/*.js 198 bytes
  ./src/foo.js 99 bytes [built] [code generated]
  ./src/bar.js 99 bytes [built] [code generated]
./node_modules/core-js/stable/index.js 9.46 KiB [built] [code generated]
webpack 5.40.0 compiled successfully in 1859 ms

我也尝试将 plugins: [ "@babel/plugin-transform-runtime" ] 添加到 babel-loader 选项（和 npm install --save @babel/runtime），但没有任何改变。

为了解决这个问题，我可以手动添加 polyfill（在本例中为 import "core-js/stable/promise"），但如果有更好的解决方案就好了。

如何将 babel 配置为仅将必要的 polyfill 导入到一个单独的文件中，而无需手动将它们一一导入？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babeljscore-jswebpackwebpackwebpack