01.02.2018 14:14
blognetology 17 17300 Источник
Глеб Летушов, редактор-фрилансер, адаптировал для блога Нетологии чеклист с Github от David Dias. Этот чеклист уже переводили, но так как на Хабре его нет, мы решили, что он пригодится. В чеклисте собран полный список элементов, которые необходимо проверить перед запуском и публикацией сайта.



Список основан на многолетнем опыте фронтенд-разработчиков, а дополнения собраны из общедоступных источников.

Содержание


  1. Head
  2. HTML
  3. Шрифты
  4. CSS
  5. Изображения
  6. JavaScript
  7. Безопасность
  8. Производительность
  9. Доступность
  10. SEO

Как пользоваться


Все пункты из чеклиста обязательны для большинства проектов, но иногда некоторые из них можно опустить. Например, в случае приложения администрирования (administration web app), RSS не пригодится.

Head


Список элементов из раздела Head HTML-документа можно найти на GitHub.

Мета-теги


  • Doctype: указывает на версию HTML-файла и находится в самом начале страницы. В Doctype должна быть указана пятая версия HTML.

<!-- Doctype HTML5 -->
<!doctype html>

Определение кодировки страницы HTML5 W3C.

Следующие три мета-тега (Charset, X-UA Compatible и Viewport) необходимо поместить в начало страницы сразу после doctype:

  • Charset: кодировка документа — UTF-8.

<!-- Задаем кодировку для страницы -->
<meta charset="utf-8">

  • X-UA-Compatible: управляет отображением страницы в Internet Explorer, поэтому его необходимо задать.

<!-- Сообщает Internet Explorer использовать самый новый движок для рендера -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<a href="https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx">

Определение отображения страниц для Internet Explorer.

  • Viewport: мета-тег Viewport задан правильно.

<!-- Задание тега Viewport для адаптивного отображения страницы -->
<meta name="viewport" content="width=device-width, initial-s
cale=1">

  • Title: тег Title используется на всех страницах. Google вычисляет длину заголовка, и обрезает в выдаче те, которые больше 472 пикселей. Оптимальная длина для заголовка — около 55 символов.

<!-- Задание тега Title -->
<title>Заголовок страницы короче 65 символов</title>

Тег Title? в HTML-документе ?—? MDN.
SERP Snippet Generator – создание описания сайта, которое Google покажет на странице выдачи результатов поиска (для англ. текста).

  • Description: описание сайта внутри тега является уникальным и не превышает 150-и символов. 

<!-- Тег Description -->
<meta name="description" content="Описание сайта содержит не более 150 символов">

Тег Description в ?HTML?-документе —?MDN.

  • Favicon: каждый фавикон корректно отображается. Если файл только один, favicon.ico, его нужно поместить в корневой каталог сайта. В таком случае ссылаться на него в HTML-документе необязательно. Однако ссылку на фавикон лучше указывать так, как на примере ниже. Оптимальный формат изображения — .png, а не .ico. Разрешение — 32?32 px.

<!-- Стандартный фавикон -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Рекомендованный формат фавикона -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

Favicon Generator — создание фавикона.
RealFaviconGenerator.
Гайд по фавиконам на GitHub.
Favicons, Touch Icons, Tile Icons, etc. Which Do You Need??—?CSS Tricks.
PNG favicons? — ?caniuse.

  • Apple Touch Icon: установлена иконка Apple touch icon для отображения на iOS-устройствах. (Разрешение файла должно быть 200x200 px, чтобы иконка хорошо отображалась на всех устройствах).

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">

Configuring Web Applications.

  • Windows Tiles указан следующим образом:

<!-- Microsoft Tiles -->Browser configuration schema reference
	
<meta name="msapplication-config" content="browserconfig.xml" />

  • Xml-разметка для файла browserconfig.xml выглядит так, как на примере:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>

Browser configuration schema reference.

  • Атрибут canonical: используйте rel=«canonical», чтобы избежать повторения контента.

<!-- Предотвращает дублирование контента на странице  -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

Use canonical URLs? — ?Search Console Help? —? Google Support.
5 common mistakes with rel=canonical ?—? Google Webmaster Blog.

HTML-теги


  • Атрибут lang: должен указывать язык текущей HTML-страницы.

<html lang="ru">

  • Direction: направление текста задано в специальном HTML-теге.

<html dir="rtl">

