JQuery ডাউনলোডের জন্য দুটি সংস্করণ আছে, এক প্রোডাকশন (19KB, minified এবং Gzipped) , এবং অন্যান্য হয় ডেভেলপমেন্ট (120KB, Uncompressed কোড) ।
এখন কমপ্যাক্ট 19 কেবি সংস্করণ, যদি আপনি এটি ডাউনলোড করেন তবে আপনি দেখতে পাবেন এখনও একটি জাভাস্ক্রিপ্ট এক্সিকিউটেবল কোড। তারা কীভাবে এটি সংহত করলেন? এবং আমি কীভাবে কীভাবে আমার কোডটি 'মিনিফাই' করতে পারি?
উত্তর:
ডিআইওয়াই মিনিফিকেশন
কোনও মিনিফায়ার সঠিকভাবে বাজে কোডটি সংকোচন করতে পারে না।
এই উদাহরণে আমি কেবল একটি মিনিফায়ার কতটা তা দেখাতে চাই।
খাটো করার আগে আপনার কী করা উচিত
এবং jQuery সম্পর্কিত ... আমি jQuery.jQuery ব্যবহার করি না পুরানো ব্রাউজারগুলির জন্য, এটি সামঞ্জস্যতার কারণে তৈরি করা হয়েছিল .. caniuse.com পরীক্ষা করুন, প্রায় প্রতিটি ব্রাউজারে কাজ করে (এছাড়াও ie10 এখন মানীকৃত), আমার মনে হয় এখন এটি আপনার ওয়েব অ্যাপ্লিকেশনটি ধীর করার জন্য এখানে ... আপনি যদি পছন্দ করেন তবে $()আপনার নিজের সাধারণ ফাংশনটি তৈরি করা উচিত nd এবং আপনার ক্লায়েন্টদের যদি 100 কেবি জেকুরি স্ক্রিপ্ট প্রতিটা ডাউনলোড করার প্রয়োজন হয় তবে আপনার কোডটি সংকোচনের জন্য কেন বিরক্ত করবেন? আপনার সঙ্কুচিত কোডটি কত বড়? 5-6 কেবি ..? এটিকে আরও সহজ করতে আপনি যে টন প্লাগইন যুক্ত করেছেন সে সম্পর্কে কথা বলবেন না।
আসল কোড
আপনি যখন কোনও ফাংশন লেখেন তখন আপনার ধারণা থাকে, স্টাফ লিখতে শুরু করুন এবং কখনও কখনও আপনি নীচের কোডের মতো কিছু শেষ করেন code কোডটি কাজ করে ow এখন বেশিরভাগ লোক চিন্তাভাবনা বন্ধ করে দেয় এবং এটিকে একটি মিনিফায়ারে যুক্ত করে প্রকাশ করে।
function myFunction(myNumber){
var myArray = new Array(myNumber);
var myObject = new Object();
var myArray2 = new Array();
for(var myCounter = 0 ; myCounter < myArray.length ; myCounter++){
myArray2.push(myCounter);
var myString = myCounter.toString()
myObject[ myString ] = ( myCounter + 1 ).toString();
}
var myContainer = new Array();
myContainer[0] = myArray2;
myContainer[1] = myObject;
return myContainer;
}
এখানে সংশোধিত কোড জারি করুন (আমি নতুন লাইন যুক্ত করেছি)
( Http://javascript-minifier.com/ ) ব্যবহার করে খাটো করা হয়েছে
function myFunction(r){
for(var n=new Array(r),t=new Object,e=new Array,a=0;a<n.length;a++){
e.push(a);
var o=a.toString();
t[o]=(a+1).toString()
}
var i=new Array;
return i[0]=e,i[1]=t,i
}
তবে এই সমস্ত বর্ণ, আইএফ, লুপ এবং সংজ্ঞা কি প্রয়োজনীয়?
বেশিরভাগ সময় নেই !
বিকল্প (কার্যকারিতা এবং সংক্ষিপ্ত কোড বাড়ায়)
Math)while, for... না forEach)"{}","()",";",spaces,newlinesএখন যদি কোনও মিনিফায়ার আপনার কোডটি ভুল করে সংকোচন করতে পারে।
কোনও মিনিফায়ার সঠিকভাবে বাজে কোডটি সংকোচন করতে পারে না।
ডিআইওয়াই
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
এটি উপরের কোডগুলির মতো ঠিক একই জিনিস করে।
কর্মক্ষমতা
আপনার যা প্রয়োজন তা সবসময় আপনার ভাবতে হবে:
আপনি বলার আগে "নুনি নীচের মত কোডটি লিখবে" যান এবং এখানে প্রথম 10 টি প্রশ্ন চেক করুন ...
এখানে প্রতি দশ মিনিটে আমি দেখতে পাই এমন কয়েকটি সাধারণ উদাহরণ।
পুনঃব্যবহারযোগ্য শর্ত চাই
if(condition=='true'){
var isTrue=true;
}else{
var isTrue=false;
}
//same as
var isTrue=!!condition
যদি উপস্থিত থাকে তবেই হ্যাঁ সতর্ক করুন
if(condition==true){
var isTrue=true;
}else{
var isTrue=false;
}
if(isTrue){
alert('yes');
}
//same as
!condition||alert('yes')
//if the condition is not true alert yes
সতর্কতা হ্যাঁ বা না
if(condition==true){
var isTrue=true;
}else{
var isTrue=false;
}
if(isTrue){
alert('yes');
}else{
alert('no');
}
//same as
alert(condition?'yes':'no')
//if the condition is true alert yes else no
একটি সংখ্যাকে একটি স্ট্রিং বা বিপরীতে রূপান্তর করুন
var a=10;
var b=a.toString();
var c=parseFloat(b)
//same as
var a=10,b,c;
b=a+'';
c=b*1
//shorter
var a=10;
a+='';//String
a*=1;//Number
একটি সংখ্যা বৃত্তাকার
var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
একটি সংখ্যা মেঝে
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
সুইচ কেস
switch(n)
{
case 1:
alert('1');
break;
case 2:
alert('2');
break;
default:
alert('3');
}
//same as
var a=[1,2];
alert(a[n-1]||3);
//same as
var a={'1':1,'2':2};
alert(a[n]||3);
//shorter
alert([1,2][n-1]||3);
//or
alert([1,2][--n]||3);
ধরার চেষ্টা কর
if(a&&a[b]&&a[b][c]&&a[b][c][d]&&a[b][c][d][e]){
console.log(a[b][c][d][e]);
}
//this is probably the onle time you should use try catch
var x;
try{x=a.b.c.d.e}catch(e){}
!x||conole.log(x);
আরও যদি
if(a==1||a==3||a==5||a==8||a==9){
console.log('yes')
}else{
console.log('no');
}
console.log([1,3,5,8,9].indexOf(a)!=-1?'yes':'no');
তবে indexOfধীরে ধীরে এই https://stackoverflow.com/a/30335438/2450730 পড়ুন
সংখ্যা
1000000000000
//same as
1e12
var oneDayInMS=1000*60*60*24;
//same as
var oneDayInMS=864e5;
var a=10;
a=1+a;
a=a*2;
//same as
a=++a*2;
বিটওয়াইজ / শর্টহ্যান্ড সম্পর্কে আমি কিছু সুন্দর নিবন্ধ / সাইট পেয়েছি:
http://mudcu.be/jorter/2011/11/bitwise-gems-and-other-optimizations/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
এছাড়াও আপনি অনেক পছন্দসই সার্চেইনগাইন দিয়ে অনুসন্ধান করলে শর্টহ্যান্ড এবং বিটউজির পারফরম্যান্স দেখাচ্ছে এমন অনেকগুলি জাসস্পিফ সাইট রয়েছে।
আমি কয়েক ঘন্টা যেতে পারতাম .. তবে আমি মনে করি এটি আপাতত যথেষ্ট।
আপনার যদি কিছু প্রশ্ন থাকে তবে জিজ্ঞাসা করুন।
এবং মনে রাখ
কোনও মিনিফায়ার সঠিকভাবে বাজে কোডটি সংকোচন করতে পারে না।
(10.4899845 +.5)|0পরিবর্তে 10 ফলাফল 11.
গুগল সবেমাত্র একটি জাভাস্ক্রিপ্ট সংকলক উপলব্ধ করেছে যা আপনার কোড, মৃত কোড শাখাগুলি এবং আরও অনুকূলিতকরণকে হ্রাস করতে পারে।
শ্রদ্ধা
কে
মিনিফাইংয়ের পাশাপাশি আপনি বেসও 64 এটি এনকোড করতে পারেন। এটি আপনার ফাইলকে অনেক বেশি সংকুচিত করে তোলে। আমি নিশ্চিত যে আপনি জেএস ফাইলগুলি দেখেছেন যা পরামিতিগুলি (পি, এ, সি, কে, ই, আর) পাস করার সাথে একটি ইভাল () ফাংশনের অভ্যন্তরে আবৃত রয়েছে। আমি এই নিবন্ধে এটি পড়লাম কিভাবে জাভাস্ক্রিপ্ট ফাইল মিনিফাই করবেন?
আমি একটি ছোট স্ক্রিপ্ট লিখেছি যা আপনার স্ক্রিপ্টটি মিনিমাইজ করার জন্য একটি এপিআই কল করে এটি পরীক্ষা করে দেখুন:
#!/usr/bin/perl
use strict;
use warnings;
use LWP::UserAgent;
use HTTP::Request;
use Fcntl;
my %api = ( css => 'https://cssminifier.com/raw', js => 'https://javascript-minifier.com/raw' );
my $DEBUG = 0;
my @files = @ARGV;
unless ( scalar(@files) ) {
die("Filename(s) not specified");
}
my $ua = LWP::UserAgent->new;
foreach my $file (@files) {
unless ( -f $file ) {
warn "Ooops!! $file not found...skipping";
next;
}
my ($extn) = $file =~ /\.([a-z]+)/;
unless ( defined($extn) && exists( $api{$extn} ) ) {
warn "type not supported...$file...skipping...";
next;
}
warn "Extn: $extn, API: " . $api{$extn};
my $data;
sysopen( my $fh, $file, O_RDONLY );
sysread( $fh, $data, -s $file );
close($fh);
my $output_filename;
if ( $file =~ /^([^\/]+)\.([a-z]+)$/ ) {
$output_filename = "$1.min.$2";
}
my $resp = $ua->post( $api{$extn}, { input => $data } );
if ( $resp->is_success ) {
my $resp_data = $resp->content;
print $resp_data if ($DEBUG);
print "\nOutput: $output_filename";
sysopen( my $fh, $output_filename, O_CREAT | O_WRONLY | O_TRUNC );
if ( my $sz_wr = syswrite( $fh, $resp_data ) ) {
print "\nOuput written $sz_wr bytes\n";
my $sz_org = -s $file;
printf( "Size reduction %.02f%%\n\n", ( ( $sz_org - $sz_wr ) / $sz_org ) * 100 );
}
close($fh);
}
else {
warn: "Error: $file : " . $resp->status_line;
}
}
ব্যবহার:
./minifier.pl a.js c.css b.js cc.css t.js j.js [..]
আমার সম্প্রতি একই কাজটি করা দরকার ছিল। যখন জাভাস্ক্রিপ্ট কম্প্রেসাররেটারে তালিকাভুক্ত সংক্ষেপকরা দুর্দান্ত কাজ করেছে এবং সরঞ্জামটি খুব কার্যকর, আমি ব্যবহার করছি এমন কিছু jQuery কোড (get .getScript এবং jQuery.fn চেক) দিয়ে সংক্ষেপকরা ভাল খেলছিল না। এমনকি গুগল ক্লোজার কমপ্রেসরও একই লাইনে দম বন্ধ হয়ে গেছে । যদিও আমি শেষ পর্যন্ত কিঙ্কসটিকে আউট করতে পারতাম এটি নিয়মিত করা খুব দূরে ছিল।
অবশেষে ইস্যু ব্যতীত যেটি কাজ করেছিল তা হলেন উগলিফাইজেএস (ধন্যবাদ @ অ্যারেজ ৫১ ), এবং অন্য সমস্ত সংখ্যার চেয়ে কমপ্রেস সামান্য কম ছিল। এবং গুগলের মতো এটির একটি এইচটিটিপি এপিআই রয়েছে। প্যাকারটিও দুর্দান্ত এবং পার্ল, পিএইচপি এবং .NET এ ভাষা প্রয়োগ রয়েছে।
আপনার কোডটি ক্ষুদ্রতর করার 2 টি উপায় রয়েছে:
http://yui.github.io/yuicompressor/
নোড এবং এনপিএমের জন্য এ জাতীয় অনেক সরঞ্জাম উপলব্ধ - গ্রান্টের সাথে জাভাস্ক্রিপ্টের এমনিফিকেশন স্বয়ংক্রিয়ভাবে চালানো ভাল অনুশীলন।
আপনি আপনার কোডটি ছোট করতে ubercompute.com এর জাভাস্ক্রিপ্ট মিনিফায়ার ব্যবহার করতে পারেন , এটি আপনার জাভাস্ক্রিপ্ট কোডটিকে তাদের মূল সংস্করণের 75% পর্যন্ত মাইনাইফ করবে।
আপনি যদি ভিএসকোড সম্পাদক ব্যবহার করছেন তবে প্রচুর প্লাগইন / এক্সটেনশন উপলব্ধ।
MinifyAllঅনেক এক্সটেনশন সঙ্গে সামঞ্জস্যপূর্ণ - যেমন একটি খুব ভাল নেই।
এটি ইনস্টল করুন এবং ভিএসকোড পুনরায় লোড করুন। তারপরে আপনার ফাইলটিতে ক্লিক করুন, ওপেন কমান্ড প্যালেট ( Ctrl+Shift+p), পিপড়া টাইপ করুন এই নথিটি মিনিফাই করুন ( Ctrl+alt+m) অন্যান্য উপলভ্য বিকল্পগুলিও সেখানে মূল নথি সংরক্ষণের মতো! সহজ!