অ্যাসেট বান্ডলিং (Vite)

Vite হল একটি অত্যাধুনিক বিল্ড টুল যা দ্রুত ডেভেলপমেন্ট পরিবেশ এবং উন্নত পারফরম্যান্সের জন্য ডিজাইন করা হয়েছে। এটি মূলত ফ্রন্টএন্ড ফ্রেমওয়ার্কের জন্য ব্যবহৃত হয়, যেমন Vue, React, এবং Laravel এর জন্য।

ইনস্টলেশন ও সেটআপ

নোড ইনস্টল করা: Vite ব্যবহার করতে হলে প্রথমে আপনার কম্পিউটারে Node.js ইনস্টল করতে হবে। Node.js অফিসিয়াল ওয়েবসাইট থেকে সর্বশেষ ভার্সন ডাউনলোড করুন এবং ইনস্টল করুন।

Vite এবং Laravel প্লাগইন ইনস্টল করা: নিচের কমান্ডগুলি ব্যবহার করে আপনার Laravel প্রজেক্টে Vite এবং এর প্লাগইন ইনস্টল করুন:

npm install --save-dev vite laravel-vite-plugin

Vite কনফিগার করা

Vite কনফিগার করতে vite.config.js ফাইল তৈরি করুন এবং নিম্নলিখিত কোড যোগ করুন:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
    ],
});

আপনার স্ক্রিপ্ট এবং স্টাইলগুলি লোড করা

আপনার resources/js/app.js এবং resources/css/app.css ফাইলগুলোতে স্ক্রিপ্ট এবং স্টাইল যুক্ত করুন।

import './bootstrap';
import '../css/app.css';

Vite চালানো

Vite ডেভেলপমেন্ট সার্ভার চালাতে নিচের কমান্ডটি ব্যবহার করুন:

npx vite

জাভাস্ক্রিপ্টের সাথে কাজ করা

Vite সহজেই JavaScript ফাইলগুলোকে পরিচালনা করে। আপনি ES মডিউল এবং বিভিন্ন ফ্রেমওয়ার্ক যেমন Vue এবং React ব্যবহার করতে পারেন।

অ্যালিয়াস: নিয়মিত রেফারেন্স করা ডিরেক্টরিগুলোর জন্য অ্যালিয়াস তৈরি করতে পারেন:

Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));

Vue, React, এবং Inertia

Vite সমর্থন করে Vue এবং React। উদাহরণস্বরূপ, Vue কম্পোনেন্ট ব্যবহার করতে:

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

URL প্রক্রিয়াকরণ

Vite স্বয়ংক্রিয়ভাবে URL গুলোকে আপডেট করে, এবং আপনি URL গুলোকে সহজে ম্যানিপুলেট করতে পারেন।

স্টাইলশীটের সাথে কাজ করা

CSS ফাইলগুলোকে app.css ফাইলে ইম্পোর্ট করুন:

@import './variables.css';

ব্লেড এবং রুটের সাথে কাজ করা

Laravel ব্লেড টেমপ্লেটের মধ্যে Vite স্ক্রিপ্ট যুক্ত করতে @vite ডাইরেকটিভ ব্যবহার করুন:

    @vite(['resources/css/app.css', 'resources/js/app.js'])

স্থির অ্যাসেট প্রক্রিয়াকরণ

Vite দিয়ে স্থির অ্যাসেট (যেমন ইমেজ) প্রক্রিয়াকরণ সহজ। এটি আপনাকে স্বয়ংক্রিয়ভাবে ইমেজ লোড করতে সাহায্য করবে।

সংরক্ষণ করার সময় রিফ্রেশ করা

Vite স্বয়ংক্রিয়ভাবে আপনার পরিবর্তনগুলো অনুসরণ করে এবং পরিবর্তন হলে পৃষ্ঠা রিফ্রেশ করে।

অ্যাসেট প্রিফেচিং

Vite আপনার অ্যাসেটগুলোকে প্রিফেচ করতে সক্ষম। এতে লোডিং সময় কমে যাবে।

কাস্টম বেস URL

আপনার অ্যাসেট যদি আলাদা ডোমেইনে থাকে তবে .env ফাইলে ASSET_URL সেট করুন:

ASSET_URL=https://cdn.example.com

পরিবেশ ভেরিয়েবল

.env ফাইলে VITE_ প্রিফিক্স সহ ভেরিয়েবল সংজ্ঞায়িত করতে পারেন। উদাহরণস্বরূপ:

VITE_API_URL=http://example.com/api

এবং JavaScript এ ব্যবহার করতে:

import.meta.env.VITE_API_URL

টেস্টে Vite নিষ্ক্রিয় করা

টেস্ট চলাকালীন Vite নিষ্ক্রিয় করতে withoutVite মেথড ব্যবহার করতে পারেন।

সার্ভার-সাইড রেন্ডারিং (SSR)

Vite দিয়ে SSR সেটআপ করা সহজ। একটি SSR এন্ট্রি পয়েন্ট তৈরি করুন এবং কনফিগার করুন।

স্ক্রিপ্ট এবং স্টাইল ট্যাগ অ্যাট্রিবিউট

আপনার ট্যাগগুলিতে অতিরিক্ত অ্যাট্রিবিউট যুক্ত করতে পারেন।

কন্টেন্ট সিকিউরিটি পলিসি (CSP) ননস

CSP নিরাপত্তার জন্য ননস যুক্ত করতে পারেন।

সাবরিসোর্স ইনটিগ্রিটি (SRI)

SRI ব্যবহার করে আপনার অ্যাসেটগুলির জন্য ইনটিগ্রিটি নিশ্চিত করতে পারেন।

অতিরিক্ত অ্যাট্রিবিউট

অতিরিক্ত অ্যাট্রিবিউট যুক্ত করতে useScriptTagAttributes এবং useStyleTagAttributes মেথড ব্যবহার করতে পারেন।

উন্নত কাস্টমাইজেশন

Vite-এর আচরণ কাস্টমাইজ করতে বিভিন্ন অপশন ব্যবহার করতে পারেন।

ডেভ সার্ভার URLs সংশোধন

কিছু প্লাগইন URLs সংশোধন করতে পারে, এবং আপনাকে vite.config.js এ সেগুলো ম্যানুয়ালি সংশোধন করতে হতে পারে।

এগুলো হলো Vite ব্যবহার করে Laravel অ্যাপ্লিকেশনে অ্যাসেট বান্ডলিংয়ের প্রক্রিয়া।