M

MLOG

தமிழ்

அதிவேக ஜாவாஸ்கிரிப்ட் பண்ட்லர் மற்றும் உருமாற்றியான ESBuild-ஐ ஆராயுங்கள். வேகம், செயல்திறன் மற்றும் பல்வேறு சூழல்களில் மேம்பட்ட செயல்திறனுக்காக இது உங்கள் வலை மேம்பாட்டுப் பணிப்பாய்வை எவ்வாறு மேம்படுத்துகிறது என்பதை அறியுங்கள்.

ESBuild: அதிவேக ஜாவாஸ்கிரிப்ட் பண்ட்லிங் மற்றும் உருமாற்றம்

வேகமாக வளர்ந்து வரும் வலை மேம்பாட்டு உலகில், செயல்திறனை மேம்படுத்துவதற்கும் பணிப்பாய்வுகளைச் சீரமைப்பதற்கும் பில்டு கருவிகள் அவசியமானவை. ஜாவாஸ்கிரிப்ட் பண்ட்லிங் மற்றும் உருமாற்றத்தில் நிகரற்ற வேகத்தையும் செயல்திறனையும் வழங்கும் ESBuild ஒரு புரட்சிகரமான கருவியாக உருவெடுத்துள்ளது. இந்த கட்டுரை ESBuild-க்கான ஒரு விரிவான வழிகாட்டியை வழங்குகிறது, அதன் அம்சங்கள், நன்மைகள் மற்றும் உலகெங்கிலும் உள்ள டெவலப்பர்களுக்கான நடைமுறைப் பயன்பாடுகளை ஆராய்கிறது.

ESBuild என்றால் என்ன?

ESBuild என்பது Go மொழியில் எழுதப்பட்ட ஒரு ஜாவாஸ்கிரிப்ட் பண்ட்லர் மற்றும் உருமாற்றி ஆகும். Webpack, Parcel மற்றும் Rollup போன்ற பாரம்பரிய ஜாவாஸ்கிரிப்ட் அடிப்படையிலான பண்ட்லர்களுடன் ஒப்பிடும்போது கணிசமாக வேகமான பில்டு நேரங்களை வழங்குவதே இதன் முதன்மை இலக்கு. ESBuild இந்த வேகத்தை பல முக்கிய மேம்படுத்தல்கள் மூலம் அடைகிறது, அவற்றுள்:

ESBuild நவீன வலை மேம்பாட்டிற்கு ஒரு பல்துறை கருவியாக மாற்றும் பல அம்சங்களை ஆதரிக்கிறது:

ESBuild-ஐ ஏன் பயன்படுத்த வேண்டும்?

ESBuild-ஐப் பயன்படுத்துவதன் முதன்மை நன்மை அதன் வேகம் ஆகும். மற்ற பண்ட்லர்களை விட பில்டு நேரங்கள் பெரும்பாலும் கணிசமாக வேகமாக இருக்கும். இந்த வேகம் பின்வருவனவற்றை வழங்குகிறது:

வேகத்தைத் தவிர, ESBuild மற்ற குறிப்பிடத்தக்க நன்மைகளையும் வழங்குகிறது:

ESBuild உடன் தொடங்குவது எப்படி

ESBuild-ஐப் பயன்படுத்தத் தொடங்க, உங்கள் கணினியில் Node.js மற்றும் npm (அல்லது Yarn) நிறுவப்பட்டிருக்க வேண்டும்.

நிறுவுதல்

ESBuild-ஐ குளோபலாக அல்லது ஒரு புராஜெக்ட் சார்புநிலையாக நிறுவவும்:

npm install -g esbuild
# or
npm install --save-dev esbuild

அடிப்படை பயன்பாடு

ESBuild-ஐப் பயன்படுத்துவதற்கான மிக அடிப்படையான வழி கட்டளை வரியிலிருந்து:

esbuild input.js --bundle --outfile=output.js

இந்த கட்டளை input.js மற்றும் அதன் அனைத்து சார்புநிலைகளையும் output.js என்ற பெயரில் ஒரு கோப்பாக இணைக்கிறது.