dir?—?HTML?—?MDN.

  • Переадресация на страницу с другим языком: значение атрибута rel установлено как alternate.

<link rel="alternate" href="https://es.example.com/" hreflang="es">

  • Условные комментарии для Internet Explorer: задаются, если необходимы. 

<!–[if IE]> Код для браузера Internet Explorer <![endif]–>

About conditional comments (Internet Explorer)? —? MSDN? — ?Microsoft.

  • RSS: если вы готовите к запуску блог или сайт со статьями, то не забудьте задать ссылку на RSS.
  • Инлайновый критический CSS: задан критический CSS — это стили, которые мгновенно загружаются во время открытия страницы. Обычно подключается до основного CSS-файлы с помощью тега Style.

Critical by Addy Osmani on Github — автоматизирует создание критического CSS.

  • Правильный вызов CSS: все CSS-файлы должны быть подключены до JavaScript в разделе Head. Исключение составляют JS-файлы, которые загружаются асинхронно и расположены в самом верху страницы.

Мета-теги для социальных сетей


На любой сайт желательно добавить основные мета-теги Facebook и Twitter. Остальные теги можно добавить при необходимости.

  • Facebook Open Graph: теги Facebook Open Graph (OG) проверены, настроены и отображают нужную информацию. Размер изображений должен быть хотя бы 600 x 315 px, а лучше 1200 x 630 px.

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">

A Guide to Sharing for Webmasters.
Проверить страницу с помощью валидатора Facebook OG.

  • Twitter Card: должен быть настроен как на примере ниже.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Описание контента короче 200 символов">
<meta name="twitter:image" content="https://example.com/image.jpg">

Getting started with cards ?—? Twitter Developers.
Проверить сайт с помощью валидатора Twitter card.

HTML


  • Семантические элементы HTML5: элементы HTML5 используются надлежащим образом (header, section, footer, main…).

HTML Reference — удобная инструкция по HTML.

  • Страницы ошибок: созданы страницы для 404 и 500-х ошибок. Страницы пятисотых ошибок должны включать в себя стили CSS (без внешних вызовов на сервере).
  • Noopener: если внешнюю ссылку необходимо открывать в новой вкладке с помощью target="_blank", то добавьте к ним атрибут rel=«noopener». Это предотвратит кражу данных пользователей, если страница другого сайта используется для фишинга. Для старых версий браузера Firefox задайте атрибут rel=«noopener noreferrer».

About rel=noopener.

  • Комментарии: перед публикацией страницы убедитесь, что удалили все комментарии и ненужный код.

Тестирование HTML-верстки


  • W3C-валидатор: все страницы сайта необходимо протестировать валидатором на сайте W3C. Он поможет найти незамеченные ошибки в HTML-коде.

W3C validator.

  • Оформление HTML-кода: чтобы поправить недочеты в коде и сократить его размер, воспользуйтесь специальным сервисом.

Dirty markup.

  • Проверка ссылок на странице: все ссылки рабочие и не выдают 404 ошибку при переходе.

W3C Link Checker.

Шрифты


  • Формат подключенного шрифта: форматы WOFF, WOFF2 and TTF поддерживаются всеми современными браузерами.

WOFF? —? Web Open Font Format ?— ?Caniuse.
WOFF 2.0 ?— ?Web Open Font Format ?— ?Caniuse.
TTF/OTF ?—? TrueType and OpenType font support.
Using @font-face ?— ?CSS-Tricks.

  • Вес шрифта: не превышает 2-х Мб.

CSS


Ознакомьтесь с руководством по CSS и гайдом по Sass, многие ведущие фронтенд-разработчики придерживаются правил, описанных в этих руководствах. Если возникнут дополнительные вопросы по CSS, ответы можно найти на CSS Reference.

  • Адаптивный дизайн: верстка на сайте адаптивная.
  • Печать с помощью CSS: таблицы печати настроены корректно для каждой страницы.
  • Препроцессоры: страница использует CSS-препроцессор (Sass предпочтительней).
  • Уникальные ID: идентификаторы на странице не повторяются.
  • Reset CSS: на странице подключены актуальные CSS-файлы для сброса стандартных стилей браузера (reset, normalize или reboot). Во многие CSS-фреймворки, например, в Bootstrap или Foundation, включен файл Normalize.css.

