Минификация для Css / Js - правильный путь?

Question

В моем проекте каждая страница имеет несколько зависимых Javascript и Css. Во время разработки я просто поместил этот код прямо на страницу, но теперь я пытаюсь его очистить ...

похоже, что общий подход заключается в том, чтобы упаковать весь Javascript / CSS для приложения в два больших файла, которые минимизируются.

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

это то, что кого-то еще волнует, или есть какой-то способ решить эту проблему?

да, я думал о создании условной функции, поскольку мне все равно нужно условно запускать код для каждой страницы - хотя это начинает становиться немного хакерским, на мой взгляд.

также, стоит ли определять целую тонну Css, которая никогда не используется?

Answer 1

Самое большое, что вы можете сделать для пропускной способности, это убедиться, что ваш сервер сжимает выходные данные.Любой статический тип документа должен быть сжат (html, js, css и т.От 90 КБ до 30 КБ только из-за сжатого вывода, которое сервер отправляет в браузеры.

Если вы принимаете во внимание сжатие, то вам нужно создать несколько гигантских пользовательских JS-включений, чтобы действительно нужно дляразделите ваши JS-файлы.

Мне действительно нравится минимизировать и запутывать свой код, потому что я могу поместить свою документацию прямо в неминифицированную версию, а затем процесс минимизации удаляет все комментарии для производственной среды.

Answer 2

Обслуживание javascript / CSS одним хитом для приложения позволяет браузеру кэшировать все, что нужно для всех ваших страниц.Если стандартным вариантом использования вашего сайта является то, что пользователи будут оставаться и перемещаться некоторое время, то это хороший вариант для использования.

Если, однако, вы хотите, чтобы ваша целевая страница загружалась быстро, посколькувероятность того, что пользователь уйдет, рассмотрите возможность использования только CSS / javascript, необходимого для этой страницы.

С точки зрения снижения производительности большого файла CSS - не будет ничего, что было бы заметно.Все современные браузеры высоко оптимизированы для применения стилей.

Что касается вашего javascript - постарайтесь не использовать создание условных функций, создание условного пространства имен допустимо и необходимо, но ваши функции должны быть объявлены только в одном месте.

Answer 3

Если у вас много javascript-кода, вы можете взглянуть на асинхронную загрузку js-файлов.

Некоторые крупные проекты, такие как ExtJs или Qooxdoo, имеют встроенные загрузчики для загрузки только необходимого кода, но здесь есть много библиотек, которые упрощают это, и вы можете использовать их в своем проекте (например, head.js, LAB.js).

Благодаря им вы можете создать приложение, которое загружает только необходимые файлы, а не весь код javascript, который в случае больших приложений может быть тяжелым для браузера.

Answer 4

Один из подходов состоит в том, чтобы минимизировать и сжать весь общий JavaScript-код в один файл и разослать на каждой странице. Затем специфичный для страницы javascript можно сжать / минимизировать в свои собственные файлы (хотя я бы посоветовал поместить javascript любой очень распространенной страницы в основной файл javascript).

У меня всегда была привычка сжимать / минимизировать весь CSS в один файл, а не отдельные файлы для каждой страницы. Это связано с тем, что некоторые файлы, относящиеся к конкретной странице, могут быть очень маленькими, и в идеале мы должны делиться как можно большим количеством CSS на сайте.

Как упоминал Джаспер, самым важным было бы убедиться, что ваш сервер GZIP передает статические ресурсы (такие как javascript и css).