Rollup-plugin-typescript2: TS v3.4的编译速度非常慢

创建于 2019-04-09  ·  21评论  ·  资料来源: ezolenko/rollup-plugin-typescript2

会发生什么,为什么会出错

将TS升级到v3.4.2后,编译时间很慢。 使用TS v3.3,我的项目建于约20秒钟,而使用TS v3.4,则需要约500万。

我尝试使用clean: true ,尝试添加typescript: require('typescript') ,尝试升级rollup和所有相关的插件。每次,相同的结果编译需要花费大量时间。

注意:当我直接运行tsc -p tsconfig.prod.json ,输出dist的时间不到10秒。

环境

版本号

  • 打字稿:v3.4.2
  • 汇总:v1.6.0
  • 汇总插件类型脚本2:v0.19.2

rollup.config.js

  {
    input: 'src/index.ts',
    output: [
      { file: pkg.main, format: 'cjs' },
      { file: pkg.module, format: 'es' },
    ],
    plugins: [
      external({ includeDependencies: true }),
      resolve(),
      typescript({
        tsconfig: './tsconfig.prod.json',
        rollupCommonJSResolveHack: true,
      }),
      commonjs(),
      filesize(),
    ],
  }

tsconfig.json


tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "jsx": "react",
    "esModuleInterop": true,
    "lib": ["dom", "es2017"],
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": false,
    "downlevelIteration": true
  },
  "include": ["src/**/*", "types/**/*"]
}


tsconfig.prod.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist",
    "noUnusedLocals": true,
    "sourceMap": true,
    "declaration": true
  },
  "exclude": ["src/doc", "**/stories.tsx", "**/test.tsx", "**/fixture.ts"]
}

package.json

    "rollup": "^1.6.0",
    "rollup-plugin-commonjs": "^9.2.1",
    "rollup-plugin-filesize": "^6.0.1",
    "rollup-plugin-node-resolve": "^4.0.1",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "rollup-plugin-typescript2": "^0.19.2",
    "typescript": "^3.4.2"

带有详细程度3的插件输出


输出