கட்டமைப்பு கோப்பு (விருப்பத்தேர்வு)

மிகவும் சிக்கலான புராஜெக்ட்களுக்கு, உங்கள் பில்டு விருப்பங்களை வரையறுக்க ஒரு கட்டமைப்பு கோப்பை (எ.கா., esbuild.config.js) உருவாக்கலாம்:

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm', // or 'cjs' for CommonJS
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

பின்னர், கட்டமைப்பு கோப்புடன் ESBuild-ஐ இயக்கவும்:

node esbuild.config.js

மேம்பட்ட அம்சங்கள் மற்றும் கட்டமைப்பு

உங்கள் பில்டு செயல்முறையைத் தனிப்பயனாக்க ESBuild பலவிதமான விருப்பங்களை வழங்குகிறது. இதோ சில முக்கிய அம்சங்கள் மற்றும் கட்டமைப்பு விருப்பங்கள்:

கோட் ஸ்பிளிட்டிங் (Code Splitting)

கோட் ஸ்பிளிட்டிங் உங்கள் பயன்பாட்டின் குறியீட்டைத் தேவைக்கேற்ப ஏற்றக்கூடிய சிறிய துண்டுகளாகப் பிரிக்கிறது. இது முதலில் பதிவிறக்கம் செய்யப்பட்டு பாகுபடுத்தப்பட வேண்டிய ஜாவாஸ்கிரிப்ட்டின் அளவைக் குறைப்பதன் மூலம் ஆரம்பப் பக்க ஏற்றுதல் நேரத்தை கணிசமாக மேம்படுத்தும்.

கோட் ஸ்பிளிட்டிங்கை இயக்க, format: 'esm' விருப்பத்தைப் பயன்படுத்தவும் மற்றும் வெளியீட்டுக் கோப்புகளுக்கு ஒரு கோப்பகத்தைக் குறிப்பிடவும்:

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  splitting: true,
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

ESBuild உங்கள் பயன்பாட்டின் நுழைவுப் புள்ளிகள் மற்றும் மாறும் இறக்குமதி செய்யப்பட்ட எந்த தொகுதிக்கூறுகளுக்கும் தானாகவே தனித்தனி துண்டுகளை உருவாக்கும்.

மினிஃபிகேஷன் மற்றும் ட்ரீ ஷேக்கிங்

மினிஃபிகேஷன் வெற்றிடங்களை அகற்றுவதன் மூலமும், மாறிப் பெயர்களைச் சுருக்குவதன் மூலமும் மற்றும் பிற மேம்படுத்தல்களைப் பயன்படுத்துவதன் மூலமும் குறியீட்டின் அளவைக் குறைக்கிறது. ட்ரீ ஷேக்கிங் பயன்படுத்தப்படாத குறியீட்டை (ஒருபோதும் இயக்கப்படாத குறியீடு) நீக்கி பண்டில் அளவை மேலும் குறைக்கிறது.

மினிஃபிகேஷன் மற்றும் ட்ரீ ஷேக்கிங்கை இயக்க, minify: true விருப்பத்தைப் பயன்படுத்தவும்:

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  treeShaking: true, // Enabled by default when minify is true
  sourcemap: true,
}).catch(() => process.exit(1));

மினிஃபிகேஷன் இயக்கப்பட்டிருக்கும்போது ட்ரீ ஷேக்கிங் இயல்பாகவே இயக்கப்படும்.

பிளகின்கள்

ESBuild-இன் பிளகின் அமைப்பு அதன் செயல்பாட்டைத் தனிப்பயன் பிளகின்கள் மூலம் நீட்டிக்க உங்களை அனுமதிக்கிறது. பிளகின்களைப் பல்வேறு பணிகளைச் செய்யப் பயன்படுத்தலாம், அவை:

உங்கள் தொகுப்பின் தற்போதைய பதிப்புடன் __VERSION__ என்பதன் அனைத்து நிகழ்வுகளையும் மாற்றும் ஒரு எளிய ESBuild பிளகினின் எடுத்துக்காட்டு இங்கே:

// version-plugin.js
const fs = require('fs');
const path = require('path');

