V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
rabbbit
V2EX  ›  问与答

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

  •  1
     
  •   rabbbit · 2020-06-17 12:21:58 +08:00 · 1429 次点击
    这是一个创建于 1614 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    当前配置:

    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
        1
    Jirajine  
       2020-06-17 12:28:35 +08:00 via Android   ❤️ 1
    你可以试试 esbuild: https://github.com/evanw/esbuild
    alan0liang
        2
    alan0liang  
       2020-06-17 12:38:57 +08:00 via Android   ❤️ 1
    至少上个 cache-loader 吧
    BlackHole1
        3
    BlackHole1  
       2020-06-17 13:07:10 +08:00   ❤️ 1
    不考虑继续使用 webpack 的话,就用 esbuild 。

    如果想继续使用 webpack,方法:
    1. 使用 thread-loader
    2. 升级 webpack 及周边所有的 package
    3. 如果使用到了 nodejs addon 这些东西的(例如 node-sass)话,就配合 ccache,加快构建 C++的速度
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2713 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 42ms · UTC 06:23 · PVG 14:23 · LAX 22:23 · JFK 01:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.