Definitelytyped: [@types/styled-components] Masalah kinerja pada kompiler

Apakah ini juga terjadi dengan TypeScript 3.3?

Saya mengalami masalah yang sama

package.json

devKetergantungan

"@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"

ketergantungan

"@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"

Masalah saya adalah sepertinya webpack & webpack-dev-server tidak dapat mengurai @types/styled-components. Karena saat menggunakan komponen yang ditata saja, tidak ada masalah. Itu selalu terjadi ketika menggunakan @types/ [email protected] secara bersamaan.

Sebelum melihat masalah @voliva , saya menemukan masalah loop tak terbatas dari webpack karena menggunakan sumber daya cpu 100%.

Setelah mengubah versi @types/styled-compoents menjadi 4.1.5, sepertinya semuanya baik-baik saja.

@eps1lon : Tidak, 3.4.0-dev.20190226 .

Menggunakan repo benih @voliva , saya yakin saya telah menunjukkan masalah dengan penggunaan rekursif OmitU , ditambahkan dalam @types/styled-components rilis 4.1.1. Ini dia definisinya :

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

Dan inilah kedua tempat OmitU digunakan dalam index.d.ts :

Definisi WithOptionalTheme

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

Penggunaan WithOptionalTheme (dalam definisi StyledComponentProps )

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

Sesuatu tentang pemetaan OmitU didistribusikan serikat di atas OmitU tampaknya membuat kompiler tersandung. Jika salah satu atau kedua instans ini diganti dengan Omit reguler yang tidak didistribusikan melalui union, waktu kompilasi dikurangi menjadi sekitar 10 detik yang wajar di bawah TypeScript 3.4.1.

(Perhatikan bahwa tipe ReactDefaultizedProps juga merujuk PickU , yang dapat membantu menjelaskan waktu berjalan yang sangat lama di baris kedua tabel di bawah ini.)

Untuk menguji ini, saya menukar salah satu atau kedua dari OmitU didistribusikan dengan salah satu dari berikut ini:

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>>;

Berikut adalah time yarn tsc dijalankan terhadap TypeScript 3.4.1 , 3.4.0-dev.2019 0226 , dan rilis sebelumnya langsung, 3.4.0-dev.2019 0223 :

| WithOptionalTheme definisi | WithOptionalTheme penggunaan | naskah 3.4.1 | TypeScript 3.4.0-dev.20190226 | TypeScript 3.4.0-dev.20190223 |
| --- | --- | --- | --- | --- |
| OmitU | OmitU | 1m28.984s | 0m55.853s | 0m6.031s |
| OmitU | OmitPickU | 2m49.492s | 1m49.457s | 0m5.961s |
| OmitPickU | OmitU | 1m10.313s | 0m35.278s | 0m6.125s |
| OmitPickU | OmitPickU | 0m10.501s | 0m6.947s | 0m6.055s |
| OmitU | Omit | 0m9.611s | 0m6.781s | 0m6.102s |
| Omit | OmitU | 0m10.471s | 0m7.451s | ...dll |
| OmitPickU | Omit | 0m9.654s | 0m6.796s | |
| Omit | OmitPickU | 0m8.990s | 0m6.485s | |
| Omit | Omit | 0m9.730s | 0m6.815s | |

Waktu berjalan untuk TypeScript 3.3.3 dan 3.3.4000 konsisten dengan 3.4.0-dev.20190223 -- kira-kira 6 detik.

Saya tidak cukup akrab dengan komponen gaya untuk mengusulkan solusi, tetapi saya harap data ini membantu!

Saya dapat mengonfirmasi bahwa saya memiliki masalah yang sama. Menurunkan @types/styled-components ke 4.1.5 juga berhasil untuk saya. Saya menggunakan TypeScript 3.4.1

@michsa Saya mengharapkan pengurangan tetapi tidak 10x. Karena ini diperkenalkan di TypeScript 3.4, bisakah Anda membuka masalah di repo TypeScript juga? Saya ingin memastikan kami tidak mengembalikan perbaikan bug jika itu adalah regresi yang harus diperbaiki dalam TypeScript.

Maaf awalnya saya tidak mencari di github TypeScript, saya menemukan masalah ini yang sedang mereka selidiki: https://github.com/Microsoft/TypeScript/issues/30663

@weswigham @RyanCavanaugh Bisakah kita melihat dengan cepat menerbitkan kembali ke tipe komponen gaya yang tidak memiliki masalah kinerja pada 3.4.