function versionPlugin() {
  return {
    name: 'version-plugin',
    setup(build) {
      build.onLoad({ filter: /\.(js|ts|jsx|tsx)$/ }, async (args) => {
        const contents = await fs.promises.readFile(args.path, 'utf8');
        const packageJsonPath = path.resolve(process.cwd(), 'package.json');
        const packageJson = JSON.parse(await fs.promises.readFile(packageJsonPath, 'utf8'));
        const version = packageJson.version;
        const modifiedContents = contents.replace(/__VERSION__/g, version);
        return {
          contents: modifiedContents,
          loader: args.loader,
        };
      });
    },
  };
}

module.exports = versionPlugin;

பிளகினைப் பயன்படுத்த, அதை உங்கள் ESBuild கட்டமைப்பில் சேர்க்கவும்:

// esbuild.config.js
const esbuild = require('esbuild');
const versionPlugin = require('./version-plugin');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  plugins: [versionPlugin()],
}).catch(() => process.exit(1));

இலக்கு சூழல்கள் (Target Environments)

ESBuild உங்கள் குறியீட்டிற்கான இலக்கு சூழல்களைக் குறிப்பிட உங்களை அனுமதிக்கிறது. நீங்கள் இலக்கு வைக்கும் உலாவிகள் அல்லது Node.js பதிப்புகளுடன் உங்கள் குறியீடு இணக்கமாக இருப்பதை இது உறுதி செய்கிறது. வெவ்வேறு பிராந்தியங்கள் மற்றும் பயனர் தளங்கள் வெவ்வேறு உலாவிகள் மற்றும் பதிப்புகளைப் பயன்படுத்தும். உலகளாவிய பயன்பாட்டு மேம்பாட்டிற்கு இந்த அம்சம் முக்கியமானது.

இலக்கு சூழல்களைக் குறிப்பிட target விருப்பத்தைப் பயன்படுத்தவும்:

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  target: ['es2015', 'chrome58', 'firefox57', 'safari11', 'edge16'],
}).catch(() => process.exit(1));

இந்த எடுத்துக்காட்டில், ESBuild உங்கள் குறியீட்டை ES2015, Chrome 58, Firefox 57, Safari 11 மற்றும் Edge 16 உடன் இணக்கமாக மாற்றும்.

ESBuild மற்றும் பிற பண்ட்லர்களின் ஒப்பீடு

ESBuild குறிப்பிடத்தக்க வேக நன்மைகளை வழங்கினாலும், Webpack, Parcel மற்றும் Rollup போன்ற பிற பண்ட்லர்களுடன் ஒப்பிடும்போது அதன் சமரசங்களைக் கருத்தில் கொள்வது அவசியம்.

Webpack

Webpack என்பது ஒரு பெரிய மற்றும் முதிர்ந்த சூழலைக் கொண்ட, மிகவும் கட்டமைக்கக்கூடிய மற்றும் பல்துறை பண்ட்லர் ஆகும். இது பரந்த அளவிலான அம்சங்களையும் பிளகின்களையும் வழங்குகிறது, ஆனால் அதன் சிக்கலான தன்மை நுழைவதற்கு ஒரு தடையாக இருக்கலாம். பெரும்பாலான புராஜெக்ட்களுக்கு Webpack-ஐ விட ESBuild பொதுவாக மிகவும் வேகமானது, ஆனால் சில பயன்பாட்டு நிகழ்வுகளுக்கு Webpack-இன் விரிவான பிளகின் சுற்றுச்சூழல் தேவைப்படலாம்.

Parcel

Parcel என்பது ஒரு பூஜ்ஜிய-கட்டமைப்பு பண்ட்லர் ஆகும், இது ஒரு எளிய மற்றும் உள்ளுணர்வு மேம்பாட்டு அனுபவத்தை வழங்குவதை நோக்கமாகக் கொண்டுள்ளது. இது உங்கள் புராஜெக்ட்டின் சொத்துக்களைத் தானாகவே கண்டறிந்து தொகுக்கிறது, ஆனால் அதன் கட்டமைப்பின்மை சிக்கலான புராஜெக்ட்களுக்கு ஒரு வரம்பாக இருக்கலாம். ESBuild பொதுவாக Parcel-ஐ விட வேகமானது மற்றும் அதிக கட்டமைப்பு விருப்பங்களை வழங்குகிறது.