Reset.css.
Normalize.css.
Reboot.

  • JS-префиксы: все классы или id, используемые в JS, начинаются с js- и не используются для задания стилей через CSS.

<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">

  • Тег Style в HTML-документе: избегайте использования тега Style для задания стилей внутри HTML-страницы. В некоторых случая использование оправдано, например, для задания фона для слайдера.
  • Вендорные префиксы: вендорные префиксы CSS решают проблемы с совместимостью со старыми версиями браузеров.

-webkit —  Chrome и Safari,
-o —  Opera;
-ms —  Internet Explorer;
-moz —  Mozilla.

Autoprefixer CSS online.

Производительность


  • Объединение CSS-файлов: все файлы CSS объединены в один файл. (Не подходит для HTTP/2).
  • Оптимизация: все CSS-файлы сжаты.
  • CSS, блокирующие отображение сайта: убедитесь, что CSS-файлы не блокируют отображение контента, увеличивая время загрузки страницы.

loadCSS by filament group.
Example of preload CSS using loadCSS.

  • Неиспользуемый CSS-код: весь лишний код удален.

UnCSS Online. 
PurifyCSS.
Chrome DevTools Coverage.

Тестирование CSS


  • Stylelint: все CSS и SCSS файлы без ошибок.

stylelint, a CSS linter.
Sass guidelines.

  • Адаптивный дизайн: страницы сайта протестированы для разрешений: 320 px, 768 px, 1024 px (можно проверить и на других разрешениях в зависимости от цели сайта).
  • CSS Validator: найдены и исправлены все ошибки в CSS-файлах.

CSS Validator.

  • Браузеры: страницы сайта протестированы в популярных браузерах (Safari, Firefox, Chrome, Internet Explorer).
  • Мобильные браузеры: сайт проверен в мобильных браузерах (Chrome, Safari…).
  • OS: сайт протестирован в популярных операционных системах (Windows, Android, iOS, MacOS)
  • Pixel perfect: страница сверстана максимально точно. Конечно, не на 100%, но все же стоит придерживаться шаблона.

Pixel Perfect?—?Chrome Extension.

  • Направление чтения: если в проекте нужно поддержка не только языков, которые читаются слева направо (left-to-right — LTR), но и тех, которые читаются справа налево (right-to-left — RTL), то нужно проверить, поддерживает ли их сайт.

Building RTL-Aware Web Apps & Websites: Part 1?—?Mozilla Hacks.
Building RTL-Aware Web Apps & Websites: Part 2?—?Mozilla Hacks.

Изображения


Чтобы разобраться в оптимизации изображений, посмотрите книгу Essential Image Optimization (на англ.) от Эдди Озмани (Addy Osmani).

  • Оптимизация: Все изображения оптимизированы для отображения в браузере. Формат WebP можно использовать на важных страницах, например, на главной.

Imagemin.
Бесплатно оптимизировать изображение можно с помощью ImageOptim.

  • Picture/Srcset: использованы атрибуты picture/srcset для того, чтобы отображать наиболее подходящую картинку в данном разрешении (размере) экрана.

How to Build Responsive Images with srcset.

  • Retina: все изображения должны иметь 2x или 3x разрешения, чтобы хорошо отображаться на retina-дисплеях.
  • Спрайт-файл: маленькие картинки на сайте объединены в один спрайт-файл. Это большое изображение, состоящие из мелких картинок. Если это иконки, то их можно объединить в спрайт-картинку SVG формата.
  • Ширина и высота: если заранее известны нужные размеры изображения, то ширина и высота должна быть задана в атрибуте img.
  • Описание изображения: все картинки img должны быть описаны словами в атрибуте alt.

<img alt=’Описание изображения’>

Alt-texts: The Ultimate Guide.

  • Отложенная загрузка изображений: сайт настроен так, чтобы изображения загружались не сразу, а по мере пролистывания сайта.

JavaScript


  • JavaScript-код отдельными файлами: в HTML-документе не должно быть встроенного JS-кода. Лучше просто указать ссылку на файл с кодом.
  • Объединение: JavaScript-файлы объединены в один.
  • Оптимизация: все JavaScript-файлы минимизированы (можно добавить суффикс .min к названию).

Minify Resources (HTML, CSS, and JavaScript).

  • Безопасность JavaScript:

Guidelines for Developing Secure Applications Utilizing JavaScript.

  • Async или defer: JavaScript-файлы загружаются асинхронно при помощи атрибута async, или используют атрибут defer, который запускает скрипт только после полной загрузки страницы.

