پرش به محتویات

کوچک‌سازی

تنها مورد کُندتر از دستکاری DOM، ارتباط با سرور است. به خصوص، برای کاربرانی که از تلفن‌های همراه با اینترنت کُند استفاده می‌کنند. بنابراین، می‌توانید تمام روز کد خود را با توابع Html.Lazy و Html.Keyed بهینه‌سازی کنید، اما اگر برنامه شما به آرامی بارگیری شود، هنوز هم احساس کُندی خواهد داشت!

یک راه عالی برای بهبود این است که بیت‌های کمتری ارسال کنید. برای نمونه، اگر یک فایل ۱۲۲ کیلوبایتی بتواند به یک فایل ۹ کیلوبایتی تبدیل شود، سریع‌تر بارگیری خواهد شد! با استفاده از تکنیک‌های زیر به چنین نتایجی می‌رسیم:

  • فرآیند کامپایل: کامپایلر Elm می‌تواند بهینه‌سازی‌هایی مانند حذف کد مرده و تغییر نام فیلدهای رکورد را انجام دهد. بنابراین، می‌تواند کدهای استفاده نشده را حذف و نام فیلدهای رکورد مانند userStatus را در کد خروجی جاوااسکریپت کوتاه کند.
  • فرآیند کوچک‌سازی. در دنیای جاوااسکریپت، ابزارهایی به نام "minifier" وجود دارند که مجموعه‌ای از تبدیل‌ها را انجام می‌دهند. آن‌ها متغیرها را کوتاه، خطوط اضافه را حذف و عبارت if را به عملگرهای سه‌گانه تبدیل می‌کنند. آن‌ها '\u0041' را به 'A' تبدیل می‌کنند. هر چیزی برای صرفه‌جویی در چند بیت!
  • فرآیند فشرده‌سازی. هنگامی که کد را به کوچک‌ترین اندازه ممکن رساندید، می‌توانید از یک الگوریتم فشرده‌سازی مانند gzip برای کوچک‌تر کردن بیشتر آن استفاده کنید. این الگوریتم، با کلمات کلیدی مانند function و return که نمی‌توانید در کد از آن‌ها خلاص شوید، عملکرد خوبی دارد.

Elm این کار را برای پروژه شما بسیار آسان می‌کند. نیازی به یک سیستم ساخت پیچیده نیست، فقط دو دستور ترمینال لازم است!

دستورالعمل

گام اول، کامپایل کردن برنامه با پرچم optimize-- است. این پرچم، کارهایی مانند کوتاه کردن نام فیلدهای رکورد را انجام می‌دهد.

گام دوم، کوچک‌سازی کد خروجی جاوااسکریپت است. من از ابزاری به نام uglifyjs استفاده می‌کنم، اما اگر بخواهید می‌توانید از ابزار دیگری استفاده کنید. نکته جالب در مورد uglifyjs پرچم‌های خاص آن است. این پرچم‌ها، بهینه‌سازی‌هایی را فعال می‌کنند که در کد عادی جاوااسکریپت غیر قابل اعتماد هستند، اما به لطف معماری Elm، برای ما کاملا ایمن هستند!

با ترکیب این دو گام، می‌توانیم src/Main.elm را با دو دستور ترمینال بهینه‌سازی کنیم:

elm make src/Main.elm --optimize --output=elm.js
uglifyjs elm.js --compress 'pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs --mangle --output elm.min.js

پس از این مرحله، یک فایل elm.js و یک فایل کوچک‌تر elm.min.js خواهید داشت!

نکته

uglifyjs دو بار فراخوانی می‌شود. اول با پرچم compress-- و دوم با پرچم mangle--. این کار ضروری است! در غیر این صورت، پرچم pure_funcs نادیده گرفته می‌شود.

اگر uglifyjs در دسترس نیست، می‌توانید آن را با دستور npm install uglify-js --global دانلود کنید. اگر npm در دسترس نیست، می‌توانید آن را با Node.js دریافت کنید.

اسکریپت

به خاطر سپردن تمام پرچم‌های uglifyjs دشوار است، بنابراین بهتر است یک اسکریپت بنویسیم که این کار را انجام دهد.

فرض کنید یک اسکریپت bash می‌خواهیم که فایل‌های elm.js و elm.min.js را تولید کند. اسکریپت optimize.sh را، در محیط مک اواس یا لینوکس، می‌توان به این شکل تعریف کرد:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
#!/bin/sh

set -e

js="elm.js"
min="elm.min.js"

elm make --optimize --output=$js "$@"

uglifyjs $js --compress 'pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs --mangle --output $min

echo "Compiled size:$(wc $js -c) bytes  ($js)"
echo "Minified size:$(wc $min -c) bytes  ($min)"
echo "Gzipped size: $(gzip $min -c | wc -c) bytes"

اکنون اگر دستور ./optimize.sh src/Main.elm را روی کد TodoMVC اجرا کنم، چیزی شبیه به خروجی زیر را می‌بینم:

Compiled size:  122297 bytes  (elm.js)
Minified size:   24123 bytes  (elm.min.js)
Gzipped size:     9148 bytes

خیلی جالب است! برای ارسال این برنامه به مرورگر وب، حدود ۹ کیلوبایت نیاز داریم!

دستورات مهم در اینجا elm و uglifyjs هستند که روی هر پلتفرمی کار می‌کنند، بنابراین نباید انجام چیزی مشابه در ویندوز کار دشواری باشد.

توصیه

پیشنهاد می‌کنم یک Browser.application بنویسید و به یک فایل جاوااسکریپت کامپایل کنید، همانطور که در اینجا مشاهده کردیم. این فایل هنگام بازدید اولیه کاربران دانلود و ذخیره‌سازی خواهد شد. همانطور که می‌توانید در این مقاله ببینید، Elm فایل‌های نسبتا کوچکی نسبت به رقبای محبوب خود ایجاد می‌کند. بنابراین، این استراتژی می‌تواند شما را به پیش ببرد.

یادداشت

به صورت نظری، ممکن است بتوانید فایل‌های حتی کوچکتری با Elm به دست آورید. در حال حاضر این امکان وجود ندارد، اما اگر روی برنامه Elm با بیش از ۵۰ هزار خط کد کار می‌کنید، دوست داریم درباره وضعیت شما به عنوان بخشی از یک مطالعه کاربری، بیشتر بدانیم. جزییات بیشتر در این نوشته موجود است!