لرزش درخت در JS – DEV Community

درک لرزش درخت در جاوا اسکریپت: راهنمای کامل

در دنیای توسعه وب مدرن، بهینه سازی عملکرد برنامه شما بسیار مهم است. یکی از تکنیک های قدرتمند برای دستیابی به بسته های جاوا اسکریپت کوچکتر و سریعتر است تکان دادن درخت. اگر با ابزارهای ساخت مانند Webpack یا Rollup کار کرده اید، احتمالاً این اصطلاح را شنیده اید. اما تکان دادن درخت دقیقاً چیست و چگونه کار می کند؟

در این راهنمای عمیق، به بررسی خواهیم پرداخت لرزش درخت در جاوا اسکریپت، اهمیت آن را درک کنید، نمونه های عملی را ببینید و یاد بگیرید که چگونه آن را به طور موثر پیاده سازی کنید. چه یک مبتدی یا یک توسعه دهنده با تجربه باشید، این مقاله برای کمک به درک مفاهیم اصلی و به کارگیری آنها در پروژه های خود طراحی شده است.

لرزش درخت چیست؟

تکان دادن درخت فرآیندی برای حذف کدهای استفاده نشده یا مرده از بسته های جاوا اسکریپت شما در طول فرآیند ساخت است. این اصطلاح از ایده “تکان دادن درخت” کد و حذف شاخه هایی (کد) که استفاده نمی شوند نشات می گیرد.

تکان دادن درخت در درجه اول با نحو ماژول ES6 (ES2015).که ساختار ایستا را برای واردات و صادرات فراهم می کند. این ماهیت ایستا به باندلرها اجازه می دهد تا تعیین کنند که کدام بخش از کد مورد استفاده قرار می گیرد و کدام قسمت را می توان با خیال راحت حذف کرد.

چرا تکان دادن درختان مهم است؟

تکان دادن درخت یک تکنیک بهینه سازی حیاتی است که می تواند به طور قابل توجهی عملکرد برنامه وب شما را بهبود بخشد. در اینجا برخی از مزایای کلیدی وجود دارد:

1. کاهش اندازه بسته نرم افزاری: با حذف کدهای استفاده نشده، بسته‌های جاوا اسکریپت شما کوچک‌تر می‌شوند که زمان بارگذاری را کاهش می‌دهد.
2. عملکرد بهبود یافته: بسته های کوچکتر به معنای کد کمتری برای تجزیه، کامپایل و اجرا در مرورگر است.
3. تجربه توسعه دهنده بهتر: پاک‌تر، پایگاه کد بهینه‌شده و اشکال‌زدایی آسان‌تر.
4. هزینه های پهنای باند کمتر: فایل های کوچکتر مصرف پهنای باند را کاهش می دهد که به ویژه برای کاربران تلفن همراه مفید است.

تکان دادن درخت چگونه کار می کند

تکان دادن درخت به تجزیه و تحلیل استاتیک واردات و صادرات ماژول ES6. کدی را که هست شناسایی می کند استفاده نشده است و در طول فرآیند ساخت آن را از بین می برد. برای فعال کردن تکان دادن درخت، شرایط زیر باید رعایت شود:

1. نحو ماژول ES6:
   تکان دادن درخت فقط با import و export. CommonJS (require/module.exports) پویا است و نمی توان آن را به صورت ایستا تحلیل کرد.

2. باندلر با تکان دادن درخت:
   ابزارهایی مانند Webpack، Rollup یا Parcel از لرزش درخت پشتیبانی می کنند.

3. پیکربندی مناسب:
   مطمئن شوید که باندلر شما برای حذف کدهای استفاده نشده به درستی پیکربندی شده است.

مثال: لرزش پایه درخت در عمل

بیایید نمونه ای از تکان دادن درختان را مرور کنیم.

مرحله 1: یک ماژول با چندین صادرات بنویسید

یک فایل ماژول ایجاد کنید، math.js:

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

مرحله 2: فقط آنچه را که نیاز دارید وارد کنید

در فایل دیگری، main.js، فقط از تابع add استفاده کنید:

// main.js
import { add } from './math.js';

console.log(add(5, 3)); // Output: 8

مرحله 3: کد خود را بسته بندی کنید

از باندلری مانند Webpack یا Rollup استفاده کنید. با فعال بودن لرزش درخت، توابع استفاده نشده (subtract، multiply، divide) از بسته نهایی حذف خواهد شد.

تکان دادن درخت با پک وب

مرحله 1: راه اندازی Webpack

Webpack و Babel را نصب کنید:

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env

