Definitelytyped: [@ प्रकार/शैली-घटक] संकलक पर प्रदर्शन के मुद्दे

क्या यह टाइपस्क्रिप्ट 3.3 के साथ भी होता है?

मैंने एक ही मुद्दे का अनुभव किया

पैकेज.जेसन

देवनिर्भरता

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

मेरी समस्या यह है कि ऐसा लगता है कि वेबपैक और वेबपैक-देव-सर्वर @ प्रकार/स्टाइल-घटकों को पार्स नहीं कर सकता है। क्योंकि जब सिर्फ स्टाइल-घटकों का उपयोग किया जाता था, तो कोई समस्या नहीं थी। यह हमेशा होता है जब @types/ styled - 4.1.12 एक ही समय का उपयोग करें।

@voliva के मुद्दे को देखने से पहले, मुझे

@ प्रकार/शैली-घटक संस्करण को 4.1.5 में बदलने के बाद, ऐसा लगता है कि सब कुछ ठीक है।

@ eps1lon : नहीं, 3.4.0-dev.20190226 रिलीज के तहत शुरू होती है।

@voliva के बीज रेपो का उपयोग करते OmitU के पुनरावर्ती उपयोग के लिए इंगित किया है, @types/styled-components रिलीज़ 4.1.1 में जोड़ा गया है। यहाँ इसकी परिभाषा है :

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 से बदल दिया जाता है जो यूनियनों पर वितरित नहीं होता है, तो संकलन समय को उचित 10 सेकंड या तो टाइपस्क्रिप्ट 3.4.1 के तहत कम कर दिया जाता है।

(ध्यान दें कि ReactDefaultizedProps प्रकार PickU भी संदर्भ देता है, जो नीचे दी गई तालिका की दूसरी पंक्ति में विशेष रूप से लंबे समय तक चलने वाले समय को समझाने में मदद कर सकता है।)

इसका परीक्षण करने के लिए, मैंने निम्नलिखित में से एक के साथ वितरित OmitU s में से एक या दोनों की अदला-बदली की:

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 टाइपस्क्रिप्ट 3.4.1 , 3.4.0-dev.2019 0226 , और तत्काल पूर्व रिलीज़, 3.4.0-dev.2019 0223 के विरुद्ध चलाया जा रहा है:

| WithOptionalTheme परिभाषा | WithOptionalTheme उपयोग | टाइपप्रति 3.4.1 | टाइपप्रति 3.4.0-देव.20190226 | टाइपप्रति 3.4.0-देव.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.001s | 0m6.947s | 0m6.055s |
| OmitU | Omit | 0m9.611s | 0m6.781s | 0m6.102s |
| Omit | OmitU | 0m10.471s | 0m7.451s | ...आदि |
| OmitPickU | Omit | 0m9.654s | 0m6.796s | |
| Omit | OmitPickU | 0m8.990s | 0m6.485s | |
| Omit | Omit | 0m9.730s | 0m6.815s | |

टाइपस्क्रिप्ट 3.3.3 और 3.3.4000 के लिए चलने का समय

मैं एक समाधान का प्रस्ताव करने के लिए स्टाइल-घटकों से पर्याप्त परिचित नहीं हूं, लेकिन मुझे आशा है कि यह डेटा मदद करता है!

मैं पुष्टि कर सकता हूं कि मेरे पास एक ही समस्या है। @ प्रकार/शैली-घटकों को 4.1.5 में डाउनग्रेड करना मेरे लिए भी कारगर रहा। मैं टाइपप्रति 3.4.1 . पर हूँ

@michsa मैं कुछ कमी की उम्मीद कर रहा था, लेकिन 10x की नहीं। चूंकि इसे टाइपस्क्रिप्ट 3.4 में पेश किया गया था, क्या आप टाइपस्क्रिप्ट रेपो में भी कोई समस्या खोल सकते हैं? मैं यह सुनिश्चित करना चाहता हूं कि यदि यह एक प्रतिगमन है जिसे टाइपस्क्रिप्ट में ठीक किया जाना चाहिए, तो हम बग फिक्स को वापस नहीं करेंगे।

क्षमा करें, मैंने शुरुआत में टाइपस्क्रिप्ट के जीथब में खोज नहीं की, मुझे यह समस्या मिली कि वे वर्तमान में जांच कर रहे हैं: https://github.com/Microsoft/TypeScript/issues/30663

@weswigham @RyanCavanaugh क्या हम कृपया स्टाइल वाले घटकों के प्रकारों को वापस प्रकाशित करने पर

वीएस कोड 1.33 रिलीज के साथ, बहुत सारे जेएस उपयोगकर्ता स्वचालित प्रकार के अधिग्रहण के माध्यम से बग प्रकारों को डाउनलोड करने जा रहे हैं। एक बार ऐसा होने पर, खराब स्थिति से बाहर निकलने के लिए, मेरा मानना ​​है कि आपको या तो अपने स्वचालित प्रकार के अधिग्रहण कैश को साफ़ करना होगा या निश्चित @types/styled-components । जेएस उपयोगकर्ताओं के लिए न तो अच्छे अनुभव हैं। खराब प्रदर्शन करने वाली टाइपिंग जितनी लंबी नवीनतम प्रकाशित संस्करण है, उतने अधिक उपयोगकर्ता प्रभावित होने वाले हैं (जो उनके लिए एक बुरा अनुभव है और हमारे लिए बहुत सारे अतिरिक्त काम भी हैं)

ऐसा लगता है कि यह अभी भी @ प्रकार/शैली-घटकों 4.1.19 और टीएस 3.6.3 के साथ एक समस्या हो सकती है। 2018 i7 macbook pro 15 पर TS पूरा होने और 5-10+ सेकंड लेने में त्रुटि को उजागर करना। कुछ और जांच करने की आवश्यकता है।

एर्म, ओपी 90 के दशक के संकलन के बारे में बात कर रहा है (पूर्व स्टाइल वाले घटकों के संस्करण के रूप में समय में 9x की छलांग), यह देखते हुए कि टीएस के बाद के दोनों संस्करणों में शमन होता है और स्टाइल घटकों के बाद के संस्करण को इतना अधिक नहीं होने के लिए सरल बनाया गया था। मुद्दों, 5-10s शायद सिर्फ आपकी परियोजना है और सामान्य रूप से व्यवहार कर रहे हैं।

मुझे आशा नहीं है! यह निराशाजनक रूप से अब धीमा है जब यह अतीत में नहीं था। मैं इस पर और गौर करने जा रहा हूं और अगर यह इस मुद्दे से संबंधित प्रतीत होता है तो यहां वापस रिपोर्ट करूंगा।

जैसे ही मैं @types/styled-components जोड़ता हूं, मेरा VSCde अनुपयोगी है (ts त्रुटियाँ तुरंत के बजाय कुछ सेकंड के बाद दिखाई देती हैं और गायब हो जाती हैं)।

मैं TS 3.6.4 और प्रकार 4.1.20 का उपयोग कर रहा हूं।

@sregg go इस पीआर को दोष जिसने @types/styled-components में शमन को वापस कर दिया: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323

(और स्थानीय रूप से समस्या को ठीक करने के लिए v 4.1.19 पर वापस रोल करें)

@sregg go इस पीआर को दोष जिसने @types/styled-components में शमन को वापस कर दिया: #39323

@ टाइपस्क्रिप्ट-बॉट प्रदर्शन मेट्रिक्स को "गेज करने के लिए इकट्ठा करता है कि क्या [पीआरएस] संकलन समय या संपादक प्रतिक्रिया को नकारात्मक रूप से प्रभावित कर सकता है"। पीआर 39323 में, @ टाइपस्क्रिप्ट-बॉट ने निष्कर्ष निकाला "ऐसा लगता है कि कुछ भी बहुत ज्यादा नहीं बदला।" .

@sregg , क्या आप किसी कारण के बारे में सोच सकते हैं कि क्यों @ टाइपस्क्रिप्ट-बॉट की मौजूदा मेट्रिक्स आपके द्वारा देखे जाने वाले संपादक के प्रदर्शन के मुद्दे को उजागर करने में विफल रहेंगी?

(साइडबार: "गो ब्लेम दिस

यहां कुछ अतिरिक्त संदर्भ दिया गया है:

टाइपस्क्रिप्ट 3.6.4 का उपयोग करते समय https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34391#issuecomment -548701239

लेकिन https://github.com/microsoft/TypeScript/issues/30663#issuecomment -507406245 में @ weswigham के जवाब से, मैं समझ गया कि टाइपस्क्रिप्ट संस्करण 3.5 अब प्रदर्शन जुर्माना नहीं लगेगा जो https://github.com/DefinitelyTyped /निश्चित रूप से टाइप/पुल/34499 से बचने के लिए विलय कर दिया गया था।

इसलिए, उस समझ के साथ, मैंने https://github.com/DefinitelyTyped/DefinitelyTyped/pull/34499 को https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323 के माध्यम से वापस करने का विकल्प चुना

बॉट के परफेक्ट मेट्रिक्स परीक्षणों में क्या है और दुर्भाग्य से, स्टाइल वाले घटकों के परीक्षण आकार और (जटिल) उपयोग दोनों में एक वास्तविक ऐप से बहुत दूर हैं। जो कुछ भी मिला है, उसके साथ यह सबसे अच्छा कर रहा है, हालांकि यह हमेशा _every_ perf समस्या नहीं ढूंढता है।

(साइडबार: "गिट" अर्थ में "दोष" - कृपया अपराध न करें ~)

यह समझ में आता है, धन्यवाद @weswigham!

जब तक हम परीक्षणों में इस प्रदर्शन प्रतिगमन को पकड़ नहीं सकते, मुझे लगता है कि कार्रवाई का सबसे अच्छा तरीका पीआर को वापस करना है https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323 , इसलिए मैंने पीआर खोला है https://github.com ऐसा करने के लिए /निश्चित रूप से टाइप किया गया /खींचें/40095 ।

अगले सप्ताह, मैं साझा की गई रिपोर्ट (जैसे https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323#issuecomment-549015652) के आधार पर एक परीक्षण जोड़ने के लिए काम करूंगा। एक बार यह काम करने के बाद, हम (पूर्व पूर्व) https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323 जैसे अन्य समाधानों का मूल्यांकन कर सकते हैं

@smockle क्या आपने नवीनतम संस्करण (4.4.2) चलाने की कोशिश की है? ऐसा लगता है कि प्रदर्शन बग फिर से वापस आ गया है, 4.1.19 पर डाउनग्रेड करने से मदद मिलती है।

यूपीडी: एससी टाइपिंग के साथ भी 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 , मैं एक ऐसे प्रोजेक्ट पर काम कर रहा हूं जो दूसरे की तुलना में टाइपस्क्रिप्ट मूल्यांकन में काफी धीमा है, और मुझे यह समझने में इतना समय लगा कि स्टाइल कंपोनेंट्स अपराधी थे। आपका फिक्स मेरे लिए हो गया है। टाइपस्क्रिप्ट की 3.9x सुविधाओं में से किसी का भी उपयोग नहीं कर रहा था, इसलिए यह एक बहुत दर्द रहित स्विच था!

क्या हमें तब एक नया मुद्दा बनाना चाहिए? अपग्रेड न करना केवल एक अल्पकालिक समाधान है।

मैं नवीनतम जून 2020 (संस्करण 1.47) और "@ प्रकार/शैली-घटकों" के साथ एक ही समस्या का सामना कर रहा हूं: "^5.1.1"

स्टाइल-घटकों के प्रकार संस्करण 5.1.1 साथ टाइपस्क्रिप्ट 3.9.3 का उपयोग करना मेरे VSCode TS सर्वर के प्रदर्शन को पूरी तरह से नष्ट कर देता है। यह बिल्कुल अनुपयोगी है :D डाउनग्रेडिंग टू टाइपस्क्रिप्ट 3.8.3 कम से कम कुछ प्रदर्शन को पुनर्स्थापित करता है, लेकिन यह वास्तव में कुछ और ध्यान दे सकता है।

@RyanCavanaugh फिर से खोलना?

पुष्टि कर सकते हैं, एक ही समस्या का अनुभव कर रहे हैं।

यहाँ वही, फिर से खोलने लायक!

मैं पुष्टि करता हूं कि मेरा वीएससीओडी घुटना शुरू हो गया है।

मैंने स्टाइल-घटकों को हटा दिया, यह वैसे भी हमारे लिए प्रतिक्रिया-मूल पर एक टन लाभ प्रदान नहीं करता था। स्प्रेड ऑपरेटर और इनलाइन शैलियों के साथ सादे पुराने JS ऑब्जेक्ट बिना TS perf मुद्दों के बहुत अच्छा काम करते हैं, IMO स्टाइल-घटकों की तुलना में कोड को पढ़ने में आसान होता है, वैसे भी कम से कम RN पर।

जब मैं वीएससीओडी के साथ कोडिंग कर रहा हूं तो मुझे सीएसएस-इन-जेएस हेवन में नरक का अनुभव हो रहा है।

@AndrewMorsillo @hilezir मैंने TS 4 का उपयोग करके स्टाइल-घटकों से स्टाइलट्रॉन में स्विच किया। स्टाइलट्रॉन में प्रदर्शन बनाम कोड और ब्राउज़र दोनों में बहुत बेहतर है। लेकिन मैं रिएक्ट नेटिव पर स्टाइलट्रॉन के बारे में नहीं जानता।

@AndrewMorsillo @hilezir मैंने TS 4 का उपयोग करके स्टाइल-घटकों से स्टाइलट्रॉन में स्विच किया। स्टाइलट्रॉन में प्रदर्शन बनाम कोड और ब्राउज़र दोनों में बहुत बेहतर है। लेकिन मैं रिएक्ट नेटिव पर स्टाइलट्रॉन के बारे में नहीं जानता।

हमें यह परिवर्तन करने में बहुत देर हो चुकी है, लेकिन मैंने स्टाइलट्रॉन के बारे में नहीं सुना है और निश्चित रूप से स्टाइल वाले घटकों की तुलना में इसके लुक को अधिक पसंद करते हैं।

क्या कोई नया मुद्दा आएगा या इस मुद्दे को फिर से खोल दिया जाएगा? @types/style-components 5.1.2 और TS 3.9.7 . के साथ अभी भी शानदार प्रदर्शन समस्याएं हैं

VSCode को गति देने का तरीका जानने के लिए पूरा दिन बिताया और _finally_ को लगा कि यह @types/styled-components । जब यह इंस्टाल हो जाता है, तो संपादक में कुछ भी टाइप करने से tsserver.js (जैसा कि VSCode प्रोसेस एक्सप्लोरर के माध्यम से दिखाया गया है)> 100% CPU में वृद्धि होगी और मेमोरी में असीमित वृद्धि होगी। बस @types/styled-components को हटाकर इसे ठीक कर दिया।

मैं टाइपस्क्रिप्ट 4.0.3 और @types/styled-components 5.1.3 का उपयोग कर रहा था।

क्या कोई स्टाइल-घटकों के लिए बेहतर विकल्प सुझा सकता है। मेरा बनामकोड पूरी तरह से जम जाता है।

क्या कोई स्टाइल-घटकों के लिए बेहतर विकल्प सुझा सकता है। मेरा बनामकोड पूरी तरह से जम जाता है।

इसे इस्तेमाल करे?

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

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

वास्तव में styled-components ' प्रकार के प्रदर्शन में सुधार के लिए एक पुल अनुरोध खुला है: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46510।