Webpack4 + TypeScript 如何优化编译速度?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1409 天前的主题，其中的信息可能已经有所发展或是发生改变。

速度有点慢, 有什么办法优化编译速度吗?

当前配置:

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = smp.wrap({
  'entry': ['./src/index.ts'],
  'output': {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  'mode': 'development',
  'devtool': 'eval-source-map',
  'devServer': {
    port: '8000',
    host: '0.0.0.0',
    public: 'localhost:8000',
    open: false,
    quiet: true,
  },
  'plugins': [
    new ForkTsCheckerWebpackPlugin(),
    new webpack.ProgressPlugin(), 
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: true,
      open: false,
    }),
  ],
  'module': {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
  'resolve': {
    extensions: ['.tsx', '.ts', '.js'],
  },
});

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-TypeScript"
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/",
    "target": "ES2020",
    "moduleResolution": "node", // threejs need
    "module": "CommonJS",
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "isolatedModules": true,
    "strictBindCallApply": true,
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/**/*.ts",
    "types/**/*.d.ts"
  ]
}
``

3 条回复 • 2020-06-17 13:07:10 +08:00

Jirajine

2020-06-17 12:28:35 +08:00 via Android

你可以试试 esbuild: https://github.com/evanw/esbuild

alan0liang

2020-06-17 12:38:57 +08:00 via Android

至少上个 cache-loader 吧

BlackHole1

2020-06-17 13:07:10 +08:00

不考虑继续使用 webpack 的话，就用 esbuild 。

如果想继续使用 webpack，方法:
1. 使用 thread-loader
2. 升级 webpack 及周边所有的 package
3. 如果使用到了 nodejs addon 这些东西的(例如 node-sass)话，就配合 ccache，加快构建 C++的速度