javascript - 为什么 web pack bundle-size 会随着导入而增加？

Question

我正在使用webpack将非常简单的 JS 函数捆绑并部署到云服务器。我想把它们分成单独的文件，而不是把它们都放在一个index.js.

我的项目结构基本上是这样的：

src/
 index.js
 lib/
   func.js

我的webpack.config.js样子是这样的：

const Dotenv = require('dotenv-webpack');

module.exports = {
  resolve: {
    fallback: { 
      'os': false ,
      'path': false,
      'fs': false
    }
  },
  mode: 'production',
  entry: './src/index.js',
  target: 'webworker',
  plugins: [
    new Dotenv()
  ]
};

该文件func.js是：

export async function createUser({ args, graphql }) {
  const { user } = args;
  return { message: 'hello world!' };
}

现在我捆绑了我的两个版本index.js，起初我将函数直接包含在 index.js 中：

// index.js including createUser()

async function createUser({ args, graphql }) {
  const { user } = args;
  return { message: 'hello' };
}

// add resolver to schema
self.addGraphQLResolvers({
  "Mutation.createUser": createUser
});

创建捆绑包main.js

self.addGraphQLResolvers({"Mutation.createUser":async function({args:e,graphql:s}){const{user:r}=e;return{message:"hello"}}});

对于第二次尝试，我从文件中导入了函数func.js：

// index.js importing createUser()

const { createUser } = require('./lib/func.js');

// add resolver to schema
self.addGraphQLResolvers({
  "Mutation.createUser": createUser
});

这会产生

(()=>{var e={248:(e,r,t)=>{"use strict";async function o({args:e,graphql:r}){const{user:t}=e;return{message:"hello"}}t.r(r),t.d(r,{createUser:()=>o})}},r={};function t(o){var a=r[o];if(void 0!==a)return a.exports;var n=r[o]={exports:{}};return e[o](n,n.exports,t),n.exports}t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{const{createUser:e}=t(248);self.addGraphQLResolvers({"Mutation.createUser":e})})()})();

它们都可以工作，但是为什么 webpack 会这样做呢？我在某处有错误配置吗？

谢谢！

标签： javascriptwebpackbundle