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

Уменьшение размера повышает производительность (время загрузки) ваших веб-сайтов или их переносимость между разными устройствами за счет небольших файлов JavaScript и CSS. Чем меньше файл, тем быстрее он загружается, а значит, лучше производительность.

Процесс уменьшения размера файлов сейчас довольно легко автоматизировать. Приведу один из способов. В моем примере используется версия для командной строки Microsoft Ajax Minifier из CodePlex (http://ajaxmin.codeplex.com/) и Visual Studio для автоматизации процесса уменьшения размера файлов JavaScript и CSS в приложении, развернутом на SharePoint. Помните об этом, так как иногда уменьшенный файл будет выдавать ошибки, что зависит от веб-сайта. Для начала загрузите Microsoft Ajax Minifier из CodePlex. Это утилита командной строки, которая уменьшает размер файлов JavaScript и CSS.

Если вы предпочитаете пакеты NuGet в своей среде развертывания, можете найти копию сборки (DLL) на веб-сайте NuGet. Помните, что пакет NuGet не включает версию инструмента для командной строки.

Загрузив Microsoft Ajax Minifier и установив файл MSI, скопируйте файл AjaxMinifier.exe и добавьте его к новой папке, названной Minify, в хостируемом SharePoint проекте VS приложения (см.экран 1). Затем переименуйте файлы JavaScript и CSS, которые идут с шаблоном проекта приложения, хостируемом SharePoint, чей размер вы хотите уменьшить.

 

Добавление в?проект AjaxMinifier.exe
Экран 1. Добавление в ?проект AjaxMinifier.exe

В моем примере я уменьшу в размере файлы app.cssиapp.js, для чего переименую их в app.debug.cssиapp.debug.js. Эти переименованные файлы представляют не уменьшенные версии файлов, которые я буду разворачивать.

После переименования файлов создайте файлы JavaScript и CSS, в которые Ajax Minifier будет загружать уменьшенные версии app.debug.cssиapp.debug.js. Поместите эти файлы в те же самые папки, где располагаются файлы. debug.

Эти файлы имеют те же файловые имена, что и файлы, которые вы только что переименовали. Не нужно помещать в них какой-либо контент: AjaxMinifier.exe сам наполнит эти файлы.

Затем создайте два XML- и добавьте их в папку Minify. В моем примере эти файлы названы cssFiles.xml и jsFiles.xml. Эти файлы содержат данные, которые указывают утилите командной строки AjaxMinifier.exe, какие файлы необходимо уменьшить в размере, и имена уменьшенных файлов, которые следует сгенерировать.

На экране 2 показано, как в Visual Studio выглядит приложение, расположенное на SharePoint, после того как выполнены все задачи. Приложение использует цветовое выделение, чтобы было понятно, какие файлы JavaScript и CSS были сопоставлены.

 

Подготовка к?уменьшению файлов
Экран 2. Подготовка к?уменьшению файлов

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

>
path=«..Contentapp.css»>
path=«..Contentapp.debug.css»/>
>
>
Файл jsFiles.xmlfile использует ту же самую структуру. Вот как это выглядит:
>
path=«..scriptsapp.js»>
path=«..scriptsapp.debug.js»/>
>
>

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

Кроме того, вы можете включить несколько элементов , если хотите уменьшить размер нескольких файлов.

Затем обновите файлы elements.xml, которые ассоциируются с модулями, разворачивающими файлы JavaScript и CSS. Удалите элементы, которые соответствуют версиям. debug файлов JavaScript и CSS так, чтобы они не были включены в пакет приложения и развертывание.

Visual Studio автоматически добавил элементы , когда вы переименовали файлы. Вот файл elements.xml, который разворачивает файл app.css:

version=«1.0» encoding=«utf-8»?>
xmlns=«http://schemas.microsoft.com/sharepoint/»>
Name=«Content»>
Path=«Contentapp.css» Url=«Content/app.css» />
>
>

А это файл elements.xml, который разворачивает файл app.js:

version=«1.0» encoding=«utf-8»?>
xmlns=«http://schemas.microsoft.com/sharepoint/»>
Name=«Scripts»>
Path=«Scriptsjquery-1.7.1.min.js»
Url=«Scripts/jquery-1.7.1.min.js» />
Path=«Scriptsjquery-1.7.1.js»
Url=«Scripts/jquery-1.7.1.js» />
Path=«Scriptsjquery-1.7.1.intellisense.js»
Url=«Scripts/jquery-1.7.1.intellisense.js» />
Path=«Scriptsapp.js» Url=«Scripts/app.js» />
>
>

Щелкните правой кнопкой мыши по проекту, расположенному на SharePoint, в Solution Explorer, выберите Properties и вкладку Build Events. Добавьте показанный ниже код в поле Pre-buildeventcommandline:

«$(ProjectDir)MinifyAjaxMinifier.exe» -CSS -CLOBBER –xml$(ProjectDir)MinifycssFiles.xml«
»$(ProjectDir)MinifyAjaxMinifier.exe«-JS -CLOBBER -xml $(ProjectDir)MinifyjsFiles.xml»

Этот код вызывает утилиту командной строки AjaxMinifier.exe, уменьшающую размер файлов JavaScript и CSS, перечисленных в xml-файлах, которые вы создали. Чтобы получить больше информации о различных аргументах, которые вы можете использовать с утилитой AjaxMinifier.exe, обратитесь к документации по сайту Microsoft Ajax Minifier CodePlex.

Итак, попробуем. Щелкните правой кнопкой мыши по проекту, хостируемому SharePoint, в Solution Explorer и выберите Rebuild.

Внутри Visual Studio в окне Output Window убедитесь, что AjaxMinifier.exe выводит отчет о статусе процесса уменьшения размера. Вот как это выглядит:

— Rebuild All started: Project: AutoMinifySPApp, Configuration: Debug Any CPU ---
Microsoft Ajax Minifier (version 5.2.5021.16390)
JavaScript and CSS minification and verification command-line utility
Copyright 2013 Microsoft Corporation
Minifying 'C:DemosO365AutoMinifySPAppAutoMinifySPAppMinify..Contentapp.debug.css'
Microsoft Ajax Minifier (version 5.2.5021.16390)
JavaScript and CSS minification and verification command-line utility
Copyright 2013 Microsoft Corporation
Minifying 'C:DemosO365AutoMinifySPAppAutoMinifySPAppMinify..scriptsapp.debug.js'
Original Size: 975 bytes; reduced size: 428 bytes (56.1% minification)
Gzip of source input approx. 474 bytes (51.4% compression)
Gzip of minified output approx. 256 bytes (73.7% compression)
========== Rebuild All: 1 succeeded, 0 failed, 0 skipped ==========

Вы увидите, что CSS-файл app.debug.css не был уменьшен. Это произошло потому, что в Visual Studio не указан CSS в файле app.debug.css стандартного шаблона приложения, хостируемого SharePoint. Однако вы заметите, что Java Script-файл app.debug.js был уменьшен до 428 байт.

В данном примере количество байтов, которые вы сохраняете, минимально, но когда вы создаете приложение, хостируемое SharePoint, ваши файлы app.debug.cssиapp.debug.js будут включать гораздо больше кода CSS иJavaScript, чем первоначальные стандартные файлы. Преимущества уменьшения размера файлов будут очевидны.

Если вы откроете файл app.debug.js, то увидите, что его содержимое остается прежним, и вы можете начинать работать с ним, см. экран 3.

 

Содержимое начального файла app.debug.js
Экран 3. Содержимое начального файла app.debug.js

Открыв файл app.js, вы увидите уменьшенную версию файла, см. экран 4. Обратите внимание, что весь код располагается в одной строке, а комментарии и пробелы были удалены.

 

Содержимое уменьшенного файла app.debug.js
Экран 4. Содержимое уменьшенного файла app.debug.js

 

Поделитесь материалом с коллегами и друзьями

Купить номер с этой статьей в PDF