rpt2: typescript version: 3.4.2
rpt2: tslib version: 1.9.3
rpt2: rollup-plugin-typescript2 version: 0.19.2
rpt2: plugin options:
{
    "tsconfig": "./tsconfig.prod.json",
    "rollupCommonJSResolveHack": true,
    "clean": true,
    "verbosity": 3,
    "typescript": "version 3.4.2",
    "check": true,
    "cacheRoot": "/Users/yannpringault/git/PayFit/components/.rpt2_cache",
    "include": [
        "*.ts+(|x)",
        "**/*.ts+(|x)"
    ],
    "exclude": [
        "*.d.ts",
        "**/*.d.ts"
    ],
    "abortOnError": true,
    "useTsconfigDeclarationDir": false,
    "tsconfigOverride": {},
    "transformers": [],
    "tsconfigDefaults": {},
    "objectHashIgnoreUnknownHack": false
}
rpt2: rollup config:
{
    "chunkGroupingSize": 5000,
    "experimentalCacheExpiry": 10,
    "inlineDynamicImports": false,
    "input": "src/index.ts",
    "perf": false,
    "plugins": [
        {
            "name": "peer-deps-external"
        },
        {
            "name": "node-resolve"
        },
        {
            "name": "rpt2"
        },
        {
            "name": "commonjs"
        },
        {
            "name": "filesize"
        }
    ]
}
rpt2: built-in options overrides: {
    "noEmitHelpers": false,
    "importHelpers": true,
    "noResolve": false,
    "noEmit": false,
    "inlineSourceMap": false,
    "outDir": "/Users/yannpringault/git/PayFit/components/.rpt2_cache/placeholder",
    "moduleResolution": 2,
    "allowNonTsExtensions": true,
    "declarationDir": "/Users/yannpringault/git/PayFit/components"
}
rpt2: parsed tsconfig: {
    "options": {
        "module": 6,
        "target": 1,
        "jsx": 2,
        "esModuleInterop": true,
        "lib": [
            "lib.dom.d.ts",
            "lib.es2017.d.ts"
        ],
        "moduleResolution": 2,
        "rootDir": "/Users/yannpringault/git/PayFit/components/src",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true,
        "downlevelIteration": true,
        "outDir": "/Users/yannpringault/git/PayFit/components/.rpt2_cache/placeholder",
        "sourceMap": true,
        "declaration": true,
        "configFilePath": "/Users/yannpringault/git/PayFit/components/./tsconfig.prod.json",
        "noEmitHelpers": false,
        "importHelpers": true,
        "noResolve": false,
        "noEmit": false,
        "inlineSourceMap": false,
        "allowNonTsExtensions": true,
        "declarationDir": "/Users/yannpringault/git/PayFit/components"
    },
    "fileNames": [
        "/Users/yannpringault/git/PayFit/components/src/index.ts",
        "/Users/yannpringault/git/PayFit/components/src/components/index.ts",
        "/Users/yannpringault/git/PayFit/components/src/components/Alert/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Alert/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Avatar/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Avatar/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/AvatarGroup/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/AvatarGroup/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Badge/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Badge/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Button/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Button/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Checkbox/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Checkbox/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/CheckboxGroup/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/CheckboxGroup/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/DatePicker/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/DatePicker/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/DatePicker/Popin/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Dropdown/MenuContext.ts",
        "/Users/yannpringault/git/PayFit/components/src/components/Dropdown/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Dropdown/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Dropdown/DropdownItem/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Dropdown/DropdownItem/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Field/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Field/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Icon/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Icon/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Input/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Input/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Layout/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Legend/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Legend/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Loader/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Loader/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/ProgressBar/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/ProgressBar/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/ProgressCircle/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/ProgressCircle/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/RadioGroup/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/RadioGroup/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Select/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Select/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Steps/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Steps/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Table/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Table/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Table/components/Body.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Table/components/Cell.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Table/components/Footer.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Table/components/Header.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Table/components/HeaderCell.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Table/components/HeaderRow.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Table/components/Limit.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Table/components/Row.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/TableGroup/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/TableGroup/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Tag/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Tag/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Text/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Toggle/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Toggle/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Tooltip/index.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/Tooltip/style.tsx",
        "/Users/yannpringault/git/PayFit/components/src/components/_helpers/colors.test.ts",
        "/Users/yannpringault/git/PayFit/components/src/components/_helpers/colors.ts",
        "/Users/yannpringault/git/PayFit/components/src/components/_helpers/react.ts",
        "/Users/yannpringault/git/PayFit/components/src/components/_helpers/string.test.ts",
        "/Users/yannpringault/git/PayFit/components/src/components/_helpers/string.ts",
        "/Users/yannpringault/git/PayFit/components/src/primitives/_helpers.tsx",
        "/Users/yannpringault/git/PayFit/components/src/primitives/box.tsx",
        "/Users/yannpringault/git/PayFit/components/src/primitives/text.tsx",
        "/Users/yannpringault/git/PayFit/components/src/utils/index.ts",
        "/Users/yannpringault/git/PayFit/components/src/utils/colors/index.ts",
        "/Users/yannpringault/git/PayFit/components/src/utils/shadows/index.ts",
        "/Users/yannpringault/git/PayFit/components/src/utils/shadows/test.ts",
        "/Users/yannpringault/git/PayFit/components/src/utils/zIndex/index.ts",
        "/Users/yannpringault/git/PayFit/components/types/index.d.ts",
        "/Users/yannpringault/git/PayFit/components/types/modules.d.ts"
    ],
    "typeAcquisition": {
        "enable": false,
        "include": [],
        "exclude": []
    },
    "raw": {
        "extends": "./tsconfig.json",
        "compilerOptions": {
            "outDir": "./dist",
            "noUnusedLocals": true,
            "sourceMap": true,
            "declaration": true
        },
        "exclude": [
            "src/doc",
            "**/stories.tsx",
            "**/test.tsx",
            "**/fixture.ts"
        ],
        "compileOnSave": false,
        "include": [
            "src/**/*",
            "types/**/*"
        ]
    },
    "errors": [],
    "wildcardDirectories": {
        "/users/yannpringault/git/payfit/components/src": 1,
        "/users/yannpringault/git/payfit/components/types": 1
    },
    "compileOnSave": false,
    "configFileSpecs": {
        "includeSpecs": [
            "src/**/*",
            "types/**/*"
        ],
        "excludeSpecs": [
            "src/doc",
            "**/stories.tsx",
            "**/test.tsx",
            "**/fixture.ts"
        ],
        "validatedIncludeSpecs": [
            "src/**/*",
            "types/**/*"
        ],
        "validatedExcludeSpecs": [
            "src/doc",
            "**/stories.tsx",
            "**/test.tsx",
            "**/fixture.ts"
        ],
        "wildcardDirectories": {
            "/users/yannpringault/git/payfit/components/src": 1,
            "/users/yannpringault/git/payfit/components/types": 1
        }
    }
}
rpt2: included:
'[
    "*.ts+(|x)",
    "**/*.ts+(|x)"
]'
rpt2: excluded:
'[
    "*.d.ts",
    "**/*.d.ts"
]'

blocked help wanted

最有用的评论

@ezolenko对不起,您的答复很晚!

