Definitelytyped: [@types/styled-components] 컴파일러의 성능 문제

이것은 typescript 3.3에서도 발생합니까?

나는 같은 문제를 경험했다

패키지.json

devDependency

"@babel/core": "^7.4.0",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-async-to-generator": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"babel-jest": "^24.5.0",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.5.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"react-svg-loader": "^2.1.0",
"regenerator-runtime": "^0.13.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"ts-loader": "^5.3.3",
"typescript-tslint-plugin": "^0.3.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"

의존

"@babel/polyfill": "^7.4.0",
"@loadable/component": "^5.7.0",
"@types/loadable__component": "^5.6.0",
"@types/react": "^16.8.10",
"@types/react-dom": "^16.8.3",
"@types/react-router-dom": "^4.3.1",
"@types/styled-components": "4.1.5",
"axios": "^0.18.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"styled-components": "^4.2.0",
"styled-normalize": "^8.0.6",
"typescript": "^3.4.1"

내 문제는 webpack 및 webpack-dev-server가 @types/styled-components를 구문 분석할 수 없는 것처럼 보입니다. styled-component만 사용하면 문제가 없었기 때문입니다. @types/ styled-components @

@voliva 문제를 보기 전에 cpu 리소스를 100% 사용하기 때문에 webpack의 무한 루프 문제를 발견했습니다.

@types/styled-components 버전을 4.1.5로 변경한 후 모든 것이 정상인 것처럼 보입니다.

@eps1lon : 아니요, typescript 3.3은 괜찮습니다. 특히, 문제가 릴리스 3.4.0-dev.20190226 에서 시작된 것 같습니다.

@voliva 의 seed repo를 사용하여 @types/styled-components 릴리스 4.1.1에 추가된 OmitU 의 재귀 사용에 대한 문제를 정확히 지적했다고 생각합니다. 정의 는 다음과 같습니다.

type OmitU<T, K extends keyof T> = T extends any ? PickU<T, Exclude<keyof T, K>> : never;

다음은 OmitU 가 index.d.ts 에서 사용되는 두 곳입니다.

WithOptionalTheme 정의

type WithOptionalTheme<P extends { theme?: T }, T> = OmitU<P, "theme"> & {
    theme?: T;
};

WithOptionalTheme 사용법 ( StyledComponentProps 정의에서)

WithOptionalTheme<
    OmitU<
        ReactDefaultizedProps<
            C,
            React.ComponentPropsWithRef<C>
        > & O,
        A
    > & Partial<PickU<React.ComponentPropsWithRef<C> & O, A>>,
    T
>

다른 OmitU 에 대한 통합 배포 OmitU 매핑에 대한 무언가가 컴파일러를 트립하는 것 같습니다. 이러한 인스턴스 중 하나 또는 둘 모두가 공용체를 통해 배포되지 않는 일반 Omit 로 대체되면 컴파일 시간이 typescript 3.4.1에서 합리적인 10초 정도로 단축됩니다.

( ReactDefaultizedProps 유형 은 PickU 도 참조하므로 아래 표의 두 번째 행에서 특히 긴 실행 시간을 설명하는 데 도움이 될 수 있습니다.)

이를 테스트하기 위해 배포된 OmitU 중 하나 또는 둘 다를 다음 중 하나로 교체했습니다.

type OmitPickU<T, K extends keyof T> = PickU<T, Exclude<keyof T, K>>;
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

다음은 typescript 3.4.1 , 3.4.0-dev.2019 0226 및 직전 릴리스인 3.4.0-dev.2019 0223 에 대해 실행된 time yarn tsc .

| WithOptionalTheme 정의 | WithOptionalTheme 사용량 | 타이프스크립트 3.4.1 | 타이프스크립트 3.4.0-dev.20190226 | 타이프스크립트 3.4.0-dev.20190223 |
| --- | --- | --- | --- | --- |
| OmitU | OmitU | 1m28.984초 | 0m55.853s | 0m6.031s |
| OmitU | OmitPickU | 2m49.492초 | 1m49.457초 | 0m5.961초 |
| OmitPickU | OmitU | 1m10.313초 | 0m35.278s | 0m6.125초 |
| OmitPickU | OmitPickU | 0m10.501초 | 0m6.947s | 0m6.055s |
| OmitU | Omit | 0m9.611s | 0m6.781s | 0m6.102s |
| Omit | OmitU | 0m10.471초 | 0m7.451s | ...등 |
| OmitPickU | Omit | 0m9.654초 | 0m6.796s | |
| Omit | OmitPickU | 0m8.990초 | 0m6.485초 | |
| Omit | Omit | 0m9.730초 | 0m6.815s | |

typescript 3.3.3 및 3.3.4000의 실행 시간은 3.4.0-dev.20190223과 일치하며 전체적으로 대략 6초입니다.

