কীভাবে ওয়েবপ্যাকের বিল্ড টাইমটিকে প্রিফেটপ্লাগিন এবং বিশ্লেষণ সরঞ্জামটি ব্যবহার করে অনুকূল করা যায়?

Question

পূর্ববর্তী গবেষণা:

ওয়েবপ্যাকের উইকি যেমন বলেছে, বিল্ড পারফরম্যান্সকে অনুকূল করতে বিশ্লেষণ সরঞ্জামটি ব্যবহার করা সম্ভব:

থেকে: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

বিল্ড পরিসংখ্যান থেকে ইঙ্গিত

এমন একটি বিশ্লেষণ সরঞ্জাম রয়েছে যা আপনার বিল্ডটি ভিজ্যুয়ালাইজ করে এবং কিছুটা ইঙ্গিতও দেয় যে কীভাবে বিল্ড আকার এবং বিল্ড পারফরম্যান্সটি অনুকূলিত করা যায় ।

আপনি ওয়েবপ্যাক - প্রোফাইলে --json> stats.json চালিয়ে প্রয়োজনীয় জেএসএন ফাইল তৈরি করতে পারেন

আমি স্ট্যাটাস ফাইলটি তৈরি করি ( এখানে উপলভ্য ) এটি ওয়েবপ্যাকের অ্যানালাইজ সরঞ্জামে আপলোড করা হয়েছে
এবং ইঙ্গিত ট্যাব এর নীচে আমি প্রিফেচপ্লাগিন ব্যবহার করতে বলেছি:

থেকে: http://webpack.github.io/analyse/#hints

দীর্ঘ মডিউল চেইন বিল্ড

বিল্ড পারফরম্যান্স বাড়ানোর জন্য প্রিফেচিং ব্যবহার করুন । চেইনের মাঝখানে থেকে একটি মডিউল উপস্থাপন করুন ।

প্রিফেকপ্লাগিনে উপলভ্য একমাত্র ডকুমেন্টেশন হ'ল আমি ভিতরে ওয়েবটি খনন করেছি:

থেকে: https://webpack.js.org/plugins/prefetch-plugin/

প্রিফেচপ্লাগিন

new webpack.PrefetchPlugin([context], request)

একটি সাধারণ মডিউলটির জন্য একটি অনুরোধ, যা এটির প্রয়োজন হওয়ার আগেই সমাধান হয়ে যায় এবং এটি নির্মিত হয়। এটি কর্মক্ষমতা বাড়িয়ে তুলতে পারে। চতুর প্রিফেচিং পয়েন্টগুলি নির্ধারণ করতে প্রথমে বিল্ডটিকে প্রোফাইল করার চেষ্টা করুন ।

---

আমার প্রশ্নগুলো:

• কীভাবে সঠিকভাবে ব্যবহার করবেন?
• বিশ্লেষণ সরঞ্জামটি ব্যবহার করে সঠিক ওয়ার্কফ্লোটি কী?
• প্রিফেচ প্লাগিন কাজ করে কিনা আমি কীভাবে জানতে পারি? আমি কীভাবে এটি পরিমাপ করতে পারি?
• চেইনটির মাঝামাঝি থেকে কোনও মডিউল প্রিফেচ করার অর্থ কী ?

আমি সত্যিই কিছু উদাহরণ প্রশংসা করব

দয়া করে আমাকে এই প্রশ্নটি পরবর্তী বিকাশকারী যারা প্রিফেকপ্লাগিন এবং বিশ্লেষণ সরঞ্জামগুলি ব্যবহার করতে চান তাদের জন্য একটি মূল্যবান সংস্থান করতে সহায়তা করুন। ধন্যবাদ.

Comments

আমাদের কীভাবে পরিসংখ্যান বিশ্লেষক সরঞ্জামটি ব্যবহার করার কথা? আমি যখন আপলোড ক্লিক করি তখন কিছুই হয় না এবং জমা দেওয়ার বোতামটি নেই। কেবল "ব্যবহারের উদাহরণ"

