Definitelytyped: [@ types / styled-components]コンパイラのパフォーマンスの問題

これはtypescript3.3でも起こりますか？

私は同じ問題を経験しました

package.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を解析できないように見えることです。 スタイル付きコンポーネントだけを使用する場合は問題がなかったためです。 @ types / [email protected]を同時に使用すると、常に発生します。

@volivaの問題を見る前に、cpuリソースを100％使用しているため、webpackの無限ループの問題を見つけました。

@ types / styled-compoentsバージョンを4.1.5に変更した後、すべてが正常であるように見えます。

@ eps1lon ：いいえ、typescript3.3で問題ありません。 具体的には、問題はリリース3.4.0-dev.20190226で始まるよう

@volivaのシードリポジトリを使用して、@ 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も参照することに注意してください。これは、下の表の2行目で特に長い実行時間を説明するのに役立つ場合があります。）

これをテストするために、配布された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>>;

ここでtime yarn tsc typescriptです3.4.1、3.4.0-dev.2019 0226、および直前のリリースに対して実行し、3.4.0-dev.2019 0223：

| WithOptionalTheme定義| WithOptionalTheme使用法| typescript 3.4.1 | typescript 3.4.0-dev.20190226 | typescript 3.4.0-dev.20190223 |
| --- | --- | --- | --- | --- |
| OmitU | OmitU | 1分28秒984秒| 0分55.853秒| 0分6.031秒|
| OmitU | OmitPickU | 2分49秒492秒| 1分49秒457秒| 0分5.961秒|
| OmitPickU | OmitU | 1分10秒313秒| 0分35秒278秒| 0分6.125秒|
| OmitPickU | OmitPickU | 0分10秒501秒| 0分6.947秒| 0分6.055秒|
| OmitU | Omit | 0分9.611秒| 0分6.781秒| 0分6.102秒|
| Omit | OmitU | 0分10秒471秒| 0分7.451秒| ...など|
| OmitPickU | Omit | 0分9.654秒| 0分6.796秒| |
| Omit | OmitPickU | 0分8.990秒| 0分6.485秒| |
| Omit | Omit | 0分9.730秒| 0分6.815秒| |

typescript 3.3.3および3.3.4000の実行時間は、3.4.0-dev.20190223と一致しています。全体で約6秒です。

私は解決策を提案するためのスタイル付きコンポーネントに精通していませんが、このデータが役立つことを願っています！

同じ問題があることを確認できます。 @ types / styled-componentsを4.1.5にダウングレードすることも、私にとってはうまくいきました。 私はtypescript3.4.1を使用しています

@michsa私はある程度の削減を期待していましたが、10倍ではありませんでした。 これはtypescript3.4で導入されたので、typescriptリポジトリでも問題を開くことができますか？ typescriptで修正する必要があるリグレッションの場合は、バグ修正を元に戻さないようにしたいと思います。

申し訳ありませんが、最初はtypescriptのgithubを検索していませんでしたが、現在調査中のこの問題を見つけました： https ：

@weswigham @ RyanCavanaugh3.4でパフォーマンスの問題がないスタイル付きコンポーネントタイプへの復帰をすばやく公開することを検討してください。

VS Code 1.33リリースでは、多くのjsユーザーが自動型取得を通じてバグのある型をダウンロードするようになります。 これが発生したら、悪い状態から抜け出すために、自動型取得キャッシュをクリアするか、固定の@types/styled-componentsインストールする必要があると思います。 どちらもjsユーザーにとって良い経験ではありません。 パフォーマンスの低いタイピングが最新の公開バージョンであるほど、影響を受けるユーザーが多くなります（これは、ユーザーにとっては悪い経験であり、私たちにとっても多くの余分な作業です）

これは、@ types / styled-components4.1.19およびTS3.6.3の問題である可能性があります。 TSの完了とエラーの強調表示は2018i7 macbook pro 15で5〜10秒以上かかります。さらに調査を行う必要があります。

えーと、OPは90年代のコンパイル（以前のスタイルのコンポーネントバージョンから9倍の時間のジャンプ）について話しています。TSの新しいバージョンには緩和策があり、スタイルのあるコンポーネントの新しいバージョンはパフォーマンスがあまりないように簡略化されているためです。問題、5-10sはおそらくあなたのプロジェクトであり、depsは正常に動作しています。

私はそうしないことを望みます！ 過去にはなかったのに、今はイライラするほど遅いです。 この問題に関連していると思われる場合は、さらに詳しく調べて、ここに報告します。

@ types / styled-componentsを追加するとすぐに、VSCdeは使用できなくなります（tsエラーは、瞬時ではなく数秒後に表示および非表示になります）。

