ব্রাউসরিফাই দিয়ে কীভাবে ক্ষুদ্রতর আউটপুট পাবেন?


90

সবেমাত্র ব্রাউজারিফাই ব্যবহার করা শুরু হয়েছে , তবে এটি কীভাবে আউটপুট থেকে ছিটানো যায় তার জন্য ডকুমেন্টেশন খুঁজে পাই না।

তাই আমি এরকম কিছু দেখছি:

$> browserify main.js > bundle.js --minified

9
মিনিফিকেশন ব্রাউজারিফাইয়ের সুযোগের বাইরে, আপনাকে এটির একটি আউটপুট একটি মিনিফায়ারের মাধ্যমে চালানো দরকার।
জেনারেলেনারি

উত্তর:


126

এটি ইউগ্লিফাইজের মাধ্যমে পাইপ করুন:

 browserify main.js | uglifyjs > bundle.js

আপনি এ জাতীয় এনপিএম ব্যবহার করে এটি ইনস্টল করতে পারেন:

 npm install -g uglify-js

4
গ্রান্ট ব্রাউজরিফি / ওয়াচাইফ টাস্ক দিয়ে এটি কীভাবে করবেন?
গ্রেগ এনিস

4
আপনি গ্রান্ট ব্যবহার করলে আমি এটি দুটি ধাপে করার পরামর্শ দেব recommend প্রথমে ব্রাউজারিফাই দিয়ে সংকলন করুন এবং তারপরে মিনিফাই করুন। সুবিধাটি হ'ল আপনার কাছে উত্স মানচিত্র সহ একটি বিকাশ তৈরি হতে পারে এবং একটি প্রযোজনা বিল্ড যা সমস্ত কিছু ফেলে দেয়।
টপিক

হ্যাঁ আমি যা করে শেষ করেছি তা হ'ল। এটি আসলে 3 টি পদক্ষেপ, আপনাকে মধ্যবর্তী ফাইলটি পরিষ্কার করতে হবে। ধন্যবাদ!
গ্রেগ এনিস

8
এবং যদি আমি আমার অগলিফাইড ফাইলগুলির জন্য উত্স ম্যাপ চাই - যা "ব্রাউজরিফিকেশন" এর আগে কোডটির দিকে নির্দেশ করবে?
টমাস ডয়েশ

4
@ থমাসডিউচ আমি তার জন্য একটি প্লাগইন তৈরি করেছি ।
বেন

21

3.38.x হিসাবে আপনি আপনার বান্ডিলটি মিনিফাই করতে আমার মিনিফাইফাই প্লাগইন ব্যবহার করতে পারেন এবং এখনও ব্যবহারযোগ্য উত্সমাধ্যম রয়েছে। অন্যান্য সমাধানগুলির সাহায্যে এটি সম্ভব নয় - আপনি যে কাজটি করতে পারেন তা হ'ল সঙ্কুচিত ব্যান্ডেলের মানচিত্র। আপনার পৃথক উত্স ফাইলগুলিতে সমস্ত উপায়ে মানচিত্রকে ছোট করে দিন (হ্যাঁ, এমনকি কফিসিপি পর্যন্তও!)


4
এটি বলে যে এটি 9 সংস্করণ ব্রাউজ করার পক্ষে সমর্থন করে Browse ব্রাউজারফাইটি বর্তমানে 11.0.1 এ রয়েছে। এটি কি এই সমর্থন করবে?
চেম্বারলাইন

uglifyify আমার পক্ষে ভাল প্রতিস্থাপন হিসাবে কাজ করছে বলে মনে হচ্ছে
ব্রেট জামির

15

অথবা ইউগ্লিফাইফাই ট্রান্সফর্ম ব্যবহার করুন যা ব্রাউজারিফাই দ্বারা প্রক্রিয়াজাতকরণের আগে আপনাকে উগলিফের "স্কিজে" ট্রান্সফর্ম প্রয়োগ করে সুবিধা দেয়, অর্থাত আপনি শর্তাধীন প্রয়োজনীয়তার জন্য ডেড কোড পাথগুলি সরিয়ে ফেলতে পারেন। "


এটি এখনও শীর্ষ উত্তরে প্রদর্শিত uglify পাইপ ব্যবহার প্রয়োজন। তারা তাদের ডকের শুরুতে ঠিক সেখানে বলেছে।
carlin.scott

11

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

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

বিকাশে , আমি যখনই কোনও জাভাস্ক্রিপ্ট ফাইল পরিবর্তন করি তখন উত্স মানচিত্রের সাথে একটি সঙ্কুচিত বান্ডিল তৈরি করতে ওয়াচটাইফ ব্যবহার করি। আমি ব্রাউজারে রিফ্রেশ হিট করার আগে ওয়েল-ট্যাবড করার আগে বিল্ডটি শেষ করতে চাই এবং আমি উন্নত করার পদক্ষেপটি চাই না এবং যাইহোক উন্নয়নের সময় এটি কোনও উপকারে আসে না। এটি অর্জন করতে আমি ব্যবহার করি:

watchify app/index.js  --debug -o app/bundle.js -v

পরীক্ষার জন্য , আমি উত্পাদন হিসাবে একই একই কোড চাই (উদাঃ uglified) তবে আমি একটি উত্স মানচিত্রও চাই। আমি এটি দিয়ে অর্জন করি:

browserify app/index.js  -d | uglifyjs -cm -o app/bundle.js      --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"

উত্পাদনের জন্য কোডটি uglify দিয়ে সংকুচিত হয় এবং কোনও উত্স মানচিত্র নেই।

browserify app/index.js  | uglifyjs -cm > app/bundle.js

মন্তব্য:

আমি উইন্ডোজ 7, ​​ম্যাকস হাই সিয়েরা এবং উবুন্টু 16.04 এ এই নির্দেশাবলী ব্যবহার করেছি।

আমি মিনিফাইফাই ব্যবহার বন্ধ করে দিয়েছি কারণ এটি আর রক্ষণাবেক্ষণ করা হয় না।

আমি যা ভাগ করছি তার চেয়ে আরও ভাল উপায়। আমি পড়েছি ব্রাউসরিফাইয়ের সাথে সংমিশ্রণের আগে সমস্ত উত্স ফাইলগুলিকে uglified করে উচ্চতর সংকোচনের দৃশ্যত সম্ভব। আমার তুলনায় যদি আপনার আরও বেশি সময় ব্যয় হয় তবে আপনি এটি তদন্ত করতে চাইতে পারেন।

আপনার যদি ইতিমধ্যে নজরদারি, অগ্লিফাই-জেএস বা ব্রাউসরিফাই ইনস্টল করা না থাকে তবে এনপিএম দিয়ে তাদের ইনস্টল করুন:

npm install -g browserify
npm install -g watchify
npm install -g uglify-js

আপনার যদি পুরানো সংস্করণ ইনস্টল থাকে তবে আমি আপনাকে আপগ্রেড করার পরামর্শ দিচ্ছি। বিশেষত uglify-js যখন তারা কমান্ড লাইন আর্গুমেন্টে একটি ব্রেকিং পরিবর্তন করেছে যা গুগলে প্রকাশিত প্রচুর তথ্যকে অবৈধ করে তোলে।


4

উত্স মানচিত্র সংরক্ষণ করার সময় আর কমাতে প্লাগইনগুলি ব্যবহার করার দরকার নেই:

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js

1

আমি terser যার জন্য ES6 + এবং কিছু ভাল comporession সমর্থন পাশাপাশি হয়েছে।

browserify main.js | terser --compress --mangle > bundle.js

গ্লোবালি ইনস্টল করুন:

 npm i -g terser
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.