如何加快 webpack 编译（或将其与服务器重启分开）

Question

我目前有这个设置：

import path from 'path'

import type {Configuration} from 'webpack'

const config: Configuration = {
  mode: 'development',
  entry: path.join(__dirname, '../..', 'dev/client.ts'),
  output: {
    path: path.join(__dirname, '../..', 'public'),
    filename: 'script.js',
    assetModuleFilename: '[name][ext]',
    publicPath: '/',
    libraryTarget: 'umd',
    clean: false,
  },
  target: 'web',
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(c|sc|sa)ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.(ico|svg|png|jpg)$/,
        type: 'asset/resource',
      },
    ],
  },
  stats: 'errors-warnings',
  performance: {
    hints: false,
    maxAssetSize: 400000,
    maxEntrypointSize: 400000,
  },
  devtool: 'source-map',
  watch: true,
  watchOptions: {
    aggregateTimeout: 100,
    poll: 1000,
    followSymlinks: true,
    ignored: /node_modules/,
  },
}

export default config

然后我调用编译器：

webpack(configuration, (error, stats) => {
  if (error) {
    console.log(error)
  }

  if (stats && stats.hasErrors()) {
    console.log(stats.toJson().errors)
  }

  if (stats) {
    console.log('Compiled in: ' + stats.toJson().time)
  }
})

这会在您最初启动服务器时产生Compiled in: 4701，之后每当您进行任何文件更改时，在 webpack 已经在监视文件后重新编译它大约需要 200 毫秒，所以它只在初始构建时。

增量构建也已启用。

有什么方法或配置可以减少初始服务器启动的编译时间吗？我想与ts-node-dev 一起运行它，并且我的套接字在大约 100 毫秒内刷新浏览器，所以我不想在每次服务器文件更改时等待 4 秒，然后才能在浏览器中看到任何内容，但我也希望能够使用相同的脚本和控制台运行客户端包和服务器，所以问题是每次更改任何服务器文件时都会完全重新编译客户端。

目前我有tsnd --transpile-only src/dev/server.ts 作为我的开发脚本。该索引正在构建客户端和服务器，这是我想要的，但是在该文件上使用 tsnd 将导致整个文件在服务器文件更改时重建，并隐式地重建整个客户端（这不是我想要的） .有没有另一种方法可以设置它，以便我仍然可以使用相同的脚本运行两者，但无需在服务器更改时重建整个客户端。我知道我可以使用nodemon 并将它们作为单独的进程运行，但这有点违背了使用ts-node-dev 的意义，是否有替代选项或我没有考虑过的愚蠢的东西？

我还想知道是否有办法仅在 webpack 的开发模式期间禁用 ts-loader 的类型检查，这将进一步加快速度。好吧，任何我可以用来优化它的东西，我都会非常感激。

Answer 1

经过反复试验，我终于找到了使用spawn的解决方案。

import {spawn} from 'child_process'

const bundle = spawn('npm', ['run', 'bundle'])

bundle.stdout.on('data', (data) => {
  console.log(data.toString('utf-8'))
})

bundle.stderr.on('data', (data) => {
  console.error(data.toString('utf-8'))
})

bundle.on('close', (code) => {
  console.log(code)
})

const server = spawn('npm', ['run', 'serve'])

server.stdout.on('data', (data) => {
  console.log(data.toString('utf-8'))
})

server.stderr.on('data', (data) => {
  console.error(data.toString('utf-8'))
})

server.on('close', (code) => {
  console.log(code)
})

随着：

  "bundle": "node lib/dev/bundle.js",
  "serve": "tsnd --transpile-only src/dev/server.ts",
  "dev": "node lib/dev/index.js",`

这将允许您将客户端捆绑到一个文件中，将您的 tsnd 服务器放在另一个文件中，并将它们都称为主索引的子进程。现在服务器仅在服务器文件更改时重新编译，客户端仅在客户端文件更改时重新编译，速度非常快。

虽然我不知道这样做的注意事项（这是我第一次产卵这样的孩子），所以我想我很快就会弄清楚这样做是否有任何不利或问题。现在，尽管所有地方都在大约 200 毫秒内重新编译并重新启动。