为什么包含和排除外部组件时，我的src的webpack捆绑大小会有所不同？

问题描述

请注意，这是关于捆绑包中 my 部分大小变化的问题，而不是为什么包含外部库会使整个捆绑包变大的问题。 >

我是webpack的新手，正在寻找确保最小化包大小的方法，同时仍然通过babel和core-js提供我想要的浏览器支持。我正在使用Webpack Visualizer来分析webpack和babel在各种设置下输出包的大小。

当我通过webpack的externals配置从捆绑包中排除正在使用的主要外部库时，我的src目录的捆绑包大小减少了约5k（总捆绑包是〜16k），这符合我的期望，因为这是一个精简的包装库。但是，当我不排除这些库时，我的src目录的捆绑包最小为〜31k（总捆绑包为〜71k）。

为什么包括外部组件会大大增加非外部组件的捆绑尺寸？请参阅下面的分析仪截图。代码位于here，我的webpack / babel /浏览器配置也都粘贴在下面。

免责声明：这是我第一次尝试为npm编写/打包JavaScript库。

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/zar.js',module: {
    rules: [
      {
        test: /\.(js)$/,exclude: /node_modules/,use: ['babel-loader']
      }
    ]
  },optimization: {
    // minimize: false,},externals: {
    // 'analytics': 'analytics',// '@analytics/storage-utils': '@analytics/storage-utils',// '@analytics/google-tag-manager': '@analytics/google-tag-manager',// 'axios': 'axios',resolve: {
    extensions: ['*','.js']
  },plugins: [
    new CleanWebpackPlugin(),],output: {
    library: 'zar',libraryTarget: 'umd',filename: 'zar.bundle.js',path: path.resolve(__dirname,'dist'),};

以及babel /浏览器配置的一些相关部分：

  "browserslist": [
    "> 0.1%,not dead"
  ],"babel": {
    "presets": [
      [
        "@babel/preset-env",{
          "useBuiltIns": "usage","corejs": "3.6","debug": false
        }
      ]
    ]
  }

排除的外部组件（在webpack配置中未注释）：

包含的外部组件（注释如上所示）：

解决方法

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

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

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

babeljs javascript webpack webpack webpack