Remove Render-Blocking JavaScript.

  • Modernizr: если нужно добавить на сайт специфическую функцию, то можно использовать JS-библиотеку Modernizr. Она определяет, какие возможности HTML, CSS, JS поддерживает браузер пользователя.

Modernizr.

JavaScript-тестирование


  • ESLint: JavaSript-код проверен в ESLint, исправлены ошибки.

ESLint?—?The pluggable linting utility for JavaScript and JSX.

Безопасность


Проверьте сайт


securityheaders.io — проверяет HTTP-заголовки безопасности.
Observatory by Mozilla — указывает на слабые места в безопасности.
ASafaWeb ?—? Automated Security Analyser for ASP.NET Websites.

  • HTTPS: HTTPS используется не только на всех страницах, но и для внешних элементов — плагины, изображения.

Let’s Encrypt?—?Free SSL/TLS Certificates.
Free SSL Server Test.
Strict Transport Security.

  • HTTP Strict Transport Security (HSTS): настроен HSTS, принудительно активирующий соединение через HTTPS.

Check HSTS preload status and eligibility.
HTTP Strict Transport Security Cheat Sheet? —? OWASP.
Transport Layer Protection Cheat Sheet ?—? OWASP.

  • Межсайтовая подделка запроса (CSRF): чтобы предотвратить CSRF, вы должны быть уверены, что запросы на сервер происходят именно с вашего сайта или приложения.

Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet ?— ?OWASP.

  • Межсайтовый скриптинг (XSS): На странице или сайте не должно быть XSS-запросов.

XSS (Cross Site Scripting) Prevention Cheat Sheet? — ?OWASP.
DOM based XSS Prevention Cheat Sheet ?— ?OWASP.

  • Content Type Options: в Google Chrome и Internet Explorer предотвращает попытки mime-сниффинговых атак и подмены типов mime на отличные от тех, что были заявлены на сервере.

X-Content-Type-Options?—?Scott Helme.

  • X-Frame-Options (XFO): посетители сайта защищены от кликджекинга.

X-Frame-Options?—?Scott Helme.
RFC7034?—?HTTP Header Field X-Frame-Options.

Производительность


  • Вес страницы: каждая страница весит до 500 Кб.

Website Page Analysis.
Size Limit: Make the Web lighter.

  • Оптимизация: HTML-код минимизирован.

W3C Validator.

  • Отложенная загрузка элементов (Lazy loading): изображения, скрипты и CSS-стили загружаются по мере пролистывания страницы, чтобы уменьшить время отзыва сайта.
  • Размер Cookies: если вы используете cookies, то проверьте, чтобы размер каждого файла был бы не более 4096 байтов, а общее количество файлов не превышало 20.

Cookie specification: RFC 6265.
Cookies.
Browser Cookie Limits.

  • Компоненты сторонних разработчиков: сторонние фреймы iframe и внешние скрипты JS (например, кнопки «поделиться») заменены на статические элементы, где это возможно. Это ограничивает количество вызовов внешних API и сохраняет в тайне от сторонних сервисов действия пользователей на вашем сайте.

Simple sharing buttons generator.

Запросы


Explanation of the following techniques.

  • DNS-prefetch: время загрузки DNS других сайтов сокращается благодаря использованию предсказывающих страниц с dns-prefetch.

<link rel="dns-prefetch" href="https://example.com">

  • Preconnection: поиск DNS, установка TCP и TLS-связи с сервисами, которые скоро понадобятся, выполняется заранее во время простоя с помощью preconnect.

<link rel="preconnect" href="https://example.com">

  • Prefetching: ресурсы, которые скоро понадобятся (например, изображения при ленивой загрузке) загружаются браузером заранее и помещаются в кэш с помощью prefetch.

<link rel="prefetch" href="image.png">

  • Preloading: ресурсы, которые будут нужны на текущей странице (например, скрипты, находящиеся в конце тега Body), можно загрузить с помощью
    preload.

<link rel="preload" href="app.js">

Difference between prefetch and preload.

Тестирование производительности


  • Google PageSpeed: все страницы сайта (не только домашняя) были протестированы в Google PageSpeed и набрали по крайней мере 90 очков из 100.

Google PageSpeed.
Test your mobile speed with Google.
WebPagetest?—?Website Performance and Optimization Test.

