20223.05.12 - 可选链操作符的Ployfill

可选链操作符是ES2020的新特性，如果要在webpack版本低于5.20的vue2项目中使用它，需要对babel进行配置。

首先，需要安装 @babel/plugin-proposal-optional-chaining 插件：

npm install --save-dev @babel/plugin-proposal-optional-chaining

然后，在 .babelrc 或 babel.config.js 文件中添加如下配置：

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

这样就可以在 vue2 项目中使用可选链操作符了。注意，这个插件是 babel 7.x 版本的，如果你的项目使用 babel 6.x 版本，需要安装 @babel/plugin-syntax-optional-chaining 插件，然后在 .babelrc 文件中添加如下配置：

{
  "plugins": ["@babel/plugin-syntax-optional-chaining"]
}

带入项目中

​ 应该把 @babel/plugin-proposal-optional-chaining 插件放在数组的最后一个位置，像这样：

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        // styleLibraryName: '~src/styles/theme',
        style: false
      }
    ],
    "@babel/plugin-proposal-optional-chaining"
  ]
};

这样配置，@babel/plugin-proposal-optional-chaining 插件会在其他插件执行完后再进行代码转换，确保能够正确解析项目中的代码。

Polyfill垫片对项目的影响

​ Polyfill 对打包后的代码大小有一定的影响，但它不会直接影响打包后的代码的运行速度。因为 Polyfill 主要是在运行时对代码进行转换，添加一些额外的代码来模拟缺失的新特性，而不是在编译时对代码进行转换。所以，Polyfill 只会增加代码的体积，不会影响代码的运行速度。

但是，如果代码体积过大，也会对打包后的代码的运行速度产生影响。因为过大的代码体积会增加代码加载的时间，影响页面的加载速度。所以，为了确保打包后的代码能够快速加载和运行，需要对代码进行优化，减小代码体积。

综上所述，Polyfill 对打包后的代码的运行速度影响较小，但它会增加代码的体积，所以还需要对代码进行优化，以确保打包后的代码能够快速加载和运行。

垫片打包后的效果

function replaceyihuName(e) {
  if (!e) return '';
  var t =
    null === e || void 0 === e
      ? void 0
      : e.replace('（1户）', '');
  return t;
};

void 0 是 JavaScript 中的一种常见用法，它的作用是返回 undefined。在 Webpack 打包过程中，可能会出现 void 0 的代码，这通常是由于 JavaScript 代码中的一些语法或者代码压缩工具导致的。

在一些情况下，void 0 可以用来代替 undefined 关键字，因为 undefined 可以被重定义，而 void 关键字保证了返回值一定是 undefined。

如果你对于这个问题还有疑问，可以提供更多的代码和上下文，我可以帮你更好地理解这个问题。