درس چهاردهم: گزینه‌های بیشتر Code Splitting

در قسمت قبل در رابطه با وابستگی های کدهایمان صحبت کردیم و یکی از راه کار های موثر در مدیریت آن ها را قابلیت code splitting در webpack می دانیم. در این جلسه می خواهم کمی بیشتر در رابطه با این قابلیت و گزینه های آن صحبت کنیم. در ابتدا باید فایل خود را به حالت اول (قبل از جلسه پیش) برگردانید؛ یعنی به فایل های kiwi.js و hello-world.js رفته و دستور import کتابخانه lodash و همچنین متد upperFirst را از هر دوی آن ها حذف کنید. به طور مثال کد شما در فایل kiwi.js باید بدین شکل باشد:

import Heading from './components/heading/heading.js';
import KiwiImage from './components/kiwi-image/kiwi-image.js';

const heading = new Heading();
heading.render('kiwi');
const kiwiImage = new KiwiImage();
kiwiImage.render();

فایل hello-world.js نیز به شکل زیر خواهد بود:

import HelloWorldButton from './components/hello-world-button/hello-world-button.js';
import Heading from './components/heading/heading.js';

const heading = new Heading();
heading.render('hello world');
const helloWorldButton = new HelloWorldButton();
helloWorldButton.render();

if (process.env.NODE_ENV === 'production') {
    console.log('Production mode');
} else if (process.env.NODE_ENV === 'development') {
    console.log('Development mode');
}

هدف من این است که در این جلسه با کتابخانه react تمرین کنیم بنابراین در فایل hello-world.js می گوییم:

import React from 'react';

این کد را در هر دو فایل hello-world.js و kiwi.js قرار دهید. در مرحله بعد باید react را نصب کنیم بنابراین:

npm install react --save

سپس یک بار webpack را اجرا می کنیم:

npm run build

اگر به خروجی webpack در ترمینال نگاه کنید متوجه خواهید شد که هیچ کتابخانه ای در کدهای نهایی ما نیست و فقط دو فایل kiwi.js و hello-world.js را داریم. به نظر شما چرا کتابخانه react را در فایل های خروجی نمی بینیم؟

باید بدانید که webpack فقط زمانی از وابستگی های کدهای ما خروجی می گیرد که حجم آن از 30 کیلوبایت بیشتر باشد (قبل از minify شدن) بنابراین با lodash این کار را انجام می دهد چرا که حجم lodash حدود 80 تا 90 کیلوبایت است اما react از 30 کیلوبایت بیشتر است بنابراین از آن خروجی گرفته نمی شود. حالا راه حل چیست؟ استفاده از code splitting گزینه های مختلفی دارد و یکی از این گزینه ها به ما اجازه می دهد که این حجم مشخص (30 کیلوبایت) را کمتر یا بیشتر کنیم. برای این کار به فایل webpack.production.config.js می رویم و گزینه جدیدی را در قسمت optimization تعریف می کنیم:

    mode: 'production',
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 10000
        }
    },

خصوصیت minSize در کد بالا به webpack می گوید که حداقل حجم را روی 10 کیلوبایت (10 هزار بایت) بگذارد تا بتوانیم از کتابخانه React نیز استفاده کنیم. البته گزینه دیگری را نیز در این قسمت مشخص خواهیم کرد:

    mode: 'production',
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 10000,
            automaticNameDelimiter: '_'
        }
    },

اگر یادتان باشد در جلسه قبل webpack نام فایل ها را به شکل vendor~kiwi~hello-world تولید می کرد و از کاراکتر ~ به عنوان delimiter (یعنی جداکننده) استفاده می کرد. از آنجایی که این کاراکتر کمی عجیب است، من در خصوصیت automaticNameDelimiter مشخص کرده ام که به جای این علامت از یک آندرلاین عادی استفاده شود. حالا دوباره دستور npm run build را اجرا کنید. حالا فایلی به نام vendors_hello-world_kiwi.24b4u1147a8472b.js خواهید دید (البته قسمت هش آن ممکن است برای شما فرق کند).

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