TS3.6.4とタイプ4.1.20を使用しています。

@sreggは、 @types/styled-componentsの緩和策を元に戻したこのPRを非難します： //github.com/DefinitelyTyped/DefinitelyTyped/pull/39323

（そして、v 4.1.19にロールバックして、ローカルで問題を修正します）

@sreggは、 @types/styled-componentsの緩和策を元に戻したこのPRを非難します：＃39323

@ typescript-botは、パフォーマンスメトリックを収集して、「[PR]がコンパイル時間またはエディターの応答性に悪影響を与える可能性があるかどうかを測定します」。 PR 39323で、@ typescript-botは「何もあまり変わっていないようです」と結論付け

@ sregg 、@ typescript-botの既存のメトリックが、観察したエディターのパフォーマンスの問題を強調できない理由を考えられますか？

（サイドバー： 「このPRを非難する」は建設的な提案ではありません、@ weswigham。建設的にしてください。）

ここにいくつかの追加のコンテキストがあります：

@sreggは、TypeScript 3.6.4の使用中にパフォーマンスがます： //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」の意味での「非難」-怒らないでください〜）

それは理にかなっています、@ weswighamに感謝します！

テストでこのパフォーマンスの低下を見つけることができるまで、最善の行動はPR https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323を元に戻すことだと思うので、PRhttps 。 / DefinitelyTyped / DefinitelyTyped / pull / 40095これを行います。

来週は、共有されたレポート（https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323#issuecomment-549015652など）に基づいてテストを追加する予定です。 それが機能するようになったら、 https：//github.com/DefinitelyTyped/DefinitelyTyped/pull/39323に類似した他のソリューションを（事前に）評価でき

@smockle最新バージョン（4.4.2）を実行してみましたか？ パフォーマンスのバグが再び戻ってきたようです。4.1.19にダウングレードすると役立ちます。

UPD：scタイピングv5.0.1と同じ

@sregg
私も！！！

私のVSCode（*実際にはTS-SERVER）は以前よりも遅くなっています。 スタイル付きコンポーネントを使用した後。
"@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に感謝しStyledComponentsが原因であることに気付くのに非常に長い時間がかかりました。 あなたの修正は私のために行われました。 typescriptの3.9x機能を使用していないようだったので、かなり苦痛のないスイッチでした！

では、新しい問題を作成する必要がありますか？ アップグレードしないことは、短期的な解決策にすぎません。

最新の2020年6月（バージョン1.47）と「@ types / styled-components」で同じ問題が発生しています：「^ 5.1.1」

タイプスクリプト3.9.3をスタイル付きコンポーネントタイプバージョン5.1.1すると、VSCodeTSサーバーのパフォーマンスが完全に破壊されます。 絶対に使用できません：Dタイプスクリプト3.8.3ダウングレードすると、パフォーマンスの少なくとも一部が回復するようですが、これは確かにもう少し注意を払う必要があります。

@RyanCavanaughが再開しますか？

同じ問題が発生していることを確認できます。

ここでも同じです。再開する価値があります。

VSCodeがチョークし始めたことを確認します。

私は最終的にスタイル付きコンポーネントを削除しましたが、とにかく、react-nativeに大きなメリットはありませんでした。 スプレッド演算子とインラインスタイルを備えたプレーンな古いJSオブジェクトは、TSパフォーマンスの問題がなくてもうまく機能します。IMOは、少なくともRNでは、スタイル付きコンポーネントよりもコードを読みやすくなります。

VSCodeでコーディングしているときに、CSS-in-JSの避難所で地獄を経験しています。

@AndrewMorsillo @hilezir TS 4を使用して、styled-componentsから

@AndrewMorsillo @hilezir TS 4を使用して、styled-componentsから

この変更を行うには遅すぎますが、styletronのことは聞いたことがなく、スタイル付きのコンポーネントよりも外観が気に入っています。

新しい問題がありますか、それともこの問題は再開されますか？ @ types / styled-components5.1.2およびTS3.9.7には、依然として大きなパフォーマンスの問題があります。

VSCodeを高速化する方法を見つけようとして一日を過ごし、_最後に_それが@types/styled-componentsことがわかりました。 それがインストールされている場合、エディターに何かを入力するだけで、 tsserver.js （VSCode Process Explorerで表示）が100％を超えるCPUをスパイクし、メモリ内で無制限に成長します。 @types/styled-components削除するだけで、これが修正されました。

TypeScript4.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 -elements-and-components

styled-components 'タイプのパフォーマンスを向上させるために、実際にはプルリクエストが開かれています： https ：