솔루션을 제안할 만큼 스타일이 지정된 구성 요소에 익숙하지 않지만 이 데이터가 도움이 되기를 바랍니다!

동일한 문제가 있음을 확인할 수 있습니다. @types/styled-components를 4.1.5로 다운그레이드하는 것도 저에게 효과적이었습니다. 저는 타이프스크립트 3.4.1을 사용 중입니다.

@michsa 나는 약간의 감소를 기대했지만 10x는 아닙니다. 이것이 typescript 3.4에서 도입되었으므로 typescript repo에서도 문제를 열 ​​수 있습니까? typescript에서 수정해야 하는 회귀인 경우 버그 수정을 되돌리지 않도록 하고 싶습니다.

죄송합니다. 처음에는 typescript의 github에서 검색하지 않았습니다. 현재 조사 중인 이 문제를 찾았습니다. https://github.com/Microsoft/TypeScript/issues/30663

@weswigham @RyanCavanaugh 3.4에서 성능 문제가 없는 스타일이 지정된 구성 요소 유형으로 되돌리기를 신속하게 게시하는 방법을 조사해 주 시겠습니까 ?

VS Code 1.33 릴리스에서는 많은 js 사용자가 자동 ​​유형 획득을 통해 버그가 있는 유형을 다운로드하게 될 것입니다. 이런 일이 발생하면 나쁜 상태에서 벗어나려면 자동 유형 획득 캐시를 지우거나 고정 @types/styled-components 설치해야 한다고 생각합니다. 둘 다 js 사용자에게 좋은 경험이 아닙니다. 성능이 좋지 않은 타이핑이 최신 게시된 버전일수록 더 많은 사용자가 영향을 받게 됩니다(이는 사용자에게 좋지 않은 경험이고 우리에게도 많은 추가 작업이 필요함)

이것은 여전히 ​​@types/styled-components 4.1.19 및 TS 3.6.3의 문제인 것 같습니다. 2018 i7 macbook pro 15에서 TS 완료 및 오류 강조 표시가 5-10초 이상 소요됩니다. 추가 조사가 필요합니다.

음, OP는 90년대 컴파일(이전 스타일 구성 요소 버전에서 시간이 9배 증가)에 대해 이야기하고 있습니다. TS의 이후 버전에는 완화 기능이 있고 스타일이 지정된 구성 요소의 이후 버전은 성능이 그다지 좋지 않도록 단순화되었기 때문입니다. 문제, 5-10s는 아마도 귀하의 프로젝트와 deps가 정상적으로 작동하는 것일 수 있습니다.

내가하지 희망! 과거가 아니었을 때 지금은 답답할 정도로 느립니다. 더 자세히 살펴보고 이 문제와 관련된 것으로 보이면 여기에 다시 보고하겠습니다.

@types/styled-components를 추가하자마자 내 VSCde를 사용할 수 없습니다(t 오류는 즉시가 아니라 몇 초 후에 나타나고 사라집니다).

저는 TS 3.6.4 및 유형 4.1.20을 사용하고 있습니다.

@sregg 는 @types/styled-components 에서 완화를 되돌린 이 PR을 비난합니다. https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323

(그리고 로컬에서 문제를 해결하려면 v 4.1.19 로 롤백)

@sregg go @types/styled-components 완화를 되돌린 이 PR을 비난합니다. #39323

@typescript-bot은 성능 메트릭을 수집하여 "[PR]이 컴파일 시간이나 편집기 응답성에 부정적인 영향을 미칠 수 있는지 여부를 측정"합니다. PR 39323에서 @typescript-bot은 "별로 변한 것은 없는 것 같습니다." 라고 결론지었습니다

@sregg , @typescript-bot의 기존 메트릭이 관찰한 편집기 성능 문제를 강조 표시하지 못하는 이유를 생각할 수 있습니까?

(사이드바: "이 PR을 비난하세요." 는 건설적인 제안이 아닙니다, @weswigham. 건설적이어야 합니다.)

다음은 몇 가지 추가 컨텍스트입니다.

@sregg 는 TypeScript 3.6.4를 사용하는 동안 성능 저하를 보고했습니다: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34391#issuecomment -548701239

그러나 https://github.com/microsoft/TypeScript/issues/30663#issuecomment -507406245에 있는 @weswigham의 답변에서 저는 TypeScript 버전 ≥3.5가 더 이상 https://github.com/DefinitelyTyped와 같은 성능 저하를 초래하지 않는다는 것을 이해했습니다. 방지하기 위해

그래서 그 이해를 바탕으로 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323 을 통해 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/34499 를 되돌리기로 했습니다

봇의 성능 메트릭은 테스트 내용을 기반으로 하며 불행히도 스타일이 지정된 구성 요소 테스트는 크기와 (복잡한) 사용량 면에서 실제 앱과 상당히 다릅니다. 가지고 있는 것으로 최선을 다하고 있지만 항상 _모든_ 성능 문제를 찾지는 않습니다.

