длина хэша имени localIdent для веб-пакета css-loader

Я использую webpack и css-loader, а в моей конфигурации css-loader я использую следующие параметры:

options: {
    importLoaders: 1,
    modules: true,
    localIdentName: '[hash:base64:3]'
}

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

Некоторые имена классов совпадают! (конфликт!)

Например:

._1mk { /*dev name was .home*/
   color: red;
} /*line 90*/

а также

._1mk { /*dev name was .news*/
   color: blue;
}

Это большая проблема, но когда я использую [hash:base64:5], все будет в порядке, и каждый класс имеет свое имя хеша без каких-либо конфликтов.

Я искал этот вопрос около 4 часов и видел, что все разработчики используют число 5 как меньшую длину хэша для своей конфигурации. Я не знаю почему! Я подсчитал, что 64 символа [a-z][A-Z][0-9][-,_] в трех длинах могут иметь 262144 разных слова, так почему же они не могут иметь разные имена?

как мне разрешить этот конфликт? Неужели я должен пропустить цифру 3? и использовать 5, как другие?


webpack javascript css css-loader hash
person AmerllicA    schedule 30.11.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Наконец я нахожу правильный путь, это hash, а не randomNaming функция. это сделано для хеширования, поэтому очевидно, что оно короткое, с обширными именами, возможно, это приводит к коллизии. поэтому я пишу свою собственную функцию именования Webpack и использую переменные и функцию top в файле конфигурации Webpack. это шаги моего решения:

Сначала две переменные для cache и queue. кеш для легкого доступа к LocalName и его новому randomName и очередь для хранения записей переменных, которые включают все новые случайные имена для предотвращения коллизий.

let q = [],
  cache = {};

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

function randomNaming(length, limit) {
  let result = '',
    chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_',
    /*All valid chars*/
    fchars = 'abcdefghjklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_';
  /*All valid first chars*/

  do {
    if (q.length >= 52 * Math.pow(64, limit - 1) && limit >= length) {
      return 'OutOfPossibility';
    } else if (q.length >= 52 * Math.pow(64, limit - 1) && limit < length) {
      ++limit;
    }
    result = '';
    result += fchars[Math.floor(Math.random() * fchars.length)];
    for (let i = limit - 1; i > 0; --i) {
      result += chars[Math.floor(Math.random() * chars.length)];
    }
  } while (q.includes(result));
  q.push(result); /*push for avoiding collision in next time of funtion call*/
  return result;
}

В-третьих, в области css-loader внутри конфигурации webpack я использовал getLocalIdent, а не localIdentName.

const getLocalIdent = (loaderContext, localIdentName, localName, options) => {
  var randName = randomNaming(3, 2);
  if (localName.match(/^i-/i)) {
    randName = `i-${randName}`;
  } else if (localName.match(/^i_/i)) {
    randName = `i_`;
  } else {
    randName = `${randName}`;
  }
  if (typeof cache[localName] == 'undefined') {
    cache[localName] = randName;
    return cache[localName];
  } else {
    return cache[localName];
  }
};

И теперь все имена захешированы, а файл CSS имеет минимально возможный размер тома. И HTML такой легкий.

person AmerllicA    schedule 06.12.2017