enfasten
Initial Release
Enfasten هي أداة مكتوبة بلغة Go والتي تأخذ موقعًا ثابتًا، وتقيس الصور إلى عدد من الأحجام المختلفة، ثم تعيد كتابة كل HTML الخاص بك لاستخدام علامات الصور المستجيبة مع سمات srcset . يمكنه أيضًا تشغيل جميع صورك من خلال مُحسِّن مثل ImageOptim. وهذا يجعل موقعك الثابت أسرع في التحميل بالنسبة للأشخاص لأن متصفحهم يمكنه تحميل أفضل صورة لحجم الشاشة ودقتها، كما أنه متوافق مع المتصفحات القديمة.
على الرغم من أنها توفر قدرًا كبيرًا من النطاق الترددي، إلا أن القليل من المواقع تستخدم صورًا سريعة الاستجابة محسنة لأنها تتطلب إنشاء مسار مخصص لمعالجة الصور يجب أن يكون تدريجيًا لتحقيق أداء جيد. Enfasten يحل هذه المشكلة عن طريق القيام بكل شيء من أجلك!
لقد كتبت هذا لأنني كثيرًا ما أقوم بتضمين صور بأحجام غير معقولة على موقعي، مثل لقطة شاشة 2146x1258 من شاشة عرض عالية الدقة لكل بوصة. يقوم متصفح المستخدم بتنزيل هذه الصورة الضخمة ويقوم بتغيير حجمها على الفور لتناسب مدونتي التي يبلغ عرضها 660 بكسل. يعد هذا أمرًا سيئًا بشكل خاص عندما يزور موقعي الأشخاص الذين ليس لديهم شاشات عرض عالية النقاط لكل بوصة، ولكن ما زلت أريد أن تبدو الأشياء جميلة على شاشات العرض عالية النقاط لكل بوصة. حقيقة أنني لا أتذكر دائمًا تحسين صوري تجعل هذا الهدر أسوأ.
مع Enfasten، بغض النظر عن مولد الموقع الثابت الذي تستخدمه، يمكنك تشغيل موقعك من خلال Enfasten قبل النشر والحصول على توفير مجاني في النطاق الترددي!!
لدى Enfasten مجموعة من الميزات التي قد يستغرق تكرارها وقتًا طويلاً في برنامج نصي أو مهمة Gulp التي قمت بإعدادها بنفسك:
0.36s ، بالإضافة إلى أنه يعالج الصور الجديدة فقط عند الضرورة ويستخدم أداة تغيير حجم سريعة.1345px وطلبت من Enfasten إنشاء نسخة بعرض 1320px ، فلن يزعجك ذلك افتراضيًا. يمكنك تكوين عتبة "قريب بما فيه الكفاية" إذا كنت تريد ذلك. بالنسبة لملف .jpg ، يكون الحد الأدنى لذلك منفصلاً نظرًا لأن تغيير حجم ملفات JPEG غالبًا ما يؤدي إلى انخفاض الجودة بسبب إعادة التشفير، لذا فإن التغييرات الصغيرة في الحجم لا تستحق العناء حقًا.srcset إلى علامات الصور.img src النسبية.png و jpg ، ويتم ترك كل شيء آخر بمفرده.فيما يلي مثال لما يبدو عليه الإدخال والإخراج في Enfasten. يقوم بشكل أساسي بنسخ موقعك بالكامل من الإدخال إلى مجلد الإخراج، وإضافة مجلد صور يحتوي على إصدارات مجزأة ومحسنة ومُعدلة الحجم من صورك. ثم يعيد كتابة كل HTML الخاص بك للرجوع إليه. في الوقت الحالي، لا تزال الصور الأصلية منسوخة في حالة الإشارة إليها بواسطة RSS أو البرامج النصية أو CSS وما إلى ذلك.
test
├── _fastsite
...
│ ├── archive.html
│ ├── assets
│ │ ├── images
│ │ │ ├── 1-bing-4da5feb8-original.png
│ │ │ ├── 1-ddg-eb1bf143-original.png
│ │ │ ├── 1-google-6efffef5-original.png
│ │ │ ├── 1-samuru-93e3f1fc-660px.png
│ │ │ ├── 1-samuru-93e3f1fc-original.png
│ │ │ ├── 2-bing-078cbd23-original.png
│ │ │ ├── 2-ddg-68249286-original.png
│ │ │ ├── 2-google-c8456412-original.png
│ │ │ ├── 2-samuru-c6b17722-660px.png
│ │ │ ├── 2-samuru-c6b17722-original.png
│ │ │ ├── 3-google-caf9e182-original.png
│ │ │ ├── Beowulf-f3168a7d-660px.png
│ │ │ ├── Beowulf-f3168a7d-1320px.png
│ │ │ ├── Beowulf-f3168a7d-original.png
│ │ │ ├── canus-loot-6549ac19-original.jpg
│ │ │ ├── case-6b5e62c5-original.jpg
...
│ │ ├── postassets
...
│ │ │ ├── hackEnglish
│ │ │ │ ├── Beowulf.png
│ │ │ │ ├── Colours-of-Gatsby.png
│ │ │ │ ├── lotf-1.png
│ │ │ │ ├── lotf-2.png
│ │ │ │ └── markov-poster.png
...
│ │ │ ├── keyboardhw
│ │ │ │ ├── canus-loot.jpg
│ │ │ │ ├── case.jpg
...
│ │ │ ├── search
│ │ │ │ ├── 1-bing.png
│ │ │ │ ├── 1-ddg.png
│ │ │ │ ├── 1-google.png
│ │ │ │ ├── 1-samuru.png
│ │ │ │ ├── 2-bing.png
│ │ │ │ ├── 2-ddg.png
│ │ │ │ ├── 2-google.png
│ │ │ │ ├── 2-samuru.png
│ │ │ │ └── 3-google.png
...
├── _site
...
│ ├── archive.html
│ ├── assets
│ │ ├── postassets
...
│ │ │ ├── hackEnglish
│ │ │ │ ├── Beowulf.png
│ │ │ │ ├── Colours-of-Gatsby.png
│ │ │ │ ├── lotf-1.png
│ │ │ │ ├── lotf-2.png
│ │ │ │ └── markov-poster.png
...
│ │ │ ├── keyboardhw
│ │ │ │ ├── canus-loot.jpg
│ │ │ │ ├── case.jpg
...
│ │ │ ├── search
│ │ │ │ ├── 1-bing.png
│ │ │ │ ├── 1-ddg.png
│ │ │ │ ├── 1-google.png
│ │ │ │ ├── 1-samuru.png
│ │ │ │ ├── 2-bing.png
│ │ │ │ ├── 2-ddg.png
│ │ │ │ ├── 2-google.png
│ │ │ │ ├── 2-samuru.png
│ │ │ │ └── 3-google.png
...
├── enfasten.yml
└── enfasten_manifest.yml
في صفحة الإصدارات، يمكنك تنزيل الثنائيات الثابتة المعدة مسبقًا لنظامي التشغيل macOS وLinux والتي يمكنك وضعها في مكان ما في PATH الخاص بك.
إذا كان Go مثبتًا لديك، فمن المفترض أن تكون قادرًا على تشغيل:
$ go get github.com/trishume/enfasten ثم تأكد من وجود مجلد Go bin في PATH الخاص بك. وبدلاً من ذلك، يمكنك استنساخ الريبو وتشغيل go get ثم go install .
بعد تثبيت enfasten، قم بإنشاء ملف تكوين enfasten.yml في دليل موقعك الثابت (راجع قسم "التكوين" أدناه للحصول على مثال) ثم قم بتشغيل:
# Looks for an enfasten.yml file in the current directory
$ enfasten
# Looks for an enfasten.yml in the specified directory
$ enfasten -basepath my/site/folder
# Runs with culling, only do this once all your images are optimized
$ enfasten -cull يتم تكوين Enfasten من خلال ملف enfasten.yml . جميع المفاتيح اختيارية، إليك ملف تكوين أساسي جيد لموقع Jekyll بعرض ثابت يبلغ 660 بكسل:
# Jekyll by default outputs to _site, we'll put our result in _fastsite
inputfolder : _site
outputfolder : _fastsite
sizesattr : 660px
# Normal and retina resolutions:
widths : [660,1320]
# ImagOptim is a great optimizer for macOS, here's how to connect it:
optimcommand : ['open', '-a', 'ImageOptim']
# Sometimes there's files we don't want to bother processing and rewriting
blacklist :
- favicon.pngوإليك القائمة الكاملة لخيارات التكوين والقيم الافتراضية والوثائق الخاصة بما يفعلونه:
# The folder to take files and images from, relative to enfasten.yml
inputfolder : _site
# The folder to put output in, relative to enfasten.yml
outputfolder : _fastsite
# The folder to put all images in, relative to outputfolder
imagefolder : assets/images
# The file name for the manifest, relative to enfasten.yml If this is set to the
# empty string, no manifest will be used.
manifestfile : enfasten_manifest.yml
# The contents of the "sizes" attribute for responsive image tags, if this is
# the empty string the attribute will be omitted.
sizesattr : " "
# An array of strings specifying a command and arguments to run to optimize
# images. If non-null, Enfasten will append all the files needing optimization to
# this, run it and wait for it to finish.
optimcommand : null
# Whether to copy/transform non-image files into the output. Set this to false if
# you're only using Enfasten as an image resizing tool and parsing the generated
# manifest with your own script.
docopy : true
# The threshold of scaling above which Enfasten won't bother. In this case if the
# destination width is greater than 0.9 times the source width, that size won't be
# created.
scalethreshold : 0.9
# Same as above, but for .jpg files. Separate because re-encoding is bad.
jpgscalethreshold : 0.7
# The quality with which to re-encode JPG files, higher is larger but less lossy.
jpgquality : 90
# The array of widths to which Enfasten will try and downscale each image
widths : []
# An array of Go file glob patterns relative to inputfolder of files not to process
blacklist : [] ملاحظة: عند تغيير الخيارات التي تؤثر على معالجة الصور مثل widths و jpgquality و scalethreshold ، قد ترغب في حذف ملف البيان الخاص بك وربما أيضًا الصور التي تمت معالجتها نفسها. إذا لم تقم بذلك، فلن تتم إعادة معالجة الصور القديمة وسيتم تركها كما هي، إذا قمت بذلك، فسوف تقوم Enfasten بإعادة بناء أي صور مفقودة.
يمكن لـ Enfasten إخراج ملف enfasten_manifest.yml الذي يصف جميع الصور التي يعرفها والتي أنشأها. يمكنك حذف هذا الملف وفي أغلب الأحيان ستفعل Enfasten نفس الشيء الذي كانت ستفعله بخلاف ذلك، ولكن بشكل أبطأ. يوفر البيان الفوائد التالية:
1.3s على موقعي. باستخدام البيان، يتعين على Enfasten فقط تحميل الملفات وتجزئتها، الأمر الذي يستغرق حوالي 0.3 ثانية فقط على موقعي.كان هذا مشروعًا في عطلة نهاية الأسبوع، وهناك بعض الأشياء التي لم أتمكن من القيام بها بعد. إذا كنت تريد أن ترى هذه الميزات، وأنا أرحب بالمساهمات!
بدت وكأنها كلمة تعني "العمل بسرعة". يبدو أيضًا مثل Emscripten وهو مشروع آخر يدور حول جعل الويب سريعًا، على الرغم من أنه بطريقة مختلفة تمامًا وغير ذات صلة. في رأسي أتناوب بين نطقها "En-fast-en" و"En-fassen". لقد بحثت عنه أيضًا في Google ولم يبدو أنه اصطدم بأي شيء مهم جدًا.
تم إصدار هذا المشروع بموجب ترخيص Apache وكتبه تريستان هيوم