— তেত্রদেব

কনসোল আউটপুটটি Uncaught SyntaxError: Unexpected token r in JSON at position 0কোনও stats.json আপলোড করার সময় বলেছে

— তেত্রদেব

@ তেত্রাদেভ এর অর্থ আপনার জাসন ফাইলে একটি ত্রুটি রয়েছে। এটি কোনও পাঠ্য সম্পাদক দিয়ে খোলার চেষ্টা করুন এবং দেখুন এমন কোনও কিছু আছে যা বৈধ JSON এর মতো দেখাচ্ছে না। (প্রথম লাইনে ওয়েবপ্যাক থেকে ডিবাগ আউটপুট নিয়ে আমার একই সমস্যা রয়েছে)।

— মাফল

ডক্সগুলির মধ্যে আছে > stats.jsonতবে এটি শীর্ষে একটি অতিরিক্ত কয়েকটি লাইন লিখেছে যা

— পার্সারকে

Answer 1

হ্যাঁ, প্রাক-আনয়ন প্লাগইন ডকুমেন্টেশন বেশ অস্তিত্বহীন। এটি নিজের জন্য নির্ধারণের পরে, এটি ব্যবহার করা বেশ সহজ এবং এটিতে খুব নমনীয়তা নেই। মূলত, এটি দুটি আর্গুমেন্ট গ্রহণ করে, প্রসঙ্গ (alচ্ছিক) এবং মডিউল পথ (প্রসঙ্গের সাথে সম্পর্কিত)। আপনার ক্ষেত্রে প্রসঙ্গটি /absolute/path/to/your/project/node_modules/react-transform-har/ধরে নেওয়া হবে যে আপনার স্ক্রিনশটের node_modulesটিলডটি ওয়েবপ্যাকের নোড_মডিউল রেজোলিউশন অনুযায়ী উল্লেখ করছে ।

প্রকৃত প্রিফেচ মডিউলটি আদর্শভাবে তিনটি মডিউল নির্ভরতা গভীর নয়। সুতরাং আপনার ক্ষেত্রে isFunction.jsদীর্ঘ বিল্ড চেইনের সাথে মডিউলটি এবং আদর্শভাবে এটি প্রাক-আনতে হবেgetNative.js

তবে আমি সন্দেহ করি যে আপনার কনফিগারেশনে মজাদার কিছু আছে, কারণ আপনার বিল্ড চেইন নির্ভরতাগুলি মডিউল নির্ভরতাগুলিকে উল্লেখ করছে, যা ওয়েবপ্যাক দ্বারা স্বয়ংক্রিয়ভাবে অনুকূলিত হওয়া উচিত। আপনি কীভাবে পেলেন তা আমি নিশ্চিত নই, তবে আমাদের ক্ষেত্রে আমরা নোড_মডিউলগুলিতে দীর্ঘ বিল্ড চেইন সম্পর্কে কোনও সতর্কতা দেখতে পাই না। আমাদের বেশিরভাগ দীর্ঘ বিল্ড চেইনগুলি গভীরভাবে নেস্টেড প্রতিক্রিয়াযুক্ত উপাদানগুলির জন্য যার জন্য স্ক্যাস প্রয়োজন। অর্থাত:

নির্বিশেষে, আপনি প্রতিটি সতর্কতার জন্য একটি নতুন প্লাগইন যুক্ত করতে চাইবেন, যেমন:

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

দ্বিতীয় যুক্তিটি মডিউলটির আপেক্ষিক অবস্থানের একটি স্ট্রিং হওয়া আবশ্যক। আশা করি এটি উপলব্ধিযোগ্য।

Comments

