webpack TypeScript编译非常慢>12s

qxsslcnc  于 2023-03-23  发布在  Webpack
关注(0)|答案(3)|浏览(137)

只是把这个放在那里,看看是否有人有这个问题...
我使用webpack作为我的构建工具,用typescript构建了一个angular 2应用程序,它工作得很好,但是我注意到typescript编译超级超级慢,我现在只有12秒....,很明显这都是由于typescript编译过程....
我使用过ts-loader或awesome-typescript-loader,得到了类似的结果,如果我注解掉这个loader,我的构建时间会下降到1秒左右。
经过一些研究,在编译 typescript 时有“慢”的时间似乎是“正常的”,但12秒是正常的吗?
旧帖子暗示这可能是由于节点版本冲突,我目前运行的是v4.4.2...
下面是我的webpack代码,以防有人发现那里有什么问题.. Uglify部分的注解代码是由于angular 2侧的一些'bug'...

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

{
  "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"
  ]
}
qc6wkl3g

qc6wkl3g1#

我会坚持使用awesome-typescript-loader。它有一些性能选项可以启用:缓存选项和仅转译选项:

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

这两个版本在编译时间上都有显著的改进。

nimxete2

nimxete22#

现在有an official wiki建议最佳实践和解决编译器性能问题的方法。它很长,所以有很多信息可以帮助。下面是许多建议之一:

一个月一个月

您可以使用--extendedDiagnostics运行TypeScript,以获得编译器在何处花费时间的打印输出。

Files:                         6
Lines:                     24906
Nodes:                    112200
Identifiers:               41097
Symbols:                   27972
Types:                      8298
Memory used:              77984K
Assignability cache size:  33123
Identity cache size:           2
Subtype cache size:            0
I/O Read time:             0.01s
Parse time:                0.44s
Program time:              0.45s
Bind time:                 0.21s
Check time:                1.07s
transformTime time:        0.01s
commentTime time:          0.00s
I/O Write time:            0.00s
printTime time:            0.01s
Emit time:                 0.01s
Total time:                1.75s

请注意,Total time不会是它之前所有时间的总和,因为有一些重叠,并且一些工作没有被检测。
对于大多数用户来说,最重要的信息是:
| 字段|意义|
| - ------|- ------|
| Files|程序包含的文件数量(使用--listFilesOnly查看它们是什么)。|
| I/O Read time|从文件系统阅读所花费的时间-这包括遍历include'd文件夹。|
| Parse time|扫描和解析程序所用的时间|
| Program time|执行从文件系统阅读、扫描和解析程序以及程序图的其他计算所花费的时间的总和。这些步骤在这里是混合和组合的,因为文件一旦通过import s和export s包含就需要解析和加载。|
| x1米11米1x|构建单个文件本地的各种语义信息所花费的时间。|
| Check time|对程序进行类型检查所用的时间。|
| transformTime time|将TypeScript AST(表示源文件的树)重写为在旧运行时中工作的表单所花费的时间。|
| commentTime|计算输出文件中的注解所用的时间。|
| I/O Write time|在磁盘上写入/更新文件所花费的时间。|
| printTime|计算输出文件的字符串表示形式并将其发送到磁盘所花费的时间。|
你可能想问的事情给出了这个输入:

  • 文件数/代码行数是否大致对应于项目中的文件数?如果不是,请尝试运行--listFiles
  • Program timeI/O Read time是否看起来相当高?请确保您的include/exclude设置配置正确。
  • 其他时间是否看起来不正常?您可能需要提交问题!您可以帮助诊断的事情可能是
  • 如果printTime为高,则使用emitDeclarationOnly运行。
  • 阅读有关报告编译器性能问题的说明。
cwtwac6a

cwtwac6a3#

请分享你的tsconfig.json。很可能你把noEmitOnError设置为true,这意味着编译器在发出之前 * 被迫对整个代码库进行类型检查 *。
请将其设置为false。

相关问题