আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনটি প্রয়োজনের চেয়ে প্রথম রেন্ডারটিতে 40% ধীর হতে পারে।
আপনি খারাপ কোড লিখেছেন বলে নয়। প্রতিক্রিয়া ধীর হওয়ার কারণে নয়। তবে স্টাইলযুক্ত-সংস্থাগুলি কখনই কার্যকর হয়নি 18 এর প্রতিক্রিয়া useInsertionEffect হুক: সিএসএস-ইন-জেএস পারফরম্যান্সের সমস্যাগুলি সমাধান করার জন্য বিশেষভাবে ডিজাইন করা একটি বৈশিষ্ট্য।
এই অপ্টিমাইজেশন পাথের সাথে 2022 মার্চ মাসে 18 টি প্রেরণ করা হয়েছে, স্টাইলযুক্ত-উপাদানগুলি রেন্ডার এবং লেআউটের পরিবর্তে রেন্ডার চলাকালীন স্টাইলগুলি ইনজেকশন করে 17 টি প্যাটার্নগুলিতে রয়ে গেছে।
এটি একটি পারফরম্যান্স-হত্যার চক্র তৈরি করে: শৈলীগুলি ইনজেকশন দেয়, লেআউট পুনরায় গণনা করে, আরও স্টাইল ইনজেকশন দেয়, আরও পুনঃসংশোধন করে। ঠিক কি useInsertionEffect প্রতিরোধের জন্য ডিজাইন করা হয়েছিল।
“নতুন প্রকল্পগুলির জন্য, আমি স্টাইলযুক্ত-উপাদানগুলি গ্রহণ করার পরামর্শ দেব না,” ইভান জ্যাকবস লিখেছেনএটি গত কয়েক বছর ধরে রক্ষণাবেক্ষণকারী। পরিষ্কার। সরাসরি। সৎ।
তবে ইতিমধ্যে উত্পাদনে লক্ষ লক্ষ বিদ্যমান উপাদানগুলির কী হবে?
ইভান যখন মার্চ 17, 2025-এ রক্ষণাবেক্ষণ মোড ঘোষণা করেছিল, তখন তিনি সতেজ স্বচ্ছ ছিলেন: স্টাইলযুক্ত-উপাদানগুলি কাজ করবে না প্রতিক্রিয়া সার্ভার উপাদান ছাড়া 'use client' নির্দেশাবলী। বাস্তুতন্ত্র এগিয়ে গেছে। তিনি আর প্রযোজনায় স্টাইলযুক্ত-উপাদান চালান না।
প্রতিক্রিয়া দল নিজেই এটি পরিষ্কার করেছে: রানটাইম সিএসএস ইনজেকশন সর্বদা স্থিতিশীলভাবে উত্তোলিত শৈলীর চেয়ে ধীর হবে। তারা ব্যবহার করার পরামর্শ দেয় <link rel="stylesheet"> স্ট্যাটিক স্টাইল এবং গতিশীল মানগুলির জন্য ইনলাইন শৈলীর জন্য। এটাই ভবিষ্যত।
শ্রদ্ধা। নিখরচায় 34,000 তারা সহ একটি গ্রন্থাগার বজায় রাখা ক্লান্তিকর। আমরা বছরের পর বছর ধরে স্টাইলযুক্ত উপাদানগুলি স্পনসর করছি। আমরা বোঝা জানি। ইভানের সততা প্রত্যেককে সিদ্ধান্ত নেওয়ার জন্য স্পষ্টতা দিয়েছে।
তবে সেই ঘোষণাটি কী সম্বোধন করেনি তা এখানে: কয়েক হাজার হাজার স্টাইলযুক্ত উপাদান সহ হাজার হাজার প্রোডাকশন অ্যাপস যা কেবল অদৃশ্য হতে পারে না। লিনিয়ার, স্যানিটি এবং অগণিত অন্যান্য দল। আমরা সকলেই একই সমস্যা জাগ্রত।
স্টাইলযুক্ত-উপাদানগুলি ব্যবহার করে আমাদের কোডব্যাসগুলি যত্ন করে না যে টেলওয়াইন্ড ট্রেন্ডিং করছে (সেগুলি তৈরি করার চেষ্টা করার অভাব নেই!)। তাদের আজ বৈশিষ্ট্যগুলি শিপিং করা দরকার।
আমাদের সিদ্ধান্ত? কমপক্ষে অস্থায়ীভাবে সম্প্রদায়টি কোথায় চলে গেছে তা বেছে নিন।
স্যানিটিতে, আমাদের একটি সমস্যা ছিল। স্যানিটি স্টুডিও স্টাইলযুক্ত-উপাদানগুলিতে চলে। আমাদের ইউআই লাইব্রেরিও তাই করে। হাজার হাজার উপাদান, সমস্ত একটি লাইব্রেরির উপর নির্ভরশীল যার নিজস্ব রক্ষণাবেক্ষণকারী ব্যবহার করবেন না বলে।
আমাদের তিনটি পছন্দ ছিল:
- সবকিছু পুনরায় লিখুন (কাজের কয়েক মাস, আমরা আসলে এটি করছি)
- অবনমিত কর্মক্ষমতা গ্রহণ করুন (ঘটছে না)
- এটি নিজেরাই ঠিক করুন
আসলে, আমরা প্রথমে বিকল্পটি বেছে নিয়েছি: ফিক্স আপস্ট্রিমকে অবদান রাখুন। 2024 সালের জুলাইয়ে, আমরা খুললাম পিআর #4332 সঙ্গে useInsertionEffect বাস্তবায়ন। তবে একজন রক্ষণাবেক্ষণকারী 34,000 তারা মূল্যবান প্রত্যাশার সাথে জাগ্রত করে, আমাদের পিআর কাতারে যোগ দিয়েছিল।
কোনও দোষ নেই। ওপেন সোর্স রক্ষণাবেক্ষণ নির্মম।
সুতরাং যখন রক্ষণাবেক্ষণ মোডটি উপস্থিত হয়েছিল, আমরা আমাদের যা করতে হয়েছিল তা করেছি: আমাদের পিআর একটি কাঁটাচামচে পরিণত করে এবং একই নৌকায় আটকে থাকা অন্য কারও জন্য এটি খুলেছে।
আমরা কেবল অন্ধভাবে অনুকূলিত হইনি। আমরা সেখানে প্রতিটি সিএসএস-ইন-জেএস লাইব্রেরির বিরুদ্ধে বেঞ্চমার্ক করেছি। আবেগ, সেলাই, গুবার, রেস্টাইল। স্টাইলযুক্ত-উপাদানগুলি, এমনকি এর অনির্ধারিত অবস্থায় এখনও দীর্ঘ শট দ্বারা সর্বাধিক পারফরম্যান্স। আমাদের অপ্টিমাইজেশনগুলি দ্রুততম গ্রন্থাগারটিকে আরও দ্রুত করে তুলেছে।
স্টাইলযুক্ত-সংস্থাগুলি কখনই প্রয়োগ করেনি তা এখানে: প্রতিক্রিয়া 18 এর প্রতিক্রিয়া useInsertionEffect। এই এপিআই আক্ষরিক অর্থে সিএসএস-ইন-জেএস লাইব্রেরির জন্য ডিজাইন করা হয়েছিল।
// Before: styled-components injects styles during render (!)
function StyledComponent() {
// This happens during render, blocking everything, might cause relayout
const className = componentStyle.generateAndInjectStyles();
return <div className={className} />;
}
// After: using the hook React built for CSS-in-JS
function StyledComponent() {
// Buffers styles and generates a className, not blocking
const className = componentStyle.generateStyles()
useInsertionEffect(() => {
// Insert styles before useLayoutEffect, no risk of relayout
componentStyle.injectStyles();
});
return <div className={className} />;
}এই একক পরিবর্তন বিশাল। এটি সরানো useInsertionEffect সবকিছু পরিবর্তন। স্টাইলগুলি ইনজেকশনের সময় প্রতিক্রিয়াটি এখন অনুকূলিত করতে পারে: লেআউটের আগে রেন্ডার করার পরে। ঠিক কখন তাদের হওয়া উচিত।
তবে আমরা এখানেই শুরু করেছি।
আমরা ইউজারল্যান্ড অ্যারে অপারেশনগুলি নেটিভের সাথে প্রতিস্থাপন করেছি Array.prototype.flatMap। অদলবদল useRef সাথে সূচনা নিদর্শন useState আরও ভাল মেমরির ব্যবহারের জন্য। অপ্রয়োজনীয় প্রভাব চক্র নির্মূল। এমনকি সাথে হ্যাশ ফাংশনটি অনুকূলিত Math.imul দ্রুত শৈলী প্রজন্মের জন্য।
ছোট পরিবর্তন? নিশ্চিত। কিন্তু flatten এবং phash প্রতিটি স্টাইলযুক্ত উপাদানগুলির প্রতিটি একক রেন্ডার চালান। হাজার হাজার উপাদান সহ একটি অ্যাপে, মিলিসেকেন্ডগুলি সেকেন্ডে পরিণত হয়। সময়ের সাথে সাথে কয়েক মিনিট হয়ে যায়। ব্যবহারকারীদের দ্বারা গুণিত, আপনার ঘন্টা আছে। এবং তাই।
আমরা ES5 থেকে আধুনিক জাভাস্ক্রিপ্টে বিল্ড আউটপুটকে আধুনিকীকরণ করেছি।
নেটিভ স্প্রেড সিনট্যাক্স। নেটিভ ক্লাস।
আপনার ব্যবহারকারীর ব্রাউজারগুলিতে জাভাস্ক্রিপ্ট ইঞ্জিনগুলি আধুনিক সিনট্যাক্সের জন্য অবিশ্বাস্যভাবে অনুকূলিত। কেন শিপ ট্রান্সপাইলড কোড যা ধীর গতিতে চলে?
লিনিয়ারে দলটি কী খুঁজে পেয়েছে
লিনিয়ার যখন তাদের অ্যাপ্লিকেশনটিতে আমাদের কাঁটাচামচ পরীক্ষা করে, তারা 40% পর্যন্ত দ্রুত প্রাথমিক উপাদানটি দেখেছিল রেন্ডারিং। কোন কোড পরিবর্তন হয় না। কোনও মাইগ্রেশন নেই। ঠিক:
# React 18
pnpm add --save-exact styled-components@npm:@sanity/styled-components
# React 19
pnpm add --save-exact styled-components@npm:@sanity/css-in-jsলিনিয়ার থেকে কেনেথ আমাদের বার্তা দিয়েছে:
লিনিয়ার এখন প্রথম পৃষ্ঠাটি আপনার কঠোর পরিশ্রমের জন্য 40% পর্যন্ত দ্রুত ধন্যবাদ জানায়! আপনাকে অনেক ধন্যবাদ। এত তাড়াতাড়ি টার্নআরন্ডের সাথে একটি আনন্দ হয়েছে।
তারপরে যোগ করেছেন: “প্রচুর সংস্থাগুলি কাঁটাচামচ থেকে উপকৃত হবে।”
সে ঠিক আছে!
স্টাইলযুক্ত-উপাদানগুলিতে স্ট্রিমিং এসএসআর?
প্রতিক্রিয়া 18 থেকে ভাঙ্গা। আমাদের জন্য এটি ঠিক করতে হয়েছিল ।
প্রতিক্রিয়া 19 আমাদের সমাধান দিয়েছে: ইনলাইন সিএসএস স্টাইলশিটগুলির জন্য স্থানীয় সমর্থন যে সঠিকভাবে উত্তোলন করা হয় <head> স্ট্রিমিংয়ের সময় আমরা টেকনিকটি রিস্টাইল.ডেভের অগ্রগামী গ্রহণ করেছি।
ফলাফল সুন্দর ছিল।
ServerStyleSheet? চলে গেল সম্পূর্ণ নির্মূল।
এই নতুন বিশ্বের জন্য আমাদের দ্বিতীয় কাঁটাচামচ পুনর্নির্মাণ:
// The old way (broken in React 19)
import { renderToNodeStream } from 'react-dom/server';
import { ServerStyleSheet } from 'styled-components';
res.write('<html><head><title>Test</title></head><body>');
const sheet = new ServerStyleSheet();
const jsx = sheet.collectStyles(<App />);
const stream = sheet.interleaveWithNodeStream(renderToNodeStream(jsx));
stream.pipe(res, { end: false });
stream.on('end', () => res.end('</body></html>'));// Our fork (just works)
import { renderToReadableStream } from 'react-dom/server';
async function handler(request) {
// Look ma, no <ServerStyleSheet> needed!
const stream = await renderToReadableStream(<App />, {
bootstrapScripts: ('/main.js')
});
return new Response(stream, {
headers: { 'content-type': 'text/html' },
});
}তবে এখানে এটি সত্যিই ভাল হয়ে যায়।
Next.js নিয়মিত স্টাইলযুক্ত-উপাদানগুলির সাথে অ্যাপ রাউটার? আপনার একটি সম্পূর্ণ সেটআপ দরকার::
StyledComponentsRegistryমোড়কের উপাদানuseServerInsertedHTMLহুকServerStyleSheetউদাহরণStyleSheetManagerসরবরাহকারী
আমাদের কাঁটাচামচ দিয়ে?
কেবল সংকলক যুক্ত করুন next.config.ts।
এটাই। কোন রেজিস্ট্রি। কোনও স্টাইল সংগ্রহকারী নেই। কোনও সরবরাহকারী নেই। প্রতিক্রিয়া 19 জটিলতা পরিচালনা করে, তাই আপনার দরকার নেই:
// next.config.ts
import type {NextConfig} from 'next'
const config: NextConfig = {
compiler: {styledComponents: {transpileTemplateLiterals: false}}
}
export default configস্ট্রিমিং এসএসআর এর কঠিন সমস্যা সমাধান করার একটি সুন্দর পার্শ্ব প্রতিক্রিয়া ছিল: ServerStyleSheet সম্পূর্ণ অপ্রয়োজনীয় হয়ে উঠেছে। যে কোনও পরিস্থিতিতে।
দেখা যাচ্ছে: প্রতিক্রিয়া 19 এটিকে আরও দ্রুত করেছে
আমাদের প্রতিক্রিয়া 19 কাঁটাচামচ (@স্যানিটি/সিএসএস-ইন-জেএস) মূলত স্ট্রিমিং এসএসআর সমাধানের জন্য নির্মিত হয়েছিল। এটি আমাদের প্রতিক্রিয়া 18 কাঁটাচামচ থেকে দ্রুত শেষ হয়েছিল।
সংকলক অপ্টিমাইজেশন প্রতিক্রিয়া। শর্তসাপেক্ষ ব্যবহার (প্রসঙ্গ) যা থিমগুলি পরিবর্তিত হলে অপ্রয়োজনীয় পুনরায় রেন্ডারদের প্রতিরোধ করে। নতুন জেএসএক্স প্রপস হিসাবে রেফ সহ রানটাইম। এই সমস্ত প্রতিক্রিয়া 19 টি আমাদের অনুকূলিত প্রতিক্রিয়া 18 সংস্করণের চেয়েও ভাল পারফরম্যান্সে যৌগিক বৈশিষ্ট্যযুক্ত বৈশিষ্ট্যযুক্ত।
স্ট্রিমিং এসএসআর ঠিক করার জন্য আমরা এটি তৈরি করেছি। পারফরম্যান্স আপগ্রেডটি রিঅ্যাক্ট 19 এর আর্কিটেকচারকে আলিঙ্গন করে এসেছে।
আমরা নাম দিয়েছি সংগ্রহস্থল styled-components-last-resort। এটাই ঠিক তাই।
আমরা নতুন রক্ষণাবেক্ষণকারী নই। আমরা বৈশিষ্ট্য যুক্ত করছি না। আমরা সক্রিয়ভাবে স্টাইলযুক্ত-উপাদানগুলি থেকে দূরে সরে যাচ্ছি। ভ্যানিলা-নির্ণয়ের জন্য, আপনি যদি কৌতূহলী হন (হ্যাঁ, আমরা অন্যান্য প্রকল্পগুলিতেও টেলওয়াইন্ড ব্যবহার করি)।
কিন্তু মাইগ্রেশন সময় লাগে। স্টাইলগুলি পুনর্লিখন করতে লিনিয়ার পণ্য বিকাশকে বিরতি দিতে পারে না। আপনিও পারেন না।
এই কাঁটাচামচগুলি দুটি কাজ করে: আজ আপনার পারফরম্যান্সকে নাটকীয়ভাবে উন্নত করুন (দ্রুত রেন্ডার্স, অ্যানিমেশনগুলিতে পৌঁছানোর জন্য দ্বিগুণ দ্রুত, আরও স্থিতিশীল ফ্রেমের হার) এবং আগামীকাল সঠিকভাবে স্থানান্তরিত করার জন্য আপনাকে সময় কিনুন। আপনি আপনার আসল মাইগ্রেশন পরিকল্পনা করার সময় আসল পারফরম্যান্স লাভ।
বেশিরভাগ পারফরম্যান্স পরামর্শ গ্রিনফিল্ড প্রকল্পগুলি ধরে নিয়েছে। আসল কোডবেস রয়েছে:
- স্টাইলযুক্ত-উপাদান ব্যবহার করে হাজার হাজার উপাদান
- জটিল থিমিং সিস্টেমগুলি এর এপিআইগুলিতে নির্মিত
- গতিশীল শৈলী যা স্থিতিশীলভাবে নিষ্কাশন করা যায় না
- যে দলগুলি পুনরায় লেখার জন্য বৈশিষ্ট্যগুলি শিপিং করা দরকার
আমাদের কাঁটাচামচগুলি এই বাস্তবতা গ্রহণ করে। ইনস্টল করুন, পারফরম্যান্স বুস্ট পান, আপনি আপনার আসল মাইগ্রেশন পরিকল্পনা করার সময় শিপিং চালিয়ে যান।
রক্ষণাবেক্ষণ মোড ঘোষণার পরে, বিকাশকারীরা গিথুব ইস্যুগুলি বন্যা শুরু করেছিলেন। কেউ কেউ একটি সম্প্রদায়ের কাঁটাচামচ বজায় রাখার প্রস্তাব করেছিলেন। অন্যরা হ্যাকি ওয়ার্কআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআআউট অনেকে সবেমাত্র তাদের ভাগ্য গ্রহণ করেছেন।
আমরা আমাদের সমাধানটি উন্মুক্ত করছি কারণ আমরা সকলেই বছরের পর বছর ধরে স্টাইলযুক্ত উপাদানগুলি থেকে উপকৃত হয়েছি। ইভান এবং অবদানকারীরা আমাদের এমন একটি সরঞ্জাম দিয়েছেন যা লক্ষ লক্ষ উপাদানকে চালিত করে। কমপক্ষে আমরা যা করতে পারি তা হ’ল অন্যকে করুণভাবে রূপান্তর করতে সহায়তা করা।
আপনি খুঁজে পাবেন আমাদের README আমাদের উদ্দেশ্য সম্পর্কে ভোঁতা:
- ⚠ সক্রিয়ভাবে দীর্ঘমেয়াদী বজায় রাখা হয়নি
- ✅ কেবল সুরক্ষা ঠিক করে
- Now কোনও নতুন বৈশিষ্ট্য নেই
- Real একজন সত্যিকারের রক্ষণাবেক্ষণকারী খুঁজছেন
যদি কেউ সম্প্রদায়ের জন্য স্টাইলযুক্ত সমন্বয়গুলি সঠিকভাবে বজায় রাখতে চায় তবে আমরা কীগুলি হস্তান্তর করব। আমরা এটির মালিক হওয়ার চেষ্টা করছি না। প্রত্যেকে তাদের প্রস্থানটি খুঁজে পাওয়ার সময় আমরা কেবল দরজাটি খোলা রাখছি।
দলগুলি তাদের নিজস্ব টাইমলাইনে স্থানান্তর করতে পারে। কোনও জরুরী পুনর্লিখন নেই। কোন পারফরম্যান্স দমকল। প্রতিদিন শিপিংয়ের সময় আধুনিক স্টাইলিং সমাধানগুলির দিকে স্থির অগ্রগতি।
আপনি যদি স্টাইলযুক্ত-উপাদানগুলির সাথে আটকে থাকেন:
পর্যায় 1: তাত্ক্ষণিক ত্রাণ (আজ)
# React 18
pnpm add --save-exact styled-components@npm:@sanity/styled-components
# React 19
pnpm add --save-exact styled-components@npm:@sanity/css-in-jsদ্বিতীয় পর্যায়: রক্তপাত বন্ধ করুন (এই স্প্রিন্ট)
- নতুন স্টাইলযুক্ত-সমন্বয় ব্যবহার হিমশীতল
- আপনার লক্ষ্য সমাধান দিয়ে নতুন উপাদানগুলি শুরু করুন
- আপনার মাইগ্রেশন কৌশল নথি
পর্যায় 3: প্রকৃত পুনরুদ্ধার (এই ত্রৈমাসিক)
- আপনার প্রতিস্থাপন চয়ন করুন: ভ্যানিলা-এক্সট্র্যাক্ট, টেলওয়াইন্ড, পান্ডা সিএসএস
- পদ্ধতিগতভাবে মাইগ্রেট করুন, উপাদান দ্বারা উপাদান
- চিরকাল স্টাইলযুক্ত-সমন্বয়গুলি মুছুন
উভয় কাঁটাচামচ এখন উপলভ্য github.com/sanity-io/styled-components-last-resort
আপনি আমাদের কনফিগার করা স্টাইলযুক্ত-উপাদানগুলি ব্যবহার করতে পারেন বেঞ্চমার্কিং সরঞ্জাম বিভিন্ন লাইব্রেরি (স্টাইলযুক্ত-উপাদান, আবেগ, স্টাইলড-জেএসএক্স, ইত্যাদি), বেঞ্চমার্কস (মাউন্ট ওয়াইড/ডিপ ট্রি, গতিশীল শৈলী) এবং রানার্স (একযোগে, সিঙ্ক্রোনাস) পরীক্ষা করতে।
পারফরম্যান্সকে আরও গভীরভাবে মূল্যায়নের জন্য আমরা তৈরি করা আমাদের বেঞ্চমার্কিং সরঞ্জামটিও পরীক্ষা করে দেখতে পারেন (টিপ: এটি দেখার সময় কিছু গভীর টেকনো রাখুন):
এই ভিডিও (আগে, পরে) একটি চার্জারের সাথে সংযুক্ত 3456×2234 রেজোলিউশনে এম 1 প্রো -তে বিভক্ত স্ক্রিনে দুটি ক্রোম (ভি 128) উইন্ডোজ চালানোর সময় ডিফটি দেখায়, যাতে কোনও সিপিইউ থ্রোটলিং, ম্যাকোস 14.5 নেই।
আপনার অ্যাপ্লিকেশনটিতে স্টাইলযুক্ত-উপাদান রয়েছে। আজ এটি পরিবর্তন হচ্ছে না। আপনি আগামীকাল বের করার সময় এটি ধীর হতে হবে না।
কখনও কখনও ওপেন সোর্স ভবিষ্যত তৈরির বিষয়ে হয় না। কখনও কখনও এটি একে অপরকে বর্তমান পরিচালনা করতে সহায়তা করার বিষয়ে। ইভান আমাদের বছরের পর বছর স্টাইলযুক্ত-উপাদান দিয়েছে। এটি আমরা এটি এগিয়ে যাচ্ছি।
স্যানিটিতে, আমরা সামগ্রী অপারেটিং সিস্টেমটি তৈরি করি যা স্কেলগুলিতে সামগ্রীকে শক্তি দেয়। আমরা ওপেন সোর্সকে সমর্থন করছি কারণ আমরা এটির উপর নির্ভর করি। কখনও কখনও এর অর্থ রক্ষণাবেক্ষণকারীদের স্পনসর করা। কখনও কখনও এর অর্থ অবকাঠামো স্থির করা।
