Какой лучший способ уменьшить размер моих файлов Javascript и CSS? - PullRequest
Новая
       62

Какой лучший способ уменьшить размер моих файлов Javascript и CSS?

19 голосов
/ 15 сентября 2008

При работе с большими и / или многими файлами Javascript и CSS, как лучше всего уменьшить размер файла?

Ответы [ 18 ]

18 голосов
/ 16 сентября 2008

В дополнение к использованию сжатия на стороне сервера, использование интеллектуального кодирования является наилучшим способом снижения затрат на пропускную способность. Вы всегда можете использовать такие инструменты, как Javascript Packer Дина Эдварда , но для CSS потратьте время на изучение Сокращения CSS . Например. Применение: 

background: #fff url(image.gif) no-repeat top left;

... вместо: 

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Также используйте каскадную природу CSS. Например, если вы знаете, что на вашем сайте будет использоваться одно семейство шрифтов, определите это для всех элементов в теге body следующим образом: 

body{font-family:arial;}

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

Включая Javascript 

<script type="text/javascript" src="/scripts/loginChecker.js"></script>

Включая CSS 

<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="All" />
7 голосов
/ 15 сентября 2008

Сокращение кажется одним из самых простых способов уменьшить Javascript.

Также может помочь включение zip на уровне веб-сервера.

6 голосов
/ 15 сентября 2008

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

Я думаю, вы обнаружите, что это проще и эффективнее.

Подробнее о приключениях Джеффа с ним .

3 голосов
/ 22 сентября 2008

Я удивлен, что никто не предложил взломать ваш код. Прямой ~ 50% экономии там!

3 голосов
/ 17 сентября 2008

Сжатие и минимизация (удаление пробелов) - это начало.

Дополнительно:

  1. Объедините все ваши JavaScript и CSS в одном файле. Таким образом, браузер может загрузить исходный код в одном запросе к серверу. Сделайте эту часть вашего процесса сборки.

  2. Включите кэширование на уровне веб-сервера с помощью заголовка cache-control http. Установите для срока действия большое значение (например, год), чтобы браузер загружал исходный код только один раз. Чтобы разрешить будущие изменения, включите номер версии в строку запроса, например:

<script src="my_js_file.js?1.2.0.1" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="my_css_file.css?3.1.0.926" />

2 голосов
/ 15 сентября 2008

См. Вопрос: Лучший компрессор JavaScript

В зависимости от того, собираетесь ли вы распаковывать файлы JavaScript, может измениться выбор компрессора. (В настоящее время Packer - не лучший выбор, если вы также собираетесь использовать gzip, но см. Приведенный выше вопрос для лучшего текущего ответа)

2 голосов
/ 12 декабря 2018

Вот онлайн-инструменты, с помощью которых вы можете сделать это: -

  • Для HTML, CSS или JS minifier вы можете использовать https://cssminifiers.com. На данный момент это лучший css minigier / un-minifier
  • Для сжатия вашего HTML, CSS или JS вы можете использовать http://www.htmlminifier.com/ онлайн-инструмент.
  • А также вы можете использовать http://javascript-minify.com онлайн-инструмент для минимизации JS.

Выше приведены инструменты, которые, как мне кажется, вам пригодятся.

1 голос
/ 16 сентября 2008

Shrinksafe может помочь: http://shrinksafe.dojotoolkit.org/ Мы используем его, и он делает довольно хорошую работу. Мы выполняем его из сборки ant для упаковки нашего веб-приложения.

1 голос
/ 15 сентября 2008

Dojo Shrinksafe - это компрессор Javascript, который использует настоящий интерпретатор JS, поэтому он не сломает ваш код. Другие могут хорошо работать, но Shrinksafe - хороший вариант для использования в скрипте сборки, поскольку вам не нужно повторно тестировать сжатый скрипт.

1 голос
/ 17 сентября 2008

Google содержит несколько предварительно сжатых файлов библиотеки JavaScript , которые вы можете включить в свой собственный сайт. Google не только обеспечивает пропускную способность для этого, но и на основе большинства алгоритмов кэширования файлов браузера, если пользователь уже загрузил файл с Google для другого сайта, ему не придется делать это снова для вашего сайта. Хороший небольшой бонус для некоторых библиотек 90K + JS.

Страница:
...