如何在不请求整个 core-js 包的情况下需要一些 polyfill？

Question

所以我第一次在这里问一个问题，所以很好。

我正在使用 react.js 和 webpack 4 配置构建一个网页，并且我正在尝试通过代码拆分动态加载 polyfill，这样我就可以支持像 ie11 这样的旧浏览器。

我一直在查看 this 的捆绑拆分和代码拆分教程。 （向下滚动到标题“polyfill”以有条件地加载 polyfill）

这是我的设置：

webpack.config.js：

const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const htmlPlugin = new HtmlWebPackPlugin({
  template: './src/index.html',
  filename: './index.html'
});

const cleanWebpack = new CleanWebpackPlugin(['dist']);


module.exports = {
  entry: ['core-js/modules/es6.promise', 'core-js/modules/es6.array.iterator', path.resolve(__dirname, './src/index.js')],
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            minimize: true
          }
        }]
      },
      {
        test: /\.(css|scss)/,
        use: [{
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]_[local]_[hash:base64]',
              sourceMap: true,
              minimize: true
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [{
          loader: 'file-loader?name=assets/[name].[hash].[ext]'
        }]
      },
      {
        test: /\.(png|jpg|svg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]'
          }
        }]
      }
    ]
  },
  devServer: {
    historyApiFallback: true
  },
  plugins: [cleanWebpack, htmlPlugin]
};

package.json：

{
  "name": "new_portfolio",
  "version": "1.0.0",
  "description": "Daniel Dahlmans portfolio site 2019",
  "browserslist": [
    "> 1% in SE",
    " not op_mini all"
  ],
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "core-js": "^2.6.3",
    "css-loader": "^0.28.11",
    "eslint": "^5.12.0",
    "eslint-plugin-react": "^7.12.4",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1",
    "typeface-work-sans": "0.0.54"
  }
}

.babelrc：

{
  "presets": [
    ["@babel/preset-env",
      {
        "debug": true
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties"
  ]
}

我制作了一个名为“polyfills.js”的单独文件，我需要我需要的 polyfill：

polyfills.js：

require('core-js/es6/array');
require('core-js/es6/string');
require('core-js/es6/map');
require('core-js/es6/object');
require('core-js/es6/symbol');

如果它们不受支持，我将有条件地导入它们。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router
} from 'react-router-dom';
import App from './App';
import 'typeface-work-sans';


const render = () => {
    ReactDOM.render( < Router > < App / > < /Router>, document.getElementById('index'));
    };

    if (
      'Symbol' in window &&
      'Map' in window &&
      'startsWith' in String.prototype &&
      'endsWith' in String.prototype &&
      'includes' in String.prototype &&
      'includes' in Array.prototype &&
      'assign' in Object &&
      'entries' in Object &&
      'keys' in Object
    ) {
      render();
    } else {
      import ( /* webpackChunkName: "polyfills" */ './polyfills').then(() => {
        console.log('I am imported async');
        render();
      });
    }

一切正常，所以如果我在 ie11 中运行我的本地主机，我的 polyfills.js 会被请求，如果我在 chrome 中则不会被请求。

但令我惊讶的是 我仍然看到浏览器仍在请求整个 core-js 包，即使我只需要一些 polyfill... 这发生在所有浏览器中。

如何在不请求整个 core-js 包的情况下需要几个 polyfill？

image - from terminal (when running devserver)

image - from networks tab in chrome

image - from elements tab in chrome

我这样做的全部原因是为了减小我的 main.js 包大小。

Answer 1

看起来需要单独的 polyfill 模块会减少包的大小，但实际上并非如此。 在您的 package.json 中安装了整个 core-js 包，并且由于 core-js doesn't use ES2015 modules Webpack 无法优化输出。

但是，可以创建一个仅包含您需要的模块的 core-js 版本。使用 core-js 的 custom build tool 生成一个较小的包并将其添加到您的代码中，而不是整个 core-js。