Овај чланак ће вас упознати са темом познатом под називом Минифи Ин а у току вам такође дају детаљне практичне демонстрације. Следећи смерници ће бити обрађени у овом чланку,
- Шта је минификација?
- Зашто је потребна минификација?
- Како минификујете ЦСС, ЈС, ХТМЛ код?
- Када то треба да урадите?
- Предности минификације?
Као што нам само име сугерише, минификација се односи на минимизирање величине датотеке. У основи кода, имамо слободу да умањимо ХТМЛ, ЦСС или Јавасцрипт датотеке. Овде ћемо разговарати о минификовању ЦСС датотеке.
Када програмер кодира, он / она осигурава да је код у најбоље читљивом формату како би поједноставио сваки поступак даљих промена. Дакле, имена променљивих су у формату који је лако разумљив и заузимају пуно знакова. Затим додају и добру количину празног размака како би био довољно читљив.
Али у целом процесу, ми тежимо да олабавимо низове да се величина наше датотеке повећава, што заузврат повећава време учитавања веб странице. Нарочито код веб локација које имају велики део функционалности и додатака, дужа база кода само погоршава веб локацију.
Гоогле ионако има ограничени формат за рангирање веб локација на страници за претрагу на основу оптималног корисничког искуства које веб локације пружају. Што се ваша веб локација боље учитава, то се ваша веб локација боље рангира на страници за претрагу.
Са толико тога што је уложено, не желите да ваши корисници трпе због лошег времена учитавања веб локације и пређу на следећу. Стога је умањење кода изузетно важно.
У ствари, док правимо веб страницу, знамо шта се састоји од максималне основе кода?
Све је у ЦСС-у, ХТМЛ-у и Јавасцрипту. Данашње такмичење да ваша веб страница изгледа визуелно привлачно наглашава ЦСС датотеку и без да схватамо да нашу веб страницу користимо тешким кодом.
Улази, минификација ..
Настављамо са овим чланком о Минифи ЦСС
Шта је минификација ?
Минификација вам омогућава да уклоните код на минималну величину датотеке, што не утиче на код, а смањује величину датотеке. У том процесу можете уклонити непотребне размаке и знакове који нигде не утичу на оригиналност ваше веб странице. Неколико ствари које треба избегавати из кода су:
- Размаци
- Нова линија знакова
- Блок граничници
- Коментари
- Скраћивање имена променљивих
Ови фактори нису укључени у то да ваша веб локација ради, већ само отежавају датотеку и повећавају време учитавања веб странице.
Читљивост кода је потпуно искључива од онога што машина разуме. Веб прегледачу није потребан додатни размак између знакова да би га разумео и покренуо. Покушајте да их смањите и умањите ЦСС и ХТМЛ код.
Узмимо пример:
#миЦонтент {фонт-фамили: Монтсеррат} #миЦонтент {фонт-сизе: 90%}Умањи мој ЦСС
Готово разлика од 48% у оригиналној и умањеној датотеци. Смањено за 178 бајтова. После Минификације
#миЦонтент {фонт-фамили: Ариалфонт-сизе: 90%}Здраво Свете!
Настављамо са овим чланком о Минифи ЦСС
Зашто је минификација потребно?
Да бисте побољшали време учитавања веб странице. Нико не воли да чека на учитавање веб странице према погодности. Са толико доступних опција, људи имају тенденцију да пређу на другу. Дакле, боље је смањити величину датотеке.
Настављамо са овим чланком о Минифи ЦСС
Како сте умањити ЦСС, ЈС, ХТМЛ код?
Да бисте је умањили, на мрежи је доступно мноштво алата који вам могу помоћи да смањите базу кода. Такође се можете одлучити да то радите ручно, али за већу базу кода препоручљиво је користити било који од следећих алата за умањивање ЦСС датотеке:
ЦССминифиер.цом: Изузетно једноставан алат за употребу. Само копирајте код на левој страни, генеришите минификовану датотеку и преузмите је. Смањена датотека имаће екстензију .мин.
Ваша минификована ЦСС датотека имаће екстензију демо.мин.цсс.
Смаллсеотоолс.цом: Или копирајте свој код или отпремите своју кодну датотеку. Умањит ће ваш код и омогућити вам да га копирате или преузмете.
Аутоптимизуј: Ово је додатак који можете додати својим ВордПресс алаткама. Као додатак, можете одабрати да умањите ЦСС код тада и тамо.
Програмеру је лакше да разуме када је датотека умањена, а када не. Смањена датотека имаће екстензију .мин.
Настављамо са овим чланком о Минифи ЦСС
Када то треба да урадите?
Минификацију треба извршити пре свега када напишете код и морате га послати на сервер за одговор. Једном када се датотеке минификују, минификоване верзије се користе за дистрибуцију корисницима.
Предности минификација ?
Смањење величине датотеке: Уклањањем додатних размака, смањењем имена променљивих и уклањањем коментара, величина датотеке се готово смањује за 30-60%. Брже учитавање: Са мање података за слање преко мреже, веб локација се учитава брже него раније. Нижи трошак пропусног опсега: Када се уклоне непотребни подаци, потребан је пропусни опсег, па тако и трошак.
Ствари које треба запамтити:
Чак и пре покушаја минификације, уверите се да код не прелази ограничења. Ток не би требало да буде поремећен, а функционалност би требало да остане без лица. Морате да проверите да ли се и након минификације ваш код покреће на сличан начин.
У ствари, као најбољу праксу увек можете држати образац спреман. Унесите промене у уграђени образац што ће вам уштедети великодушно време.
Да ли је слично компресији?
Па, снажно НЕ. минификација се разликује од компресије. Компресија чини да се минификована датотека више смањује, али не утиче на стил и структуру кода.
Датотека се умањује, а затим компресује у зип и шаље мрежом када клијент затражи приступ веб локацији. Датотека се затим некомпримује и користи.
Примери:
Пре минификације:
Портфељ
- Кућа
Након минификације:
Портфељ
- Кућа
Код је дефинитивно теже прочитати и разумети за човека, али је подједнако прихватљив и за машину да га прикаже. Машину заправо није брига за лепоту кода и размаке, она разуме суштину и ради у складу с тим.
Довољно сте импресионирани техником минификације?
Затим покушајте сами. Смањите терет датотеке и пустите да ваша веб страница слободно тече за све кориснике!
Ово нас доводи до краја овог чланка о Минифи Ин ЦСС.
Ако сте заинтересовани да сазнате више о веб-развоју, погледајте од Едуреке. Обука за сертификацију за веб развој ће вам помоћи да научите како да креирате импресивне веб локације помоћу ХТМЛ5, ЦСС3, Твиттер Боотстрап 3, јКуери и Гоогле АПИ-ја и примените их на Амазон Симпле Стораге Сервице (С3).
примена хасхмапа у примеру Јава
Ако сте и даље заинтересовани Ако имате било какво питање, можете га објавити у одељку за коментаре овог блога „Минифи Ин ЦСС“ и јавићемо вам се што је пре могуће.