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

2020-06-17 12:21:58 +08:00
 rabbbit

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

当前配置:

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"
  ]
}
``
1380 次点击
所在节点    问与答
3 条回复
Jirajine
2020-06-17 12:28:35 +08:00
你可以试试 esbuild: https://github.com/evanw/esbuild
alan0liang
2020-06-17 12:38:57 +08:00
至少上个 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++的速度

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/682307

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX