Definitelytyped: [@ types / Styled-component] مشاكل في الأداء في المترجم

هل يحدث هذا أيضًا مع النسخة المطبوعة 3.3؟

لقد واجهت نفس المشكلة

package.json

الاعتماد على التنمية

"@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 لا يمكنه تحليل @ type / style-component. لأنه عند استخدام المكونات المصممة فقط ، لم تكن هناك مشكلة. يحدث هذا دائمًا عند استخدام @ types / [email protected] في نفس الوقت.

قبل رؤية إصدار voliva ، وجدت مشكلة حلقة لانهائية في حزمة الويب لأنها تستخدم موارد وحدة المعالجة المركزية بنسبة 100٪.

بعد تغيير الإصدار @ types / Styled-compoents إلى 4.1.5 ، يبدو أن كل شيء على ما يرام.

@ eps1lon : كلا ، الكتابة المطبوعة 3.3 جيدة ؛ على وجه التحديد ، يبدو أن المشكلة تبدأ تحت الإصدار 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-dev.20190226 | مطبوعة 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 ث | 0m35.278s | 0 م6.125 ث |
| OmitPickU | OmitPickU | 0 م 10.501 ث | 0 م 6.947 ثانية | 0 م6.055 ثانية |
| OmitU | Omit | 0m9.611 ثانية | 0 م6.781 ثانية | 0 م 6.102 ث |
| Omit | OmitU | 0 م 10.471 ث | 0 م 7.451 ثانية | ... الخ |
| OmitPickU | Omit | 0m9.654 ثانية | 0 م6.796 ثانية | |
| Omit | OmitPickU | 0 م 9،990 ث | 0 م6.485 ث | |
| Omit | Omit | 0m9.730 ثانية | 0 م 6.815 ث | |

تتوافق أوقات تشغيل النصوص المطبوعة 3.3.3 و 3.3.4000 مع 3.4.0-dev.20190223 - تقريبًا 6 ثوانٍ عبر اللوحة.

لست على دراية كافية بالمكونات المصممة لاقتراح حل ، لكنني آمل أن تساعد هذه البيانات!

يمكنني أن أؤكد أن لدي نفس المشكلة. عملت عملية الرجوع إلى إصدار @ أنواع / مكوّنات نمطية إلى 4.1.5 بالنسبة لي أيضًا. أنا على نص مطبوع 3.4.1

michsa كنت أتوقع بعض التخفيض ولكن ليس 10x. نظرًا لأن هذا تم تقديمه في النسخة المطبوعة 3.4 ، فهل يمكنك فتح مشكلة في الريبو المطبوع أيضًا؟ أود التأكد من أننا لا نعود إلى إصلاح الأخطاء إذا كان انحدارًا يجب إصلاحه في الكتابة المطبوعة.

عذرًا ، لم أقم بالبحث في البداية في github الخاص بالطباعة ، لقد وجدت هذه المشكلة التي يبحثون عنها حاليًا: https://github.com/Microsoft/TypeScript/issues/30663

weswighamRyanCavanaugh يمكن يحلو لنا نظرة إلى نشر بسرعة تعود إلى أنواع المكونات على غرار ليس لديها قضايا الأداء الإقتصادي الأداء في 3.4.

مع إصدار VS Code 1.33 ، سيقوم الكثير من مستخدمي js بتنزيل أنواع التنصت من خلال اكتساب النوع تلقائيًا. بمجرد حدوث ذلك ، للخروج من الحالة السيئة ، أعتقد أنه يتعين عليك إما مسح ذاكرة التخزين المؤقت لاكتساب النوع التلقائي أو تثبيت @types/styled-components الثابت. لا توجد تجارب جيدة لمستخدمي js. كلما كانت الكتابة ضعيفة الأداء هي أحدث إصدار منشور ، زاد عدد المستخدمين المتأثرين (وهي تجربة سيئة بالنسبة لهم والكثير من العمل الإضافي بالنسبة لنا أيضًا)

يبدو أن هذا ربما لا يزال يمثل مشكلة مع @ types / Styled-component 4.1.19 و TS 3.6.3. إكمال TS والخطأ في تسليط الضوء على أخذ 5-10 + ثوانٍ على 2018 i7 macbook pro 15. تحتاج إلى إجراء المزيد من التحقيق.

يتحدث Erm ، OP عن مجموعات التسعينيات (قفزة 9x في الوقت من إصدار المكونات المصممة مسبقًا) ، نظرًا لأن كلا الإصدارين الأحدث من TS لهما تخفيفات في مكانه والإصدار الأحدث من المكونات المصممة تم تبسيطه بحيث لا يحتوي على الكثير من الأداء القضايا ، 5-10s ربما مجرد مشروعك والادارات تتصرف بشكل طبيعي.

لا اتمنى! إنه بطيء بشكل محبط الآن عندما لم يكن في الماضي. سأبحث في الأمر أكثر وسأبلغ هنا مرة أخرى إذا كان يبدو أنه مرتبط بهذه المشكلة.

VSCde الخاص بي غير قابل للاستخدام (تظهر أخطاء TS وتختفي بعد ثوانٍ قليلة بدلاً من فورًا) بمجرد إضافة @ type / Styled-component.

أنا أستخدم TS 3.6.4 والأنواع 4.1.20.

sregg اذهب أعاد التخفيف في @types/styled-components : https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323

(والعودة إلى v 4.1.19 لإصلاح المشكلة محليًا)

sregg اذهب أعاد التخفيف في @types/styled-components : # 39323

يجمع @ typescript-bot مقاييس الأداء "لقياس ما إذا كانت [العلاقات العامة] قد تؤثر سلبًا على أوقات الترجمة أو استجابة المحرر". في PR 39323 ، خلص @ typecript-bot إلى أنه "يبدو أنه لم يتغير شيء كثيرًا". .

sregg ، هل يمكنك التفكير في سبب فشل مقاييس @ typecript-bot الحالية في إبراز مشكلة أداء المحرر التي لاحظتها؟

(الشريط الجانبي: "إلقاء اللوم على هذا العلاقات العامة" ليس اقتراحًا بناء ،weswigham. يرجى أن تكون بنّاءً.)

فيما يلي بعض السياق الإضافي:

أبلغsregg عن أداء ضعيف أثناء استخدام TypeScript 3.6.4: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34391#issuecomment -548701239

ولكن من رد @ weswigham في https://github.com/microsoft/TypeScript/issues/30663#issuecomment -507406245 ، فهمت أن إصدارات TypeScript ≥3.5 لن تتحمل بعد الآن عقوبة الأداء التي https://github.com/DefinitelyTyped تم دمج

لذلك ، مع هذا الفهم ، اخترت (أكثر أو أقل) الرجوع إلى https://github.com/DefinitelyTyped/DefinitelyTyped/pull/34499 ، عبر https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323.

تستند مقاييس أداء الروبوت إلى ما هو موجود في الاختبارات ، ولسوء الحظ ، فإن اختبارات المكونات المصممة بعيدة جدًا عن التطبيق الحقيقي ، من حيث الحجم والاستخدام (المعقد). إنها تبذل قصارى جهدها مع ما لديها ، ولكنها لا تجد دائمًا _ كل مشكلة في الأداء.

(الشريط الجانبي: "إلقاء اللوم" بمعنى "بوابة" - من فضلك لا تأخذ أي إساءة ~)

هذا منطقي ، شكرًاweswigham!

حتى نتمكن من اكتشاف تراجع الأداء هذا في الاختبارات ، أعتقد أن أفضل مسار للعمل هو الرجوع إلى العلاقات العامة https://github.com/DefinitelyTyped/DefinitelyTyped/pull/39323 ، لذلك فتحت PR https://github.com / 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 يساعد.

محدث: نفس الشيء مع إصدارات sc v5.0.1

تضمين التغريدة
أنا أيضا!!!

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 ، لقد كنت أعمل في مشروع واحد أبطأ كثيرًا في التقييم

هل يجب أن ننشئ عددًا جديدًا إذن؟ عدم الترقية ليست سوى حل قصير المدى.

أواجه نفس المشكلة مع أحدث إصدار في يونيو 2020 (الإصدار 1.47) و "@ types / Styled-components": "^ 5.1.1"

يؤدي استخدام typecript 3.9.3 مع إصدار أنواع المكونات ذات النمط 5.1.1 تدمير أداء خادم VSCode TS الخاص بي تمامًا. إنه غير قابل للاستخدام على الإطلاق: يبدو أن الرجوع إلى إصدار مطبوع 3.8.3 إلى استعادة بعض الأداء على الأقل ، ولكن هذا في الواقع قد يحتاج إلى مزيد من الاهتمام.

RyanCavanaugh إعادة فتح؟

يمكن أن تؤكد ، تواجه نفس المشكلة.

نفس الشيء هنا ، يستحق إعادة الافتتاح!

أؤكد أن VSCode الخاص بي قد بدأ بالاختناق.

انتهى بي الأمر بإزالة المكونات المصممة ، ولم تقدم لنا الكثير من الفوائد على التفاعل الأصلي على أي حال. تعمل كائنات JS القديمة البسيطة مع عامل الانتشار والأنماط المضمنة بشكل رائع مع عدم وجود مشكلات تتعلق بأداء TS ، وينتهي الأمر بكون IMO أسهل في قراءة التعليمات البرمجية مقارنة بالمكونات المصممة على أي حال على الأقل على RN.

أواجه الجحيم في ملاذ CSS-in-JS عندما أقوم بالتشفير باستخدام VSCode.

AndrewMorsillohilezir انتقلت من-مكونات نصب لstyletron، وذلك باستخدام TS 4. الأداء في styletron هو أفضل بكثير سواء في vscode وفي المتصفح. لكني لا أعرف عن Styletron على React Native.

AndrewMorsillohilezir انتقلت من-مكونات نصب لstyletron، وذلك باستخدام TS 4. الأداء في styletron هو أفضل بكثير سواء في vscode وفي المتصفح. لكني لا أعرف عن Styletron على React Native.

لقد فات الأوان لإجراء هذا التغيير ولكني لم أسمع عن Styletron وبالتأكيد أحب مظهره أكثر من المكونات المصممة.

هل ستكون هناك مشكلة جديدة أم ستتم إعادة فتح هذه المشكلة؟ لا تزال هناك مشكلات كبيرة في الأداء مع @ أنواع / مكوّنات نمطية 5.1.2 و TS 3.9.7

أمضيت يومًا كاملاً في محاولة اكتشاف كيفية تسريع VSCode و _ أخيرًا_ أدركت أنه كان @types/styled-components . عندما يتم تثبيت ذلك ، فإن مجرد كتابة أي شيء في المحرر سيؤدي إلى زيادة tsserver.js (كما هو موضح عبر VSCode Process Explorer) إلى> 100٪ من وحدة المعالجة المركزية والنمو غير المحدود في الذاكرة. ببساطة إزالة @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 -elements-and-component

يوجد بالفعل طلب سحب مفتوح لتحسين أداء أنواع styled-components : https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46510.