В этой статье подробно рассказывается о сжатии и распаковке в jszip.

Node.js

В последнее время я занимаюсь подобным офлайн-пакетом, обычно мы занимаемся разработкой полного SPA после работы. Так как у нас нет ресурсов для сервера, один из принимаемых в настоящее время способов — упаковать этот spa в виде zip-пакета, затем загрузить его в CDN, а затем вытащить его непосредственно из CDN в CDN, когда вы его используете, эта программа аналогична разработке Полный автономный процесс упаковки, в котором использовалась JSZIP, эта библиотека в сжатом поле, который также столкнулся с множеством ям, и эта сводная запись.

Общий API

официальная документацияДемонстрации различных API были подробно описаны, но это очень простые демонстрации, которые сильно отличаются от реальных сценариев, с которыми мы столкнулись в нашей разработке.Преимущество этой библиотеки в том, что она поддерживает различные типы ресурсов.uint8array,blob,arraybuffer,nodebuffer,stringд., а API в стиле промисов, так что им очень удобно пользоваться, достаточно посмотреть несколько примеров, и можно переходить к деталям.Документация;

const zip = new JSZip();

// create a file
zip.file("hello.txt", "Hello World\n");

// create a file and a folder
zip.file("nested/hello.txt", "Hello World\n");
zip.folder("nested").file("hello.txt", "Hello World\n");

// access the file content
zip.file("hello.txt").async("string").then(function (data) {
  // data is "Hello World\n"
});

// remove a file or folder
zip.remove("nested/hello.txt");
zip.remove("nested");

// generate a zip file
var promise = null;
if (JSZip.support.uint8array) {
  promise = zip.generateAsync({type : "uint8array"});
} else {
  promise = zip.generateAsync({type : "string"});
}

// read a zip file
zip.loadAsync(content)
.then(function(zip) {
    zip.file("hello.txt").async("string"); // a promise of "Hello World\n"
});

Ресурсы сжатия

После разработки проекта ресурсы обычно упаковываются в каталог dist, поэтому нам нужно запаковать всю папку dist в zip-пакет, что требует двух шагов:

  1. прочитать каждый файл в каталоге dist;
function readDir(zip, dirPath) {
  // 读取dist下的根文件目录
  const files = fs.readdirSync(dirPath); 
  files.forEach(fileName => {
    const fillPath = dirPath + "/" + fileName;
    const file = fs.statSync(fillPath);
    // 如果是文件夹的话需要递归遍历下面的子文件
    if (file.isDirectory()) {
      const dirZip = zip.folder(fileName);
      readDir(dirZip, fillPath);
    } else {
      // 读取每个文件为buffer存到zip中
      zip.file(fileName, fs.readFileSync(fillPath));
    }
  });
}
  1. сгенерировать сжатый пакет;
function generateZip() {
  const sourceDir = path.join(__dirname, "../dist");
  readDir(zip, sourceDir);
  zip.generateAsync({
    type: "nodebuffer", // 压缩类型
    compression: "DEFLATE", // 压缩算法
    compressionOptions: { // 压缩级别
      level: 9
    }
  }).then(content => {
    const dest = path.join(__dirname, "../zip");
    // 删除旧包目录
    del.sync([dest])
    // 创建新包目录
    fs.mkdirSync(dest, {
      recursive: true
    });
    // 把zip包写到硬盘中，这个content现在是一段buffer
    fs.writeFileSync(`${dest}/lewis.zip`, content); 
  });
}

Разархивируйте ресурс

Когда вам нужно использовать SPA, вы можете напрямую извлечь zip-пакет из CDN и распаковать его для использования.Пакет распаковки также разделен на два этапа:

  1. Получите zip-файл из CDN и разархивируйте его;
function getZipFiles(zipUrl) {
  const response = await axios({
    method: 'get',
    url: zipUrl,
    responseType: 'arraybuffer'  // 类型必须为arraybuffer
  });
  // loadAsync加载其他类型资源会出问题，比如资源乱码
  const zipData = await JSZip.loadAsync(response.data);
  return zipData.files;
}
  1. Напишите распарковываемые ресурсы на жесткий диск;
function saveZipFiles(savePath) {
  // 获取解压后的文件
  const files = await getZipFiles(zipUrl)
  try {
    for (const filename of Object.keys(files)) {
      const dest = path.join(__dirname, savePath, filename);
      // 如果该文件为目录需先创建文件夹
      if (files[filename].dir && !isDirSync(dest)) {
        fs.mkdirSync(dest, {
          recursive: true
        });
      } else {
        // 把每个文件buffer写到硬盘中 
        files[filename].async('nodebuffer')
          .then(content => fs.writeFileSync(dest, content));
      }
    }
  } catch (error) {
    console.error('save zip files encountered error!', error.message);
    return error;
  }
}

Уведомление

Рекомендуется использовать буфер непосредственно во всем процессе обработки zip-пакетов и по возможности избегать использования строк.При перелистывании легко искажаются символы.Кроме того,буферы имеют небольшой размер и их легко хранить и легко обрабатывать с помощью jszip. Кроме того, загружать буферы непосредственно при загрузке в CDN. В то время я переключился на загрузку строк и не смог распаковать пакет, когда вытащил его. Обратите внимание на использование fs.readFileSync(), добавив Параметр вернет строку, а чтение zip-пакета непосредственно в виде строки будет напрямую искажено.

/**
 * 获取文件内容
 * @param file
 * @returns string
 */
function getFileContent(file) {
  if (fs.existsSync(file)) {
    const pkg = fs.readFileSync(file, 'utf-8')
    return pkg
  } else {
    return null
  }
}

/**
 * 获取文件内容
 * @param file
 * @returns buffer
 */
function getFileBuffer(file) {
  if (fs.existsSync(file)) {
    const pkg = fs.readFileSync(file)
    return pkg
  } else {
    return null
  }
}

постскриптум

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

Для более интересного контента, пожалуйста, обратите внимание на мой паблик [Небесные награды за усердие Льюис]

Категории