module.exports = {
  //...
  entry: {
    app: { import: './app.js', dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types']
  }
};

تا این قسمت از ویدیو تمرکز ما روی حالت production بوده است و هنوز چیزی در رابطه با حالت development نگفته ایم. برای شروع کار به webpack.dev.config.js بروید تا برخی از موارد آن را تغییر دهیم. در ابتدا باید به جای یک entry point دو عدد از آن را داشته باشیم چرا که برنامه ما دو صفحه دارد:

module.exports = {
    entry: {
        'hello-world': './src/hello-world.js',
        'kiwi': './src/kiwi.js'
    },

حالا باید به سراغ output برویم و آن را نیز تصحیح کنیم:

module.exports = {
    entry: {
        'hello-world': './src/hello-world.js',
        'kiwi': './src/kiwi.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './dist'),
        publicPath: ''
    },

اگر یادتان باشد این کار را برای این انجام می دهیم که نام همه فایل های ما bundle نشود تا تشخیص دادنشان از هم آسان تر شود. در مرحله بعد به HTMLWebpackPlugin می رویم تا آن را نیز تصحیح کنیم. در حال حاضر تنظیمات این پلاگین مخصوص یک پروژه تک صفحه ای (SPA) است و ما باید آن را به MPA تبدیل کنیم:

    plugins: [
        new CleanWebpackPlugin('dist'),
        new HtmlWebpackPlugin({
            filename: 'hello-world.html',
            chunks: ['hello-world'],
            title: 'Hello world',
            description: 'Hello world',
            template: 'src/page-template.hbs'
        }),
        new HtmlWebpackPlugin({
            filename: 'kiwi.html',
            chunks: ['kiwi'],
            title: 'Kiwi',
            description: 'Kiwi',
            template: 'src/page-template.hbs'
        })
    ]

همانطور که می بینید ابتدا filename را به آن اضافه کرده ام تا نام هر کدام از فایل های HTML خود را مشخص کرده باشیم. سپس chunks را داریم که آرایه ای از کدهای جاوا اسکریپت ما است بنابراین برای hello-world.html صفحه hello-world.js را تعریف کرده ایم و برای kiwi.html صفحه kiwi.js را قرار داده ایم. در نهایت مثل قبل مقدار template را تغییر می دهیم چرا که دیگر index.hbs ای وجود ندارد.

در اینجا دیگر نیازی به استخراج وابستگی ها به صورت یک bundle جداگانه نداریم. چرا؟ به دلیل اینکه این فایل پیکربندی متعلق به حالت توسعه است و همانطور که گفتم در حالت توسعه به فکر بهینه سازی نیستیم. بهینه سازی در حالت توسعه (البته از این نوع بهینه سازی ها) هیچ ارزشی ندارد چرا که به دنبال کش کردن چیزی نیستیم. حالا دستور npm run dev را اجرا کنید تا خروجی را مشاهده کنید. با اجرای این دستور مثل همیشه یک URL دریافت می کنید که شبیه به آدرس زیر است:

localhost:9000

اگر این آدرس را در مرورگر وارد کنید هیچ صفحه ای را نمی بینید. چرا؟ به دلیل اینکه برنامه ما دیگر SPA نیست و در URL اصلی ما هیچ صفحه ای وجود ندارد. برای مشاهده صفحات خودمان باید به یکی از دو آدرس زیر برویم:

localhost:9000/hello-world.html

localhost:9000/kiwi.html

امیدوارم از این قسمت نیز لذت برده باشید. در قسمت های بعدی می خواهم webpack را با انواع کتابخانه ها و فریم ورک های دیگر مانند Express و jQuery و Bootstrap و FontAwesome و ESLint ترکیب کنیم تا با نحوه انجام کار های مشابه آن کاملا آشنا شوید.