مرحله 2: Webpack را پیکربندی کنید

ایجاد یک webpack.config.js فایل:

const path = require('path');

module.exports = {
  mode: 'production', // Enables optimizations like tree shaking
  entry: './

src/main.js', // Your main JavaScript file
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  optimization: {
    usedExports: true, // Tells Webpack to identify unused exports
  },
};

مرحله 3: Webpack را اجرا کنید

دستور ساخت را اجرا کنید:

npx webpack

Webpack به طور خودکار صادرات بلااستفاده مانند را حذف می کند subtract، multiply، و divide از بسته نهایی

لرزش درخت با رول آپ

Rollup یکی دیگر از باندلرهای محبوب است که به دلیل قابلیت های عالی در تکان دادن درختان شناخته شده است.

مرحله 1: Rollup را نصب کنید

Rollup و Babel را نصب کنید:

npm install --save-dev rollup @rollup/plugin-babel @rollup/plugin-node-resolve

مرحله 2: پیکربندی Rollup

ایجاد یک rollup.config.js فایل:

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es', // Keep the ES module format
  },
  plugins: [
    resolve(),
    babel({
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env'],
    }),
  ],
};

مرحله 3: Rollup را اجرا کنید

بیلد Rollup را اجرا کنید:

npx rollup -c

بسته نهایی صادرات بلااستفاده را مانند Webpack حذف می کند.

مشکلات رایج با تکان دادن درختان

لرزش درخت گاهی اوقات ممکن است به دلیل شیوه های کدگذاری خاص یا پیکربندی نادرست با شکست مواجه شود. در اینجا برخی از مشکلات رایج وجود دارد:

1. واردات دینامیک:
   اگر از واردات پویا استفاده می کنید (به عنوان مثال، require() یا dynamic import())، تکان دادن درخت کار نخواهد کرد زیرا باندلرها نمی توانند آنها را به صورت ایستا تجزیه و تحلیل کنند.

2. عوارض جانبی:
   برخی از ماژول ها فقط با وارد شدن، اقداماتی را انجام می دهند.
   به عنوان مثال:

   // module.js
   console.log('This is a side effect');
   export const example = () => {};
   

   بسته‌کننده‌ها به‌طور پیش‌فرض چنین وارداتی را حذف نمی‌کنند، مگر اینکه صریحاً آنها را به‌عنوان «بدون عوارض جانبی» در package.json:

   {
   "sideEffects": false
   }
   

3. فرمت ماژول نادرست:
   اطمینان حاصل کنید که وابستگی های شما از نحو ماژول ES6 پشتیبانی می کنند. اگر از CommonJS استفاده کنند، تکان دادن درخت کار نخواهد کرد.

4. کد مرده حذف نشد:
   بررسی کنید که آیا تنظیمات بهینه سازی باندلر شما (usedExports در Webpack یا افزونه های مناسب در Rollup) فعال هستند.

بهترین روش ها برای تکان دادن موثر درختان

• کد ماژولار را بنویسید: از ماژول های ES6 استفاده کنید (import و export) به جای CommonJS.

• علامت گذاری عوارض جانبی: ماژول های بدون عوارض جانبی را در فایل package.json خود اعلام کنید.

• ابزار مناسب را انتخاب کنید: از باندلرهایی مانند Rollup برای توسعه کتابخانه و Webpack برای برنامه ها استفاده کنید.

• وابستگی ها را بررسی کنید: تعداد کتابخانه های شخص ثالث را به حداقل برسانید، زیرا ممکن است شامل کدهای استفاده نشده باشد.

• حالت تولید را فعال کنید: تکان دادن درخت اغلب فقط در حالت تولید انجام می شود. مطمئن شوید که باندلر شما برای تولید تنظیم شده است.

نتیجه گیری

تکان دادن درخت یک تکنیک ضروری برای توسعه جاوا اسکریپت مدرن است. با حذف کدهای استفاده نشده، به بهینه سازی عملکرد برنامه شما کمک می کند و اندازه بسته ها را کاهش می دهد. با ابزارهایی مانند Webpack و Rollup، پیاده سازی درخت تکان دادن ساده است تا زمانی که بهترین شیوه ها را دنبال کنید و از ماژول های ES6 استفاده کنید.

درک نحوه عملکرد تکان دادن درختان و رفع محدودیت های آن، شما را در ساخت برنامه های کاربردی وب کارآمد و کارآمد تضمین می کند. همین امروز شروع به تکان دادن کد خود کنید و از ساخت‌های سریع‌تر و کم‌تر لذت ببرید!

ادامه مطلب