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

Давайте создадим каталог проекта, запустим пакет npm и установим JSZip как зависимость. Мы также собираемся использовать веб-пакет в качестве инструмента для связывания. Более подробную информацию о веб-паке можно найти на официальном сайте веб-пакета. В этом руководстве мы не будем углубляться в подробности веб-пакета, поскольку цель этой статьи - сделать упор на сжатие файлов.

npm init -y
npm i jszip
npm i webpack webpack-cli webpack-dev-server --save-dev

В каталоге проекта мы создаем нашу главную страницу index.html в папке распространения (dist) и наш рабочий файл javascript в каталоге исходного кода (src), как показано ниже:

Затем мы создаем файл конфигурации веб-пакета в корневом каталоге проекта. Веб-пакет будет основан на файле конфигурации и будет искать index.js в комплекте и выводить как main.js в папку dist.

Нам также необходимо добавить сценарий в наш package.json, как показано ниже, чтобы запустить наш сервер разработки с помощью сценария npm:

Для нашей главной html-страницы (index.html) мы создаем одно поле ввода, чтобы пользователи могли загружать файлы с включенным выбором нескольких файлов. Мы также включаем наш связанный javascript на главную страницу html.

Затем в файлах javascript index.js мы получаем элемент ввода, используя getElementById и прикрепленный прослушиватель событий изменения, чтобы прослушивать изменение файла, когда пользователь выбирает файлы. Прокрутите каждый файл из объекта FileList, чтобы получить имя файла, и передайте его вместе с файлом в zip-объект. Наконец, мы генерируем полный zip-файл, вызывая метод generateAsync. В приведенном ниже примере мы устанавливаем blob в качестве типа вывода, который мы будем использовать для проверки результата, вызывая ссылку для загрузки по щелчку.

Теперь мы можем запустить сервер разработки webpack с помощью npm start. После запуска перейдите к http: // localhost: 9000 и попробуйте выбрать кратный файл, чтобы увидеть результат.

npm start

В этом примере это может поддерживать сжатие файлов только до среднего размера (~ 50 МБ), так как это замедлит веб-страницу, когда загружаемые файлы большие, из-за того, что javascript является однопоточным. Один из способов улучшить это - реализовать сжатие zip в веб-воркере, о котором мы поговорим в следующей статье.