我放入clean: true并将rtp2升级到0.20.1 。 结果如下:

TS 3.3.3333

build -> 18s
tsc   -> 14.39s

TS 3.3.4000

build -> 17.3s
tsc   -> 14.39s

TS 3.4.1

build -> 5m 25.1s
tsc   -> 21.26s

TS 3.4.3

build -> 5m 52.7s
tsc   -> 21.57s

此外,TS回购中存在一个似乎与此相关的问题,但我将@types/styled-components固定到v4.1.4所以它不涵盖我的情况。

让我知道您是否需要更多信息。


为了好玩,我还尝试了最新的3.5构建:

TS 3.5.0-dev.20190413

build -> 1m 23.5s
tsc   -> 18.84s

所有21条评论

我有同样的问题。 当TS从3.3.4000变为3.4.3时,从24s345s 3.4.3

我尝试重现,起初我发现速度变慢,但是使用clean: true并在打字稿版本之间来回几次,我现在看不到干净版本的区别...

您能否设置clean: true ,将rtp2更新为最新版本(0.20.1或master),并在ts 3.3和ts 3.4上连续几次对构建进行计时?

@ezolenko对不起,您的答复很晚!

我放入clean: true并将rtp2升级到0.20.1 。 结果如下:

TS 3.3.3333

build -> 18s
tsc   -> 14.39s

TS 3.3.4000

build -> 17.3s
tsc   -> 14.39s

TS 3.4.1

build -> 5m 25.1s
tsc   -> 21.26s

TS 3.4.3

build -> 5m 52.7s
tsc   -> 21.57s

此外,TS回购中存在一个似乎与此相关的问题,但我将@types/styled-components固定到v4.1.4所以它不涵盖我的情况。

让我知道您是否需要更多信息。


为了好玩,我还尝试了最新的3.5构建:

TS 3.5.0-dev.20190413

build -> 1m 23.5s
tsc   -> 18.84s

您发现的问题(https://github.com/Microsoft/TypeScript/issues/30663)和3.5-dev对您的速度提高了5倍的事实使我认为他们使用LanguageServer API做了一些事情。 这是rpt2用作编译的一部分的API,以及IDE中使用的类型检查器(这就是WebStorm超时等的原因)。

您的项目可能在其他地方使用了受影响的类型结构,这就是为什么固定styled-components无济于事。 这就是为什么例如在构建rpt2本身时我看不到大的减速。

我想我们将等待最终的3.5版本。

顺便说一句,尝试使用check: false选项进行构建

有没有人确认这在3.5版本中是否已解决?

@ tomasro27不适合我,也不适合6( 3.6.0-dev.20190621 )。 似乎<3.3仍然是最快的。

看起来3.5有点快,但还是会更好

对此有任何更新吗? 似乎仍被TS阻止?

是的,我认为从这一点上什么都不能做。 欢迎任何人尝试:)

+1
3.5.3对我们来说也很慢

check: false运作良好。

但是问题是它不会产生任何编译错误(如果使用vscode,它将提示错误😄)。

至少在CSS(使用JS)上工作时,我可以做check: false 。 👍

@ezolenko您知道什么确切的打字稿api调用会导致构建速度变慢吗? :)

@ZainlessBrombie不,我所知道的一切都在此线程中。 链接的打字稿问题可能是相关的,但不是直接原因(因为他们说应该在3.5+中修复,显然不是)。

如果项目中的构建速度很慢,请检查ts 3.3是否实际上更快(如果可能的话),可能不是问题是打字稿,而是其他原因。

好的,谢谢。 如果我能解决这个问题,那可能就是一堵墙了,我愿意to撞我的头:)

编辑:仅出现导入样式化的组件的文件出现此问题
此外,打字稿文档也很糟糕

分析打字稿揭示了问题的根源是样式化组件具有的这些非常大的联合。 解决此问题的唯一位置是打字稿,除非有一种方法可以使打字稿缓存模块分辨率(应该这样做)。

我实际上不在nodeModuleNameResolver调用中使用模块解析缓存: https :

不确定这是否会使ts使用默认值之一或根本不使用默认值。

是的,我看到了TODO :)
不幸的是,调试使用时的模块分辨率缓存表明,由于某种原因,它缓存了bass,但是没有样式化的组件。 它为那些通过内部缓存...

我目前正在将我的库的C#代码库迁移到TypeScript,并且正在使用Rollup进行捆绑。 (之前我有一个自定义C#> Haxe> JavaScript工具链)。 不幸的是,我的新TypeScript代码库的编译速度也使我倍感痛苦,这使开发工作非常困难。

如果可能的话,我很乐意提供一些性能分析报告。

以下是对我的项目的一些见解:

