রিঅ্যাক্টজেএসের প্রোপ বৈধতা বৈশিষ্ট্যটি ব্যবহার করা শুরু হয়েছে , যা ডকস হিসাবে বলেছেন যে পারফরম্যান্স কারণে কেবল 'বিকাশ মোডে' কাজ করে।
প্রতিক্রিয়াটি উল্লেখ করা হয়েছে যে আমি উল্লেখ করেছি এমন কোনও নির্দিষ্ট উপাদানটির বৈশিষ্ট্য বৈধ করা হচ্ছে, তবে আমি স্পষ্টভাবে 'উন্নয়ন মোড' চালু করার কথা মনে করি না।
আমি কীভাবে উন্নয়ন মোডটি ট্রিগার / টগল করতে হবে তা অনুসন্ধান করার চেষ্টা করেছি, তবে কোনও ভাগ্য হয়নি any
উত্তর:
অন্য উত্তরটি ধরে নিয়েছে যে আপনি প্রতিক্রিয়া থেকে বাহ্যিক প্রাক-নির্মিত ফাইলগুলি ব্যবহার করছেন, এবং এটি সঠিক না হলেও বেশিরভাগ লোকেরা কীভাবে প্যাকেজ হিসাবে প্রতিক্রিয়া দেখায় বা গ্রহণ করা উচিত তা নয় । অধিকন্তু, এই বিন্দু সবচেয়ে প্রত্যেক গ্রন্থাগার প্রতিক্রিয়া ও বাক্স এ এছাড়াও একই কনভেনশন উপর নির্ভর উৎপাদন সময় বন্ধ দেব সময় সাহায্যকারী টগল করতে। কেবলমাত্র সংক্ষিপ্ত প্রতিক্রিয়া ব্যবহার করে সেই সমস্ত সম্ভাব্য অপটিমাইজেশনটিও টেবিলে ছেড়ে যাবে।
শেষ পর্যন্ত যাদুটি process.env.NODE_ENVকোডবেজ জুড়ে এম্বেডিং রেফারেন্সগুলিতে প্রতিক্রিয়া দেখায়; এই বৈশিষ্ট্য টগল মত কাজ।
if (process.env.NODE_ENV !== "production")
// do propType checks
উপরেরটি সর্বাধিক সাধারণ প্যাটার্ন এবং অন্যান্য গ্রন্থাগারগুলিও এটি অনুসরণ করে। সুতরাং এই চেকগুলিকে "অক্ষম" করতে আমাদের টগল NODE_ENVকরতে হবে"production"
"দেব মোড" অক্ষম করার উপযুক্ত উপায়টি আপনার পছন্দের বান্ডেলারের মাধ্যমে।
DefinePluginআপনার ওয়েবপ্যাক কনফিগারেশনটিতে এর মতো ব্যবহার করুন :
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
})
এনভায়াইফ ট্রান্সফর্ম ব্যবহার করুন এবং আপনার ব্রাউজারিফাই বিল্ড স্টেপটিNODE_ENV=production ( "set NODE_ENV=production"উইন্ডোজে) দিয়ে চালান
এটি আউটপুট বান্ডিলগুলি তৈরি করবে process.env.NODE_ENVযার স্ট্রিং আক্ষরিক সাথে প্রতিস্থাপনের সমস্ত দৃষ্টান্ত রয়েছে :"production"
রূপান্তরিত কোডটি মিনিমিন করার সময় আপনি "ডেড কোড ইলিমিনেশন" এর সুবিধা নিতে পারেন। যখন minifier স্মার্ট যথেষ্ট উপলব্ধি করা যে DCE হয় "production" !== "production"হয় সবসময় মিথ্যা এবং তাই শুধু সংরক্ষণ আপনি বাইট যদি ব্লক যে কোন কোড মুছে ফেলা হবে।
'"production"'। ডাবল উদ্ধৃত, স্ট্রিংফাই আপনার জন্য এটি করেন
JSON.stringify(process.env.NODE_ENV)যাতে NODE_ENV=production webpack ...কমান্ড-লাইনের মাধ্যমে এটি টগল করা যায়। সুস্পষ্ট কোডের বোনাস যুক্ত করা হয়েছে =)
DefinePluginব্যবহারটি প্রতিস্থাপন করা যেতে পারেnew webpack.EnvironmentPlugin(['NODE_ENV'])
হ্যাঁ, এটি আসলে খুব ভাল নথিবদ্ধ নয়, তবে রিঅ্যাকটিজেএস ডাউনলোড পৃষ্ঠায় এটি উন্নয়ন এবং উত্পাদন পদ্ধতিগুলির বিষয়ে আলোচনা করেছে:
আমরা প্রতিক্রিয়াটির দুটি সংস্করণ সরবরাহ করি: উন্নয়নের জন্য একটি সঙ্কোচিত সংস্করণ এবং উত্পাদনের জন্য একটি সংক্ষিপ্ত সংস্করণ। বিকাশ সংস্করণে সাধারণ ভুল সম্পর্কে অতিরিক্ত সতর্কতা অন্তর্ভুক্ত রয়েছে, যেখানে উত্পাদন সংস্করণে অতিরিক্ত কর্মক্ষমতা অনুকূলিতকরণ এবং সমস্ত ত্রুটি বার্তাকে স্ট্রিপ করে।
মূলত, প্রতিক্রিয়াটির আনমিনাইড সংস্করণ হ'ল "বিকাশ" মোড, এবং প্রতিক্রিয়াটির ক্ষুদ্র সংস্করণ হ'ল "উত্পাদন" মোড।
"উত্পাদন" মোডে থাকতে, কেবল সংক্ষিপ্ত সংস্করণ অন্তর্ভুক্ত করুন react-0.9.0.min.js
npmসরাসরি প্রতিক্রিয়া প্যাকেজ থেকে নির্মাণ করছেন , তবে NODE_ENV = 'production'একই চেকগুলি করতে সেট করার জন্য এনভাইডের মতো সাদামাটা ব্যবহার করুন । @ অ্যাডওয়ার্ডএসমিথ আমাকে জানতে দিন আপনি কোথায় সেই তথ্যটি দেখতে চান এবং আমি এটি যুক্ত করতে পারি (বা আপনি কেবল একটি PR জমা দিতে পারেন)!
NODE_ENVশীর্ষে উপস্থিত হওয়া উচিত বলে আমি মনে করি না এটি সেরা উত্তর ।
আমি এটি অন্য কোথাও পোস্ট করেছি তবে সত্যি বলতে এখানে আরও ভাল জায়গা হবে।
ধরে নিচ্ছি আপনি এনএমপি সহ 15.0.1 প্রতিক্রিয়া ইনস্টল করেন, import react from 'react'বা react = require('react')এটি চালিত হবে ./mode_modules/react/lib/React.jsযা প্রতিক্রিয়াটির কাঁচা উত্স।
প্রতিক্রিয়া দস্তাবেজগুলি আপনাকে ./mode_modules/react/dist/react.jsউন্নয়নের react.min.jsজন্য এবং উত্পাদনের জন্য ব্যবহার করার পরামর্শ দেয় ।
আপনি যদি ক্ষুদ্রতর /lib/React.jsবা /dist/react.jsউত্পাদনের জন্য হন তবে প্রতিক্রিয়াটি এমন একটি সতর্কতা বার্তা প্রদর্শিত হবে যা আপনি অ-উত্পাদনের কোডটি ক্ষুদ্র করে দিয়েছেন:
Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.
প্রতিক্রিয়া-ডোম, রিডেক্স, প্রতিক্রিয়া-রিডেক্স একইরকম আচরণ করে। Redux একটি সতর্কতা বার্তা প্রদর্শন করে। আমি বিশ্বাস করি প্রতিক্রিয়া-ডোমও তা করে।
সুতরাং আপনি এ থেকে উত্পাদনের সংস্করণটি ব্যবহার করতে উত্সাহিত করেছেন /dist।
তবে আপনি যদি /distসংস্করণগুলি মিনিফাই করেন তবে ওয়েবপ্যাকের উগলিফাইজেএসপ্লাগিন অভিযোগ করবে।
WARNING in ../~/react/dist/react.js
Critical dependencies:
4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ../~/react/dist/react.js 4:478-4851
আপনি এই বার্তাটি এড়াতে পারবেন না কারণ উগলিফাইজেএসপ্লাগিন কেবল ওয়েবপ্যাক খণ্ডগুলি বাদ দিতে পারে, পৃথক ফাইলগুলিকে নয়।
আমি বিকাশ এবং উত্পাদন উভয় /distসংস্করণ নিজেই ব্যবহার করি।
/dist/react.min.jsউত্পাদনের জন্য অনুকূলিত হয়। আমি কোনও প্রমাণ পড়েছি নি যে 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }প্লাগ uglif '/ dist / react.min.js` এর মতো ভাল কাজ করে ` আমি কোনও প্রমাণ পড়িনি যে আপনি একই ফলাফল কোড পাবেন।আপনার সাথে ওয়েবপ্যাকটি /distসংস্করণগুলি ব্যবহার করতে পারেন :
resolve: {
alias: {
'react$': path.join(__dirname, 'node_modules', 'react','dist',
(IS_PRODUCTION ? 'react.min.js' : 'react.js')),
'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist',
(IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')),
'redux$': path.join(__dirname, 'node_modules', 'redux','dist',
(IS_PRODUCTION ? 'redux.min.js' : 'redux.js')),
'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist',
(IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js'))
}
}ওয়েবপ্যাক ভিত্তিক বিল্ডের জন্য, আমি ডিইভি এবং পিআরডি জন্য পৃথক ওয়েবপ্যাক.কনফিগ.জেগুলি সেটআপ করতাম। প্রোডের জন্য, নীচের মতো নামটি সমাধান করুন
alias: {
'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'),
'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js')
}আপনি এখানে থেকে কাজটি পেতে পারেন
আপনি যদি এই ReactJS.NET / ওয়েবপ্যাক টিউটোরিয়ালটির মতো কিছু থেকে কাজ করে থাকেন তবে আমি যতদূর বলতে পারি প্রতিক্রিয়া বিকাশের মোডটি চালু / বন্ধ করতে আপনি প্রক্রিয়া.এনভি ব্যবহার করতে পারবেন না। এই নমুনাটি সরাসরি রিএ্যাক্ট.জেজে লিঙ্ক করে ( সূচিপত্র দেখুন ) আপনার ইউআরএল পরিবর্তন করে কেবলমাত্র .min.js বা নন-মিনিফাইড বৈকল্পিক বাছাই করতে হবে।
আমি কেন নিশ্চিত তা নিশ্চিত নই, কারণ নমুনার ওয়েবপ্যাক.কমফিগ.জেএস-তে একটি মন্তব্য রয়েছে যা মনে হয় externals: { react: 'React' }কাজটি করবে, তবে তারপরে এগিয়ে যায় এবং সরাসরি পৃষ্ঠায় প্রতিক্রিয়া অন্তর্ভুক্ত করে।
জন্য শুধুমাত্র Webpack V4 ব্যবহারকারী:
আপনার ওয়েবপ্যাক কনফিগারেশনে নির্দিষ্ট করা mode: productionএবং ডিফল্টরূপে DefinePlugin ব্যবহার করে mode: developmentসংজ্ঞায়িত process.env.NODE_ENVকরা হবে । কোন অতিরিক্ত কোড প্রয়োজন!
ওয়েবপ্যাক.প্রড.জেএস (ডক্স থেকে নেওয়া)
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
});এবং আমাদের জেএসে:
console.log(process.env.NODE_ENV) // --> 'development' or 'production'ওয়েবপ্যাক দস্তাবেজ: https://webpack.js.org/guides/ product /#specify-the-mode
আমি একটি ম্যানুয়াল বিল্ড প্রক্রিয়া ব্যবহার করি যা ওয়েবপ্যাকের মধ্য দিয়ে চলে, তাই এটি আমার জন্য একটি দ্বি-পদক্ষেপ প্রক্রিয়া ছিল:
ক্রস-এনভিভি প্যাকেজ ব্যবহার করে প্যাকেজ.জসন থেকে পরিবেশের পরিবর্তনশীল সেট করুন:
"scripts": {
"build-dev": "cross-env NODE_ENV=development webpack --config webpack.config.js",
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js"
}
পরিবেশ পরিবর্তনশীল (যা আমরা বিকাশ বা উত্পাদন মোডে রয়েছি তা নির্ধারণ করার জন্য প্রতিক্রিয়া অনুসারে পাস করা হয়েছে) ওয়েবপ্যাক.কনফিগ.জেএস ফাইলটি পরিবর্তন করুন এবং আমরা যদি ডেভলপমেন্ট মোডে থাকি তবে উত্পাদিত বান্ডিলটি হ্রাস করা অক্ষম করুন যাতে আমরা দেখতে পাই আমাদের উপাদানগুলির প্রকৃত নাম। আমরা ব্যবহার webpack এর প্রয়োজন অপ্টিমাইজেশান আমাদের সম্পত্তি webpack.config.js এই জন্য ফাইল:
optimization: {
nodeEnv: process.env.NODE_ENV,
minimize: process.env.NODE_ENV === 'production'
}
ওয়েবপ্যাক v4.41.5, প্রতিক্রিয়া v16.9.19, ক্রস-এনভিভি v7.0.0, নোড ভি 10.16.14
process.envwebpack ব্যবহারকারীদের জন্য: stackoverflow.com/questions/37311972/...