আমি আমার কিছু বিল্ড ডাউন করার চেষ্টা করছি এবং ব্যাখ্যা দেওয়ার পরেও আমি কীভাবে এই সরঞ্জামটি ব্যবহার করব সে সম্পর্কে সত্যিই বিভ্রান্ত। ঠিক 'প্রসঙ্গ' অর্থ কী এবং প্রিফেটের প্রতিটি প্যারামিটারের কী প্রয়োজন তা কী আপনি প্রসারিত করতে পারেন? প্লাগিনটিতে ঠিক কী করা হচ্ছে সে সম্পর্কে আমি নিশ্চিত নই

— থ্রোস এক্সসেপশন

এটি কিছুক্ষণ ব্যবহার করা হয়নি তবে এটি সম্ভবত এখনও একইরকম। প্লাগইনে কেবল দুটি যুক্তি থাকা উচিত। একটি, প্রসঙ্গ, যা মডিউলের প্রসঙ্গ তাই উদাহরণস্বরূপ app/components/module.jsxহবে 'app'এবং আমি মনে করি দ্বিতীয়টি আপেক্ষিক অবস্থান হওয়া উচিত, যেমন'components/module.jsx'

— 4m1r

ঠিক আছে অসুস্থ এটি অন্য পাস আছে। আমি কমপক্ষে দুই ডজন প্রেফেচ প্লাগিন ব্যবস্থা চেষ্টা করেছি এবং কিছুই মনে হচ্ছে এটি আমার দীর্ঘ বিল্ড চেইন থেকে সরিয়ে নেই। পোস্টারটিতে আমার একই সমস্যা হচ্ছিল যেখানে আমার নোড মডিউল রয়েছে যা আসলে আমার দীর্ঘ বিল্ড চেইনে রয়েছে এবং আমি এটি উপস্থাপনের চেষ্টা করছি। আমি জানি না যে ওয়েবপ্যাক এই পরিস্থিতিটি কীভাবে পরিচালনা করতে পারে তা জানেন না।

— থ্রো এক্সসেপশন

আমি প্রিফেট প্লাগইনটি আমার প্রকল্পটির হ্যান্ডেলবার্স.জেএস ব্যবহার করে এমন পারফরম্যান্স ব্যাপকভাবে বাড়িয়েছি। আমার জন্য কাজ করে এমন সিনট্যাক্সটি এখানে:new webpack.PrefetchPlugin(__dirname + "/node_modules", "handlebars/runtime.js"),

— আন্দ্রে

এছাড়াও, আপনি যে জিনিসটি উপস্থাপন করতে চান তা যদি কোনও প্যাকেজ না হয় (যেমন না হয় node_modules) তবে আপনি কেবল অনুরোধের স্ট্রিংটি পাস করতে পারেন । মনে রাখবেন যে প্রথম যুক্তি, প্রসঙ্গটি ,চ্ছিক।

— নচিকেতা

Answer 2

আপনার চেইনের মাঝখানে সম্ভবত react-transform-hmr/index.jsএটি প্রায় অর্ধেক পথ দিয়ে শুরু হয়েছিল। আপনি PrefetchPlugin('react-transform-hmr/index')আপনার প্রোফাইলটি তৈরির জন্য আপনার মোট সময়কে দ্রুততর করতে সহায়তা করে কিনা তা দেখতে পুনরায় চেষ্টা করতে পারেন and

Comments

আরও খারাপ .. 2351 মিমি থেকে 2361 মিমি পর্যন্ত, এটি অন্যথায় একটি ত্রুটি ছুঁড়েছেEntry module not found: Error: Cannot resolve module 'react-transform-hmr/index' in /Users/asafkatz/Development/my-react-builerplate

— আসফ কাটজ

ভাল, একটি 10 ​​মিমি পার্থক্য খারাপ নয়, পার্থক্য পরিসংখ্যানগতভাবে তুচ্ছ। আমি ডাব্লু / বিভিন্ন জিনিস, react-transform-hmrবা react-transform-hmr/index.jsইত্যাদির আশেপাশে খেলতাম

— অ্যারন জেনসেন