通常,我使用ttypescript进行一些AST转换。
代码行数:〜50000

汇总-c rollup.config.ts :〜9-10sec
汇总-c rollup.config.ts -w(初始编译) :〜9-10秒
rollup -c rollup.config.ts -w(在1个TS文件中添加1个警报)
rollup -c rollup.config.ts -w(再次删除警报)

tsc --version :3.8.3
tsc --project tsconfig.json :约6-7秒
tsc --project tsconfig.json -w(初始编译) :〜6-7sec
tsc --project tsconfig.json -w(在1个TS文件中添加1个警报) :〜0.1-0.2sec
tsc --project tsconfig.json -w(再次删除警报) :〜0.1-0.2sec

ttsc --version :3.8.3
ttsc --project tsconfig.json :约7-8秒
ttsc --project tsconfig.json -w(初始编译) :〜6-7sec
ttsc --project tsconfig.json -w(在1个TS文件中添加1个警报) :〜0.1-0.2sec
ttsc --project tsconfig.json -w(再次删除警报) :〜0.1-0.2sec

增量构建在tsconfig中处于活动状态。

在我看来,增量/监视构建所花的时间是完整构建所用时间的两倍,这非常不寻常。

ti进行测试时,在我的环境中事情似乎变得发疯。 我使用业力和此Typescript插件进行汇总。 如您所知:每个测试套件都有自己的捆绑包,这意味着上述捆绑的数量越来越多。 随着时间的推移,内存增长到> 2GB; 即使几分钟后,测试运行实际上仍未开始。 这发生在每个单个npm run test

一旦达到测试代的“ Generating bundle for ...”区域,我就会看到高得离谱的数字:
包含1个简单的解析器类测试的File01.test.ts需要15秒
包含11个XML解析测试的File02.test.ts需要2.5分钟
5分钟后File03.test.ts甚至没有完成。

我不知道这个问题可能在哪里引起,是否真的是由于汇总的打字稿模块引起的,但这似乎是与我有关的最有可能的问题。

由于我的仓库很大而且很复杂,所以我没有在配置上分享更多细节。 如果有人可以指导我如何收集它们,我很乐意提供日志/分析结果等。我将尝试建立一个新的简单的独立存储库,以反映我的总体项目情况,但我不能保证问题会一直存在。

@ Danielku15您的主要问题是您正在从C#而不是从C ++进行迁移:)

此插件未明确使用Typescript自己的增量版本(启动时不存在)。

您可以尝试@rollup/plugin-typescript (https://github.com/rollup/plugins/tree/master/packages/typescript),他们使用的是我认为的不同方法,并且可能会给您不同的数字。

另一种选择是在汇总链之外进行Typescript编译(作为npm中的预构建步骤或其他步骤),并将生成的js改为汇总。 监视构建将很有趣,尽管我认为您可以在监视模式下启动tsc和汇总,并且如果项目配置正确,它将可以正常工作。

您的主要问题是您是从C#而不是从C ++迁移

脱主题:我不确定我是否要将C ++框架/库迁移到TypeScript。 取决于宏和模板的使用(C ++开发人员会喜欢的),在迁移过程中事情可能会变得异常😅幸运的是,我的C#代码库始终都是定制的,允许交叉编译到其他语言的样式,因此从代码结构中得出的结果是完全可以接受的。 我只需要弄清楚如何组织模块来减少一些开销。 😊

此插件未明确使用Typescript自己的增量版本(启动时不存在)。

这很有趣,这个插件是否具有一些自己的自定义“增量”构建策略? 这可以解释为什么在使用watch时,完整版本可能花费比源代码更改更长的时间。 Typescript编译或多或少是稳定的,不幸的是该插件还不能利用增量更新,但是我认为在Type脚本编译器中花费的时间是稳定的。 但是花费在汇总上的时间似乎有所不同。 只有这向我说明,干净的构建比监视模式下的代码更改要快。

您可以尝试@ rollup / plugin-typescript ...

感谢您的提示,我将尝试一下它是否有所改善。

另一个选择是在汇总链之外进行打字稿编译

我在一开始就进行了这样的设置,但是在开发过程中将其“中”了一半就放弃了。 如果我可以使用“观察”这两个工具分别建立一条管道,我将再次尝试一下。 👍

更新1:现在,我可以通过调用汇总汇总的tsc来设置我的整个编译和测试环境。 我需要制作自己的汇总插件来正确解析tsconfig路径,但此后它可以正常工作。

干净的编译:9秒,观看编译:0.5-1秒,并且还通过Karma + Rollup运行测试(编译需要花费一点时间,因为它会为每个测试套件生成一个包)。

此页面是否有帮助?
0 / 5 - 0 等级