Dengan rilis VS Code 1.33, banyak pengguna js akan mengunduh tipe yang disadap melalui akuisisi tipe otomatis. Setelah ini terjadi, untuk keluar dari keadaan buruk, saya yakin Anda harus menghapus cache akuisisi tipe otomatis atau menginstal @types/styled-components . Juga bukan pengalaman yang baik untuk pengguna js. Semakin lama pengetikan berkinerja buruk adalah versi terbaru yang diterbitkan, semakin banyak pengguna yang akan terpengaruh (yang merupakan pengalaman buruk bagi mereka dan banyak pekerjaan ekstra untuk kami juga)

Ini sepertinya masih menjadi masalah dengan @types/styled-components 4.1.19 dan TS 3.6.3. Penyelesaian TS dan penyorotan kesalahan membutuhkan waktu 5-10+ detik pada 2018 i7 macbook pro 15. Perlu melakukan penyelidikan lebih lanjut.

Erm, OP berbicara tentang kompilasi 90-an (9x lompatan waktu dari versi komponen gaya sebelumnya), mengingat kedua versi TS yang lebih baru memiliki mitigasi dan versi komponen gaya yang lebih baru disederhanakan untuk tidak memiliki begitu banyak kinerja masalah, 5-10s mungkin hanya proyek Anda dan deps berperilaku normal.

Saya harap tidak! Ini sangat lambat sekarang ketika tidak di masa lalu. Saya akan memeriksanya lebih lanjut dan melaporkan kembali ke sini jika tampaknya terkait dengan masalah ini.

VSCde saya tidak dapat digunakan (kesalahan ts muncul dan menghilang setelah beberapa detik, bukan langsung) segera setelah saya menambahkan @types/styled-components.

Saya menggunakan TS 3.6.4 dan tipe 4.1.20.

@sregg salahkan PR ini yang mengembalikan mitigasi di @types/styled-components : https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323

(Dan putar kembali ke v 4.1.19 untuk memperbaiki masalah secara lokal)

@sregg salahkan PR ini yang mengembalikan mitigasi di @types/styled-components : #39323

@typescript-bot mengumpulkan metrik kinerja untuk "mengukur apakah [PR] dapat berdampak negatif pada waktu kompilasi atau respons editor". Di PR 39323, @typescript-bot menyimpulkan, "Sepertinya tidak ada yang terlalu banyak berubah." .

@sregg , dapatkah Anda memikirkan alasan mengapa metrik @typescript-bot yang ada gagal menyoroti masalah kinerja editor yang Anda amati?

(Bilah samping: "salahkan PR ini" bukan saran yang membangun, @weswigham. Harap konstruktif.)

Berikut beberapa konteks tambahan:

@sregg telah melaporkan kinerja yang buruk saat menggunakan TypeScript 3.6.4: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34391#issuecomment -548701239

Tetapi dari balasan @ weswigham di https://github.com/microsoft/TypeScript/issues/30663#issuecomment -507406245 , saya mengerti bahwa versi TypeScript 3.5 tidak akan lagi dikenakan penalti kinerja yang https://github.com/DefinitelyTyped /DefinitelyTyped/pull/34499 digabungkan untuk menghindari.

Jadi, dengan pemahaman itu, saya memilih untuk (kurang lebih) mengembalikan https://github.com/DefinitelyTyped/DefinitelyTyped/pull/34499 , melalui https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323.

Metrik kinerja bot didasarkan pada apa yang ada dalam pengujian dan, sayangnya, pengujian komponen bergaya cukup jauh dari aplikasi nyata, baik dalam ukuran maupun penggunaan (kompleks). Itu melakukan yang terbaik dengan apa yang dimilikinya, namun tidak selalu menemukan _setiap_ masalah kinerja.

(Bilah sisi: "salahkan" dalam arti "git" - tolong jangan tersinggung~)

Itu masuk akal, terima kasih @weswigham!

Sampai kami dapat menangkap regresi kinerja ini dalam pengujian, saya pikir tindakan terbaik adalah mengembalikan PR https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323 , jadi saya telah membuka PR https://github.com /DefinitelyTyped/DefinitelyTyped/pull/40095 untuk melakukannya.