Rollup

Rollup என்பது ஜாவாஸ்கிரிப்ட் லைப்ரரிகளை உருவாக்குவதற்காக பிரத்யேகமாக வடிவமைக்கப்பட்ட ஒரு பண்ட்லர் ஆகும். இது ட்ரீ ஷேக்கிங்கில் சிறந்து விளங்குகிறது மற்றும் மிகவும் உகந்த பண்டில்களை உருவாக்குகிறது. ESBuild பொதுவாக Rollup-ஐ விட வேகமானது, குறிப்பாக பெரிய புராஜெக்ட்களுக்கு, மற்றும் வெவ்வேறு கோப்பு வகைகள் மற்றும் அம்சங்களுக்கு விரிவான ஆதரவை வழங்குகிறது.

முக்கிய வேறுபாடுகளைச் சுருக்கமாகக் காட்டும் அட்டவணை இங்கே:

அம்சம் ESBuild Webpack Parcel Rollup
வேகம் மிகவும் வேகம் மிதமானது மிதமானது வேகம்
கட்டமைப்பு மிதமானது உயர் குறைவு மிதமானது
பிளகின் சுற்றுச்சூழல் வளர்கிறது முதிர்ந்தது வரையறுக்கப்பட்டது மிதமானது
பயன்பாட்டு வழக்குகள் வலைப் பயன்பாடுகள், லைப்ரரிகள் வலைப் பயன்பாடுகள் எளிய வலைப் பயன்பாடுகள் ஜாவாஸ்கிரிப்ட் லைப்ரரிகள்

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

ESBuild-ஐ பல்வேறு வலை மேம்பாட்டுத் திட்டங்களில் பயன்படுத்தலாம். இதோ சில நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்:

ஒரு React பயன்பாட்டை உருவாக்குதல்

ESBuild-ஐ டைப்ஸ்கிரிப்ட் மற்றும் JSX ஆதரவுடன் ஒரு React பயன்பாட்டைத் தொகுக்கப் பயன்படுத்தலாம். இதோ ஒரு எடுத்துக்காட்டு கட்டமைப்பு:

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  jsxFactory: 'React.createElement',
  jsxFragment: 'React.Fragment',
  loader: {
    '.ts': 'tsx',
    '.js': 'jsx',
  },
}).catch(() => process.exit(1));

இந்த கட்டமைப்பு ESBuild-க்கு src/index.tsx கோப்பைத் தொகுக்கவும், JSX மற்றும் TSX தொடரியலை மாற்றவும் மற்றும் சோர்ஸ் மேப்ஸுடன் ஒரு மினிஃபைடு பண்டிலை உருவாக்கவும் கூறுகிறது.

ஒரு Vue.js பயன்பாட்டை உருவாக்குதல்

ESBuild இயல்பாக Vue.js ஒற்றை-கோப்பு கூறுகளை (.vue கோப்புகள்) ஆதரிக்கவில்லை என்றாலும், esbuild-plugin-vue3 போன்ற ஒரு பிளகினைப் பயன்படுத்தி அவற்றுக்கான ஆதரவைச் சேர்க்கலாம். Vue.js கிழக்கு ஆசியா போன்ற உலகின் பல பகுதிகளில் பிரபலமாக உள்ளது.

// esbuild.config.js
const esbuild = require('esbuild');
const vuePlugin = require('esbuild-plugin-vue3');