Доступность


Посмотрите плейлист A11ycasts с Rob Dodson (англ.).

  • Progressive enhancement: Большинство функций сайта, например, навигация или поиск, должны работать с выключенным JavaScript.

Enable / Disable JavaScript in Chrome Developer Tools.

  • Цветовой контраст: цветовой контраст сайта соответствует стандарту WCAG AA (для мобильных — AAA).

Contrast ratio.

Заголовки


  • H1: на всех страницах присутствует заголовок H1, который отличается от названия сайта, заданного в title.
  • Заголовки: заголовки использованы в правильном порядке — от H1 до H6.

Why headings and landmarks are so important?—?A11ycasts #18.

Landmarks


  • Role banner: для тега Header указан атрибут role=«banner».
  • Role navigation: для Nav — атрибут role=«navigation».
  • Role main: для Main указан атрибут role=«main».

Using ARIA landmarks to identify regions of a page.

Семантика


  • Использованы разные типы input-ов на HTML5: это важно для мобильных устройств, потому что для разных типов вводимых данных они показывают по-разному выглядящие клавиатуры.

Mobile Input Types.

Формы


  • Label: связан с каждым отдельным input-ом в элементах формы. Если label не может быть отображен, нужно использовать aria-label.

Using the aria-label attribute? — ?MDN.

Тестирование доступности


  • Стандарты тестирования доступности: чтобы протестировать страницу, используйте WAVE.

Wave testing.

  • Навигация с помощью клавиатуры: проверьте свой сайт, пользуясь только клавиатурой. Все элементы на сайте должны быть доступны для использования.
  • Скрин-ридер: все страницы сайта должны работать в программах для чтения информации (VoiceOver, ChromeVox, NVDA или Lynx).
  • Фокус: если фокус для элементов отключен, он заменяется видимым в CSS состоянием.

Managing Focus? —? A11ycasts #22.

SEO


  • Google Analytics: Google Analytics установлен и корректно работает.
  • Заголовки: текст в заголовках помогает понимать информацию на текущей странице.
  • sitemap.xml: создана карта сайта sitemap.xml и отправлена в Google Search Console (Google Webmaster Tools).
  • robots.txt: файл robots.txt не блокирует страницы сайта.

Проверить robots.txt с помощью Google Robots Testing Tool.

  • Структурированные данные: помогают поисковым роботам понимать информацию на страницах. Поэтому страницы должны быть протестированы и не содержать ошибок.

Introduction to Structured Data?—?Search?—?Google Developers.
Проверьте сайт с помощью Structured Data Testing Tool.
Полный список классов для структурирования данных можно найти на Schema.org.

  • HTML-карта сайта: работает и доступна в футере сайта.

Sitemap guidelines?—?Google Support.
Sitemap generator.

От редакции


Онлайн-курсы Нетологии по теме:

Комментарии (17)


  1. Spunreal
    01.02.2018 17:37
    #10648092
    +1

    В Разделе SEO почти все пункты не имеют никакого отношения к фронтендерам.
    — Карту сайта генерирует сервер — бекенд. Проверять её задача сеошника.
    — Текст в заголовках одобряет сеошник или руководитель, но никак не фронтендер
    — robots.txt так же проверяется сеошниками и/или руководителем
    — HTML-карта сайта — разрабатывается на беке. Фронтендер её только украшает. Т.е. выполняет свою часть работы.

    Тут только разве что структурированные данные можно засунуть в чеклист фронтендера.


  1. totorialman
    02.02.2018 08:25
    #10648986

    Мне статья понравилась, для начинающих здесь все есть. Спасибо!


  1. ambientos
    02.02.2018 10:44
    #10649130

    — Привет, потомки! Как вы там? Уже высадились на Марс?

    X-UA-Compatible: управляет отображением страницы в Internet Explorer, поэтому его необходимо задать.
    Условные комментарии для Internet Explorer


  1. Alexanqp
    02.02.2018 11:06
    #10649168

    Спасибо, доступно и лаконично )


  1. superconductor
    02.02.2018 11:07
    #10649170

    В таком виде этот чеклист скорее вреден, чем полезен. Если он именно как чеклист опытному фронтендеру, то примеры лишние.
    Если он для новичков, то по каждому пункту слишком мало объяснений — почему, какие есть опции. Новички в результате скорее всего решат, что приведенные фрагменты нужно использовать всегда и везде.
    Не удивлюсь, кстати, если после прочтения части про head найдутся люди, пытающиеся в head вставить подряд 2 тега html с атрибутами lang и dir соответственно. Ну а что, в статье же написано.


  1. Serjonka
    02.02.2018 13:34
    #10649558

    Вопрос: Почему Sass? Нет ни какого пояснения Вроде бы best practice это — PostCss.
    И когда вставляешь в тег , role=«navigation», то в W3C Validator указывает тебе на ошибку


    1. psFitz
      02.02.2018 16:27
      #10650022

      sass — один из самых мощных препроцессоров и самый популярный, все знают sass, но не все знают postcss, есть люди которые любят написать на postcss свой sass, никогда этого не понимал, больше велосипедом попахивает. Многие используют sass, а после него postcss, автопрефиксеры итд, что, для меня кажется лучшим вариантом.


      1. bjornd
        02.02.2018 17:06
        #10650114

        Изобретают велосипеды как раз разработчики SASS, а создатели postcss реализуют поддержку стандартов CSS которые еще отсутствуют в браузерах: nesting, custom media queries, variables и многое другое, что есть в nextcss. Все это со стандартизованным синтаксисом.


        1. psFitz
          03.02.2018 15:57
          #10651360
          +1

          sass вышел задолго до postcss, nextcss и всего остального, так что он больше стандарт чем новый css, который непонятно когда будет. Пока этот синтаксис начнет поддерживаться браузерами, проекты которые пишутся сейчас перепишутся 100500 раз или забудутся.


  1. irtek
    02.02.2018 13:34
    #10649560

    Почему вы категоризируете только как профессионалов и как новичков, а где же средний класс? ) Кто еще не все знает и стремится, но кто уже и не новичок. Ссылки помогают глубже доизучить.

    «Новички в результате скорее всего решат, что приведенные фрагменты нужно использовать всегда и везде».
    Это не новичок, а нехороший специалист, который бездумно использует информацию. В статье предложили и ссылки есть, можно подробнее углубиться. А чек-лист каждый фронтэндер, наверное, сам себе составляет.

    Статья отличная, спасибо.


  1. game802
    02.02.2018 13:34
    #10649562

    В разделе JavaScript указано, что нужно объединять все файлы в один js файл.

    Объединение: JavaScript-файлы объединены в один.

    На сколько правильно это делать? Когда-то давно я так делал, но отказался по причине того, что если у человека есть кэшированная js-ка какой-нибудь библиотеки (к примеру: jQuery, который до сих пор используется на огромном количестве сайтов)


    1. irtek
      02.02.2018 13:41
      #10649594

      Такое произойдет, если название файла одинаковое в пути при загрузке, а оно обычно одинаковое /jquery.min.js или /jquery.js или /vendors.js как тоже нередкое именование.
      Добавьте параметр в конце при загрузке, например, vendors.js?02-02-2018 или jquery.js?123 или вообще файл назовите уникально «erdhs6shdbx.js» и тогда браузер гарантированно скачает и закэширует вашу версию js.

      Кстати, часто вижу, на нормальных сайтах на React/Angular и прочих кучи js файлов грузятся без объединения. Интересно, почему не объединяют.


      1. game802
        02.02.2018 14:18
        #10649726

        P.S. извините, я случайно нажал «Отправить» (сам не поняв того, как так получилось), так и не дописав смысла до самого конца.
        __
        Да, я как раз хотел подметить по поводу пути к файлу/ам: многие люди используют cdn'ы, поэтому вероятность использования кэшированной версии гораздо выше варианта с объединенными js'ками. Но, как мне кажется, у каждого подхода есть свои плюсы и минусы, поэтому я не могу твердо и четко говорить о том, какой подход наиболее выигрышный.


      1. kovalevsky
        05.02.2018 12:15
        #10653344

        ну в Ангуляре гораздо профитнее не объеденять, т.к. там из коробки есть lazy-loading модулей и весь код догружается по-необходимости


  1. turone
    02.02.2018 16:16
    #10650004

    Еще бы документ с чекбоксами… Но статья отличная! Добавлю в закладки.


    1. KinsleR
      02.02.2018 16:44
      #10650040

      так: вот


  1. argonavtt
    02.02.2018 21:59
    #10650638

    Больше смахивает на «Чеклист верстальщика»