Minggu depan, saya akan bekerja untuk menambahkan tes berdasarkan laporan (misalnya https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323#issuecomment-549015652) yang dibagikan. Setelah itu berfungsi, kami dapat (ex ante) mengevaluasi solusi lain yang mirip dengan https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323.

@smockle sudahkah Anda mencoba menjalankan versi terbaru (4.4.2)? Sepertinya bug kinerja kembali lagi, menurunkan versi ke 4.1.19 membantu.

UPD: Sama dengan pengetikan sc v5.0.1

@sregg
Gerakan mengungkap kekerasan seksual demi menghapuskannya!!!

VSCode (* Sebenarnya TS-SERVER) saya lebih lambat dari sebelumnya. setelah menggunakan komponen gaya.
"@types/styled-components": "^5.1.0", "styled-components": "^5.1.1" "typescript": "^3.9.5"

Setelah menurunkan TS dari 3.9.X ke 3.8.3, kinerja saya kembali normal. Menggunakan "@types/styled-components": "^5.1.0" dan "styled-components": "^5.1.1" .

Terima kasih @joaopaulobdac , saya telah mengerjakan satu proyek yang secara substansial lebih lambat dalam evaluasi TypeScript daripada yang lain, dan butuh waktu lama bagi saya untuk menyadari bahwa Komponen Gaya adalah penyebabnya. Perbaikanmu sudah selesai untukku. Tampaknya tidak menggunakan salah satu dari fitur TypeScript 3,9x jadi itu adalah sakelar yang cukup mudah!

Haruskah kita membuat masalah baru? Tidak memutakhirkan hanyalah solusi jangka pendek.

Saya mengalami masalah yang sama dengan Juni 2020 terbaru (versi 1.47) dan "@types/styled-components": "^5.1.1"

Menggunakan TypeScript 3.9.3 dengan tipe komponen gaya versi 5.1.1 benar-benar menghancurkan kinerja server VSCode TS saya. Ini benar-benar tidak dapat digunakan :D Menurunkan versi ke TypeScript 3.8.3 tampaknya memulihkan setidaknya beberapa kinerja, tetapi ini memang membutuhkan lebih banyak perhatian.

@RyanCavanaugh buka kembali?

Dapat mengkonfirmasi, mengalami masalah yang sama.

Sama di sini, layak dibuka kembali!

Saya mengonfirmasi bahwa VSCode saya mulai tersedak.

Saya akhirnya menghapus komponen-gaya, itu tidak memberikan banyak manfaat pada reaksi-asli bagi kami. Objek JS lama biasa dengan operator spread dan gaya sebaris berfungsi dengan baik tanpa masalah kinerja TS, IMO akhirnya menjadi lebih mudah untuk membaca kode daripada dengan komponen gaya setidaknya di RN.

Saya mengalami neraka di surga CSS-in-JS ketika saya membuat kode dengan VSCode.

@AndrewMorsillo @hilezir Saya beralih dari komponen gaya ke styletron, menggunakan TS 4. Performa di styletron jauh lebih baik baik di vscode maupun di browser. Tapi saya tidak tahu tentang styletron di React Native.

@AndrewMorsillo @hilezir Saya beralih dari komponen gaya ke styletron, menggunakan TS 4. Performa di styletron jauh lebih baik baik di vscode maupun di browser. Tapi saya tidak tahu tentang styletron di React Native.

Sudah terlambat bagi kita untuk melakukan perubahan ini, tetapi saya belum pernah mendengar tentang styletron dan pasti lebih menyukai tampilannya daripada komponen yang ditata.

Apakah akan ada edisi baru atau akankah masalah ini dibuka kembali? Masih ada masalah performa hebat dengan @types/styled-components 5.1.2 dan TS 3.9.7

Menghabiskan sepanjang hari mencoba mencari cara untuk mempercepat VSCode dan _finally_ menemukan itu @types/styled-components . Ketika itu diinstal, hanya mengetikkan apa pun di editor akan menyebabkan tsserver.js (seperti yang ditunjukkan melalui VSCode Process Explorer) melonjak >100% CPU dan tumbuh tanpa batas dalam memori. Cukup menghapus @types/styled-components memperbaiki ini.

Saya menggunakan TypeScript 4.0.3 dan @types/styled-components 5.1.3.

dapatkah seseorang menyarankan alternatif yang lebih baik untuk komponen gaya. vscode saya benar-benar membeku.

dapatkah seseorang menyarankan alternatif yang lebih baik untuk komponen gaya. vscode saya benar-benar membeku.

coba ini?

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

2. https://emotion.sh/docs/styled#styling -elements-and-components

Sebenarnya ada Permintaan Tarik terbuka untuk meningkatkan kinerja tipe styled-components ': https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46510.