TypeScript编译非常慢> 12秒 [英] TypeScript compilation extremely slow > 12s

问题描述

只要把它放在那里看看别人是否有这个问题...

Just putting this out there to see if someone else is having this issue...

我已经使用webpack作为我的构建工具使用typescript构建了一个angular 2应用，一切正常，但是我注意到typescript的编译非常慢，我现在只有12秒....清楚，这全都归功于打字稿的编译过程....

I have building an angular 2 app with typescript using webpack as my build tool, it all works well, however I have noticed typescript compilation is super super slow, I am at 12 seconds right now...., and its pretty clear that is all due to the typescript compilation process....

我曾经使用过ts-loader或awesome-typescript-loader，结果类似，如果我注释掉该加载器，我的构建时间将减少到大约1秒钟....

I have used ts-loader or awesome-typescript-loader with a similar result, if I comment out this loader, my build time drops to around 1 sec....

经过一些研究，似乎在编译打字稿时慢"的时间是正常的"，但是正常时间是12秒吗?

After some research it seems like its 'normal' to have 'slow' times when compiling typescript, but is 12secs the normal??

旧帖子暗示这可能是由于节点版本冲突造成的，我当前正在运行v4.4.2 ...

Old posts hinted it might be due to a node version conflict, I am currently running v4.4.2...

如果有人发现错误，我的webpack代码下面是什么..Uglify部分中的注释代码是由于角度2侧的某些错误"引起的.

Any how below is my webpack code in case anyone spots something wrong there.. the commented code in the Uglify section is due to some 'bug' on the angular 2 side...

const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');

const NpmInstallPlugin = require('npm-install-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;

const PATHS = {
  app: path.join(__dirname, 'app'),
  dist: path.join(__dirname, 'dist')
};

const common = {
  entry: {
    vendor: ['./app/vendor.ts'],
    main: ['./app/boot.component.ts']
  },
  output: {
    filename: '[name].[hash].bundle.js',
    path: PATHS.dist
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Qarrot Performance',
      template: 'index.template.ejs',
      commonStyles: [
        '/public/styles/vendor/normalize.css',
        '/public/styles/main.css'
      ],
      commonScripts: [],
      baseHref: '/',
      unsupportedBrowser: true,
      mobile: true,
      appMountId: 'app'
    }),
  ],
  module: {
    loaders: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loaders: ['ts-loader']
      },
      {
        test: /\.scss$/,
        loader: 'raw-loader!sass-loader'
      },
      {
        test: /\.html$/,
        loader: "html"
      }
    ]
  }
}

// Dev Settings
if(TARGET === 'start' || !TARGET) {
  module.exports = merge(common, {
    devtool: 'eval-source-map',
    devServer: {
      contentBase: PATHS.build,
      historyApiFallback: true,
      hot: true,
      inline: true,
      progress: true,
      stats: 'errors-only',
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new NpmInstallPlugin({
        save: true
      })
    ]
  });
}

// Prod Settings
if(TARGET === 'build') {
  module.exports = merge(common, {
    devtool: 'cheap-module-source-map',
    plugins: [
      // new webpack.optimize.UglifyJsPlugin({
      //   beautify: false,
      //   mangle: false,
      //   compress : { screw_ie8 : true },
      //   comments: false
      // }),
      new webpack.optimize.DedupePlugin(),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"'
      }),
      new CopyWebpackPlugin([
            { from: 'public', to: 'public' }
      ]),
      new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest']
      }),
    ]
  });
}

我也在Mac上运行Angular 2 beta.15和Webpack版本1.12，下面是我的tsconfig.json

I am also on a Mac, running Angular 2 beta.15 and webpack version 1.12, below is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": false,
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

推荐答案

我会坚持使用awesome-typescript-loader.它具有一些可以启用的性能选项:一个缓存选项和一个仅可转换的选项:

I would stick to the awesome-typescript-loader. It has some performance options you can enable: a caching option and a transpile only option:

"awesomeTypescriptLoaderOptions": {
  "useCache": true,
  "transpileOnly": true
}

这两者在编译时间上都有显着改善.

Both of these had a significant improvement on compile times.

这篇关于TypeScript编译非常慢> 12秒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！