Минификация и сжатие JavaScript

Я пытаюсь понять процессы минификации и сжатия JavaScript, и у меня есть несколько вопросов по ним:

  1. Поскольку минификация затрудняет отладку кода, возможно ли выполнить разминирование по запросу на стороне клиента, чтобы скрыть случаи, когда вам действительно нужно отлаживать и исследовать что-то на веб-сайте?
  2. Я помню, как где-то читал, что можно включить сжатие всех ресурсов (например, изображений, CSS, JavaScript и т. Д.), Установив некоторые параметры на веб-сервере Apache. Есть ли разница в сжатии JavaScript, выполняемом на уровне Apache, и сжатии с использованием таких инструментов, как YUI Compressor?

Может кто-нибудь помочь мне узнать выше?

Типичные случаи, когда мне действительно нужно было бы разминировать мои файлы JavaScript, - это, допустим, ошибка JavaScript произошла в строке №. X. С минифицированными файлами было бы очень сложно узнать, какой блок кода вызвал эту ошибку в производстве, поскольку все строки заключены в минифицированный файл. Как вы, ребята, исследуете и отлаживаете в таких обстоятельствах? Другой пользователь также упомянул эту проблему отладки в Сбой упакованного / минимизированного javascript IE6 - как отлаживать? вопросы (правда, немного специфичные для IE6).


javascript http-compression minify
person peakit    schedule 28.12.2011    source источник

Ответы (6)


arrow_upward
2
arrow_downward

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

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

Я помню, как где-то читал, что можно включить сжатие всех ресурсов (например, изображений, css, javascript и т. Д.), Установив некоторые параметры на веб-сервере Apache.

Да, это называется сжатием gzip. Это не уникально для apache, но вам нужно будет настроить свой сервер, чтобы включить его.

Есть ли разница в сжатии javascript на уровне Apache и сжатии с использованием таких инструментов, как YUI Compressor?

да. Компрессор YUI - это минификатор - на выходе получается правильный javascript. Сжатие на стороне сервера более аналогично архивированию файла - браузер должен его декодировать, прежде чем его можно будет использовать. Их совместное использование даст наименьший размер файла.

person Community    schedule 28.12.2011
comment
вы ответили на все мои вопросы, поэтому приняли это как ответ. Спасибо! - person peakit; 29.12.2011

arrow_upward
9
arrow_downward

Вы не должны отлаживать минифицированный код. В идеале процесс разработки выглядит так:

  1. Вы создаете и отлаживаете сайт локально. У вас есть полные версии javascripts, таблиц стилей и всего остального.

  2. Вы развертываете версию на производственной машине. Вы минимизируете и архивируете копию своих активов и отправляете ее на сервер. Ваша локальная копия для разработки останется нетронутой.

  3. Если в производстве есть ошибка, вы изменяете свою локальную версию, уменьшаете, сжимаете, загружаете.

Повторяйте до ПРИБЫЛИ

person Sergio Tulentsev    schedule 28.12.2011
comment
@Sergei Tulentsev, я дал более подробную информацию об отладке, о которой я говорил, в разделе EDIT моего вопроса выше. Не могли бы вы взглянуть на это и сообщить мне, как это сделать? Спасибо. - person peakit; 28.12.2011
comment
Я бы сделал одно из следующего: 1) где-нибудь реплицировал производственную среду и попытался воспроизвести проблему с полными javascripts. 2) скопируйте полные javascripts в продакшн и отобразите их, когда вы войдете в систему (и продолжайте использовать уменьшенную версию для всех остальных) - person Sergio Tulentsev; 28.12.2011

arrow_upward
4
arrow_downward

Инструменты разработчика Chrome могут де-запутать (и разминировать) код javascript, если вы хотите отладить производственный код (полезно при попытке реплицировать ошибку в живой среде, которую вы, возможно, не видите в dev)

введите описание изображения здесь введите описание изображения здесь

person JaredMcAteer    schedule 28.12.2011

arrow_upward
3
arrow_downward

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

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

И да, Apache и даже IIS могут автоматически сжимать сценарии и изображения с помощью gzip.

person Adam Rackis    schedule 28.12.2011
comment
Мне нравится, как современный Rails обрабатывает ресурсы. Он сжимает их и ставит им временные метки. Больше не нужно сжигать ЦП на производстве. Также он удобен для кеширования. - person Sergio Tulentsev; 28.12.2011
comment
В другой жизни я думаю, что был разработчиком RoR ... в этой жизни это MVC, который в основном представляет собой Rails с C # ... могло быть и хуже ... :) - person Adam Rackis; 28.12.2011
comment
@Adam, проверьте один из ответов от 'OriginalSyn', похоже, что Chrome может помочь вам частично разминировать файлы javascript - person peakit; 28.12.2011
comment
@peakit - похоже, что Chrome переформатирует код, чтобы он выглядел лучше - я не думаю, что он возвращается к исходным именам для переменных и функций, что вам действительно нужно, чтобы сделать с ним что-нибудь полезное . - person Adam Rackis; 28.12.2011
comment
да, @Adam, я это понимаю, поэтому в предыдущем комментарии я сказал, что это частичное разминирование через Chrome. - person peakit; 28.12.2011

arrow_upward
1
arrow_downward

  1. Я предпочитаю работать с локальной неминифицированной копией JS-файла, и при развертывании сайта я минимизирую все JS-файлы в один. Таким образом можно легко отлаживать и улучшать код. Однако есть инструменты для отмены минификации. Посмотрите эту публикацию SO об отмене минификации JavaScript.
  2. Взгляните на сжатие GZIP - В этом блоге описывается, как включить GZIP в Apache и как проверить, действительно ли ваш сервер сжимает файлы.
person Christofer Eliasson    schedule 28.12.2011

arrow_upward
1
arrow_downward

возможно ли разминирование по запросу на стороне клиента

Некоторые браузеры имеют представление «красивого кода», которое автоматически форматирует исходный код. См. Вкладку CSS Firebug.

Есть ли разница в сжатии javascript на уровне Apache и сжатии с использованием таких инструментов, как YUI Compressor?

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

person Jeff    schedule 28.12.2011