(사이드바: "git" 의미의 "blame" - 기분을 상하게 하지 마세요~)

그것은 의미가 있습니다, 감사합니다 @weswigham!

테스트에서 이 성능 회귀를 포착할 수 있을 때까지 최선의 조치는 PR https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323 을 되돌리는 것이므로 PR https://github.com을 열었습니다.

다음 주에는 공유된 보고서(예: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323#issuecomment-549015652)를 기반으로 테스트를 추가할 예정입니다. 작동하면 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323 과 유사한 다른 솔루션을 사전에 평가할 수

@smockle 최신 버전(4.4.2)을 실행해

UPD: sc 타이핑 v5.0.1과 동일

@sregg
저도 요!!!

내 VSCode(*실제로 TS-SERVER)가 이전보다 느립니다. styled-components를 사용한 후.
"@types/styled-components": "^5.1.0", "styled-components": "^5.1.1" "typescript": "^3.9.5"

TS를 3.9.X에서 3.8.3으로 다운그레이드한 후 성능이 다시 정상으로 돌아갔습니다. "@types/styled-components": "^5.1.0" 및 "styled-components": "^5.1.1" .

@joaopaulobdac 에게 감사

그럼 새로운 이슈를 만들어 볼까요? 업그레이드하지 않는 것은 단기적인 해결책일 뿐입니다.

최신 2020년 6월(버전 1.47) 및 "@types/styled-components": "^5.1.1"에서 동일한 문제가 발생합니다.

3.9.3 styled-components 유형 버전 5.1.1 과 함께 typescript 3.9.3 사용하면 VSCode TS 서버 성능이 완전히 저하됩니다. 절대적으로 사용할 수 없습니다. D typescript 3.8.3 다운그레이드하면 성능이 적어도 일부 복원되는 것처럼 보이지만 실제로는 좀 더 주의를 기울여야 합니다.

@RyanCavanaugh 재

동일한 문제가 발생한 것을 확인할 수 있습니다.

다시 열 가치가있는 여기도 마찬가지입니다!

내 VSCode가 질식하기 시작했음을 확인합니다.

나는 결국 styled-components를 제거했지만, 어쨌든 react-native에 많은 이점을 제공하지 못했습니다. 스프레드 연산자와 인라인 스타일이 있는 평범한 오래된 JS 객체는 TS 성능 문제 없이 훌륭하게 작동합니다. 결국 IMO는 적어도 RN에서 스타일이 지정된 구성 요소보다 코드를 읽기가 더 쉽습니다.

VSCode로 코딩할 때 CSS-in-JS 천국에서 지옥을 경험하고 있습니다.

@AndrewMorsillo @hilezir 저는 TS 4를 사용하여 styled-components에서 styletron으로 전환했습니다. styletron의 성능은 vscode와 브라우저 모두에서 훨씬 더 좋습니다. 그러나 나는 React Native의 styletron에 대해 모릅니다.

@AndrewMorsillo @hilezir 저는 TS 4를 사용하여 styled-components에서 styletron으로 전환했습니다. styletron의 성능은 vscode와 브라우저 모두에서 훨씬 더 좋습니다. 그러나 나는 React Native의 styletron에 대해 모릅니다.

우리가 이 변경을 하기에는 너무 늦었지만 styletron에 대해 들어본 적이 없으며 스타일이 지정된 구성 요소보다 모양이 더 마음에 듭니다.

새로운 문제가 있습니까, 아니면 이 문제가 다시 열릴 것입니까? @types/styled-components 5.1.2 및 TS 3.9.7에는 여전히 큰 성능 문제가 있습니다.

VSCode 속도를 높이는 방법을 알아내려고 하루 종일 보냈고 _마침내_ @types/styled-components 알아냈습니다. 이것이 설치되면 편집기에 아무 것도 입력하지 않으면 tsserver.js (VSCode Process Explorer를 통해 표시됨)이 >100% CPU 스파이크가 발생하고 메모리가 무한대로 커집니다. @types/styled-components 제거하기

TypeScript 4.0.3과 @types/styled-components 5.1.3을 사용하고 있었습니다.

누군가 스타일 구성 요소에 대한 더 나은 대안을 제안할 수 있습니까? 내 vscode가 완전히 멈춥니다.

누군가 스타일 구성 요소에 대한 더 나은 대안을 제안할 수 있습니까? 내 vscode가 완전히 멈춥니다.

이 시도?

1. https://material-ui.com/styles/basics/#material -ui-styles

2. https://emotion.sh/docs/styled#styling - 요소 및 구성 요소

실제로 styled-components 유형의 성능을 개선하기 위해 열린 풀 요청이 있습니다: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46510.