只是把这个放在那里,看看是否有人有这个问题...
我使用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"
]
}
3条答案
按热度按时间qc6wkl3g1#
我会坚持使用
awesome-typescript-loader
。它有一些性能选项可以启用:缓存选项和仅转译选项:这两个版本在编译时间上都有显著的改进。
nimxete22#
现在有an official wiki建议最佳实践和解决编译器性能问题的方法。它很长,所以有很多信息可以帮助。下面是许多建议之一:
一个月一个月
您可以使用
--extendedDiagnostics
运行TypeScript,以获得编译器在何处花费时间的打印输出。请注意,
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 time
或I/O Read time
是否看起来相当高?请确保您的include
/exclude
设置配置正确。printTime
为高,则使用emitDeclarationOnly
运行。cwtwac6a3#
请分享你的
tsconfig.json
。很可能你把noEmitOnError
设置为true
,这意味着编译器在发出之前 * 被迫对整个代码库进行类型检查 *。请将其设置为false。