VSCode启动节点调试器Webpack构建速度降低4倍

Question

使用$ node dist/server/server.js Webpack构建时间为9.5秒。使用VSCode的节点启动程序，webpack的构建时间更改为40秒。

构建/编译时间增加4倍的原因可能是什么？我在启动设置中缺少重要的东西吗？

在该时间点进行项目repo。下面，我用可能相关的代码提取了文件。

// launch.json
{
      "name": "Launch server",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/dist/server/server.js",
      "cwd": "${workspaceFolder}"
},

// server.ts
import { ApolloServer } from "apollo-server-express";
import dotenv from "dotenv";
import { writeFileSync } from "fs";
import http from "http";
import { fileLoader, mergeResolvers, mergeTypes } from "merge-graphql-schemas";
import path from "path";
import app from "./App";
import { connect as mongooseConnect } from "./db";
import { createContext } from "./utils";
dotenv.config();

const typesArray = fileLoader(path.join(__dirname, "./graphql/**/*.graphql"));
const typeDefs: any = mergeTypes(typesArray);
// const typeDefs: any = mergeTypes(typesArray, { all: true });
writeFileSync("server/autoGen.graphql", typeDefs);

const resolversArray = fileLoader(
  path.join(__dirname, "./graphql/**/*resolvers.js")
);

const resolvers = mergeResolvers(resolversArray);

const PORT = process.env.PORT || 4000;

mongooseConnect(() => {
  const server = new ApolloServer({
    typeDefs,
    resolvers,
    context: createContext
  });
  server.applyMiddleware({ app });

  const httpServer = http.createServer(app);
  server.installSubscriptionHandlers(httpServer);

  httpServer.listen(PORT, () => {
    console.log(
      ` Server ready at http://localhost:${PORT}${server.graphqlPath}`
    );
    console.log(
      ` Subscriptions ready at ws://localhost:${PORT}${
        server.subscriptionsPath
      }`
    );
  });
});

// app.ts
import express, { Request, Response, NextFunction } from "express";
import path from "path";
import webpack from "webpack";
import webpackDevMiddleware from "webpack-dev-middleware";
import webpackHotMiddleware from "webpack-hot-middleware";
import webpackConfig from "../webpack/config";
const compiler = webpack(webpackConfig);

const app = express();

const setupWebpack = () => {
  app.use("/public", express.static("public"));
  app.use(
    webpackDevMiddleware(compiler, {
      // hot: true,
      publicPath: webpackConfig.output!.publicPath!
    })
  );
  /* The webpack-dev-middleware serves the files emitted from webpack
 over a connect server and webpack-hot-middleware will allow
 us to hot reload on Express. */
  app.use(
    webpackHotMiddleware(compiler, {
      log: false
    })
  );
};

if (process.env.NODE_ENV !== "production") {
  setupWebpack();
}

app.get("*", (req: Request, res: Response, next) => {
  if (req.url === "/graphql") {
    next();
  } else {
    res.sendFile(path.join(process.cwd(), "index.html"));
  }
});

export default app;

// webpack.config.ts
import * as path from "path";
import * as webpack from "webpack";
import * as bundleAnalyzer from "webpack-bundle-analyzer";
import Visualizer from "webpack-visualizer-plugin";

const { BundleAnalyzerPlugin } = bundleAnalyzer;

const config: webpack.Configuration = {
  entry: [
    // 'webpack-hot-middleware/client?path=/__webpack_hmr&quiet=true',
    // 'babel-polyfill',
    "./src/index.tsx"
  ],
  mode: "development",
  output: {
    // path: path.resolve(process.cwd(), 'public'),
    publicPath: "/public",
    filename: "bundle.js",
    libraryTarget: "umd"
  },
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false
  },
  devtool: "cheap-module-eval-source-map",
  // devServer: {
  //   // contentBase: '/',
  //   overlay: true,
  //   hot: true
  // },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new BundleAnalyzerPlugin({})
    // new Visualizer()
  ],
  cache: true,
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader"
          }
        ]
      }
    ]
  },
  resolve: {
    alias: {
      Constants: path.resolve(process.cwd(), "./src/constants"),
      Utils: path.resolve(process.cwd(), "./src/utils"),
      // Queries: path.resolve(process.cwd(), './src/gqlQueries'),
      // Mutations: path.resolve(process.cwd(), './src/gqlMutations'),
      // Fragments: path.resolve(process.cwd(), './src/gqlFragments'),
      // Subscriptions: path.resolve(process.cwd(), './src/gqlSubscriptions'),
      Reusable: path.resolve(process.cwd(), "./src/components/reusable"),
      GqlClient: path.resolve(process.cwd(), "./src/graphql")
    },
    extensions: ["*", ".js", ".jsx", ".ts", ".tsx", ".css", "png", "jpg", "gif"]
  },
  externals: {
    react: "React",
    "react-dom": "ReactDOM"
    // 'react-router': 'ReactRouter',
  }
};

export default config;