esbuild.build({
  entryPoints: ['src/main.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  plugins: [vuePlugin()],
}).catch(() => process.exit(1));

இந்த கட்டமைப்பு .vue கோப்புகளைக் கையாளவும் உங்கள் Vue.js பயன்பாட்டைத் தொகுக்கவும் esbuild-plugin-vue3 பிளகினைப் பயன்படுத்துகிறது.

ஒரு Node.js பயன்பாட்டை உருவாக்குதல்

ESBuild-ஐ Node.js பயன்பாடுகளைத் தொகுக்கவும் பயன்படுத்தலாம். இது ஒற்றை-கோப்பு இயக்கக்கூடியவைகளை உருவாக்க அல்லது உங்கள் பயன்பாட்டின் தொடக்க நேரத்தை மேம்படுத்த பயனுள்ளதாக இருக்கும்.

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  platform: 'node',
  format: 'cjs',
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

இந்த கட்டமைப்பு ESBuild-க்கு src/index.js கோப்பை Node.js தளத்திற்காக, CommonJS மாட்யூல் வடிவத்தைப் பயன்படுத்தித் தொகுக்கக் கூறுகிறது.

பல்வேறு பிராந்தியங்கள் மற்றும் சூழல்களில் ESBuild

ESBuild-இன் வேகமும் செயல்திறனும் உலகெங்கிலும் உள்ள வலை டெவலப்பர்களுக்கு ஒரு மதிப்புமிக்க கருவியாக அமைகிறது. வெவ்வேறு பிராந்தியங்கள் மற்றும் சூழல்களில் ESBuild-ஐப் பயன்படுத்துவதற்கான சில பரிசீலனைகள் இங்கே:

ESBuild-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

ESBuild-இலிருந்து சிறந்த பலனைப் பெற, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

முடிவுரை

ESBuild ஒரு சக்திவாய்ந்த மற்றும் திறமையான ஜாவாஸ்கிரிப்ட் பண்ட்லர் மற்றும் உருமாற்றி ஆகும், இது உங்கள் வலை மேம்பாட்டுப் பணிப்பாய்வை கணிசமாக மேம்படுத்தும். அதன் வேகம், எளிமை மற்றும் நவீன அம்சங்கள் அனைத்து அளவிலான புராஜெக்ட்களுக்கும் ஒரு சிறந்த தேர்வாக அமைகின்றன. இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உலகெங்கிலும் உள்ள பயனர்களுக்காக வேகமான, திறமையான மற்றும் பராமரிக்கக்கூடிய வலைப் பயன்பாடுகளை உருவாக்க நீங்கள் ESBuild-ஐப் பயன்படுத்தலாம்.

நீங்கள் ஒரு சிறிய வலைத்தளத்தை உருவாக்கினாலும் அல்லது ஒரு பெரிய நிறுவன பயன்பாட்டை உருவாக்கினாலும், ESBuild உங்கள் முன்முனை மேம்பாட்டு செயல்முறையை மேம்படுத்தவும் சிறந்த பயனர் அனுபவத்தை வழங்கவும் உதவும். அதன் வேகமும் செயல்திறனும் எந்தவொரு வலை டெவலப்பரின் கருவித்தொகுப்பிற்கும் ஒரு மதிப்புமிக்க சொத்தாக அமைகிறது. வலை மேம்பாட்டு நிலப்பரப்பு தொடர்ந்து বিকசிக்கும்போது, ESBuild ஜாவாஸ்கிரிப்ட் பண்ட்லிங் மற்றும் உருமாற்றத்திற்கான ஒரு முன்னணி தேர்வாக இருக்கும், டெவலப்பர்களுக்கு உலகளாவிய பார்வையாளர்களுக்காக வேகமான மற்றும் திறமையான வலைப் பயன்பாடுகளை உருவாக்க அதிகாரம் அளிக்கிறது.

ESBuild தொடர்ந்து বিকசித்து வருவதால், சமீபத்திய அம்சங்கள் மற்றும் மேம்படுத்தல்களைப் பயன்படுத்த சமூகப் பங்களிப்புகள் மற்றும் அதிகாரப்பூர்வ புதுப்பிப்புகளைக் கவனிக்கவும். தகவலறிந்து இருப்பதன் மூலமும் ESBuild சுற்றுச்சூழலில் தீவிரமாக பங்கேற்பதன் மூலமும், ESBuild வழங்கும் அதிநவீன செயல்திறன் மற்றும் திறன்களிலிருந்து உங்கள் வலை மேம்பாட்டுத் திட்டங்கள் பயனடைவதை உறுதிசெய்யலாம்.