تگ هلپر Environment – استفاده پویا از CDN در کتابخانه‌ها – جلسه ۴۳

در این جلسه قصد داریم تا به معرفی تگ هلپر Environment بپردازیم و نحوه استفاده پویا از Content Delivery Network (CDN) را در کتابخانه‌ها در ASP.NET Core / 5.0 مورد مطالعه قرار دهیم. ما در جلسه ششم‌ام از این دوره آموزشی به صورت کامل در خصوص متغییرهای محیطی و انواع محیط کاربری صحبت نمودیم. در این جلسه قصد داریم تا با استفاده از Environment Tag Helper اقدام به بارگزاری نسخه مناسب کتابخانه مورد نظر خود نماییم.

تگ هلپر Environment

با استفاده از این تگ هلپر میتوانیم در فایل نما بسته به محیط جاری وب اپلیکیشن اقدام به بارگذاری کتابخانه‌های مورد نظر نماییم. همانگونه که قبلا گفته بودیم شما میتوانید محیط جاری وب اپلیکشن خود را در Properties/launchSettings.json فایل مشاهده نمایید. همچنین امکان تغییر آن در همان فایل نیز میسر میباشد. این تگ هلپر دارای دو خصوصیت include و exclude میباشد که برای تعیین محیط میتوانیم از آنها استفاده نماییم. همانگونه که ترجمه این دو خصوصیت مشخص میباشد include برای مشخص نمودن محیط های مورد نظر استفاده میشود. همچنین exclude برای استثنا کردن یک یا چند محیط مورد استفاده قرار میگیرد.

    <environment include="Development">
        <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
        <script src="~/lib/jquery/jquery.js"></script>
        <script src="~/lib/bootstrap/js/bootstrap.js"></script>
    </environment>
    <environment exclude="Development">
        <link href="~/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <script src="~/lib/jquery/jquery.min.js"></script>
        <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
    </environment>

همانگونه که در قطعه کد بالا مشاهده مینمایید، ما با استفاده از تگ هلپر Environment توانیستم نسخه غیرخلاصه (none minified) شده کتابخانه Bootstrap و JQuery را در محیط Develoment فراخوانی نماییم. همچنین در صورت بودن در محیطی غیر از Development نسخه خلاصه شده (minified) کتابخانه ها بارگذاری میگردد. اصولا نسخه‌های خلاصه شده دارای حجم کمتری بوده و به سرعت بارگذاری سایت کمک می‌نماید.

استفاده پویا از CDN در کتابخانه‌ها با امکان Fallback در ASP.NET

ابتدا باید به صورت مختصر به معرفی CDN بپرازیم. در واقع CDN به گروهی از سرورها گفته میشود که در موقیعت‌های جغرافیایی متفاوتی قراردارند که به صورت پیوسته با هم کار میکنند و وظیفه تحویل محتوای اینترنتی در بهینه‌ترین حالت ممکن را برعهده دارند. هدف استفاده از CDN بالا بردن قابلیت دسترسی و بهره‌وری میباشد. استفاده از CDN ها به پایدارای و بهره‌وری سایت کمک میکند و ما میتوانیم به جای فراخوانی کتابخانه‌ها از سرور محلی از CDN استفاده نماییم. CDN یا شبکه تحویل محتوا (بعضا شبکه توزیع محتوا هم گفته میشود) به مجموع سرورها با موقعیت جغرافایی مختلف گفته میشود که با توجه به درخواست، اقدام به پاسخگویی مناسب می‌کنند.

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

همچنین ما میتوانیم با استفاده از تگ هلپر asp-fallback-href اقدام به تعیین فایل کتابخانه جایگزین، در صورت بروز خطا در CDN نماییم. در این حالت در صورت عدم بارگزاری فایل از CDN نسخه جایگزین از مسیر تعیین شده در سرور محلی بارگزاری میگردد. توجه داشته باشید در صورت استفاده از این قابلیت مقدار تگ هلپر asp-suppress-fallback-integrity را برابر True قراردهید تا بررسی Integrity برای فایل جایگزین صورت نگیرد.

    <environment exclude="Development">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
              rel="stylesheet" 
              integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
              crossorigin="anonymous"
              asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" 
              asp-fallback-test-property="position"
              asp-fallback-test-value="absolute"
              asp-suppress-fallback-integrity="true" />
    </environment>

در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام، یوتیوب و آپارات دنبال کنید. ضمنا لیست کامل جلسات در این قسمت در دسترس شما میباشد و سورس کد این جلسه را میتوانید از GitHub ما دانلود نمایید.

تماشای ویدیو در یوتیوب ما

دانلود اسلایدهای آموزشی این جلسه از اینجا