Aetae

По mousedown - setTimeout, по mouseup и mouseleave - clearTimeout.
Какие проблемы?

Т.к. webpack при сборке никак не может знать, что у вас окажется в this.name, а проект должен работать в любых условиях, то для работы import(`mdi-vue/${this.name}`) собирается вообще всё, что лежит в папке mdi-vue/.

Вы не может создать компонент "который будет подключать иконки за вас", потому чтобы иконка была подключена, она должна иметься в наличии. Чтобы она имелась в наличии на этапе исполнения, она должна быть собрана на этапе компиляции. Учитывая что заранее (из кода) неизвестно какая именно иконка вам понадобится на этапе исполнения, собраны на этапе компиляции вынуждены быть все иконки что есть.

Если у вас используется ограниченный набор иконок, то вам придётся в любом случае прописать импорт каждой вручную. Это можно оптимизировать написав собственный генератор, который на этапе сборки(или перед ним) пройдётся по файлам и соберёт использованные иконки и выплюнет их в файл с соответствующими импортами. Но проще импортировать что надо, там где надо.

C localStorage можно работать как с обычным объектом.

for(let [key, value] of Object.entries(localStorage)) {
  console.log(key, value)
}

Используем телепатию.

const data = [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9];
const data2 = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2];


function narrow(data, length, precision) {
  const start = data[0];
  const end = data[data.length-1];
  const result = new Array(length);
  let step = (end - start) / (length - 1);

  if(precision) {
    if(step < precision) 
      throw new RangeError(`Шаг не может быть кратен ${precision} при длине результирующего массива ${length}`);
    step = (step / precision | 0) * precision; 
  }

  result[0] = start;

  while(--length)
    result[length] = step * length;

  return result;
}



console.log(
  narrow(data, 5, 0.5)
)
console.log(
  narrow(data2, 5)
)
console.log(
  narrow(data, 5)
)

Ну, во-первых, тут у вас написана ложь.
console.log не вызывает неявного приведения к строке, а потому в консоли мы увидим не 8, а то что там и есть на самом деле, т.е. function inner() {}
toString же неявно вызывается именно в случае использования объекта как строки.
Например: console.log(sum(1)(2)(2)(3) + 'px') // 8px.
В целом же я бы не рекомендовал так делать.

function mod5(number) {
  var digit = number % 10;
  
  if(digit === 5 || digit === 0)
    return number;
  if(digit > 5)
    return number + 10 - digit;
  return number + 5 - digit;
}

А нечего отступы вручную расставлять.
Вот ваш код в нормальном виде:

var app = new Vue({
  el: '#vue-app-one',
  data: {
    sitename: 'The Shop',
    string: 'Hello',
    product: {
      id: 1001,
      title: 'Phone',
      description: 'The best one <em>phone</em> ever',
      price: 1000000,
      image: 'This is an image',
    },
    filters: {
      formatPrice: function(price){
        if (!parseInt(price)) {return "";}
        if (price > 9999){
          var priceString = (price /100).toFixed(2);
          var priceArray = priceString.split("").reverse();
          var index = 3;
          while (priceArray.length > index +3){
            priceArray.splice(index+3, 0, ',');
            index +=4;
          }
          return '$' + priceArray.reverse().join('');
        } else{
          return '$' + (price/100).toFixed(2);
        }
      }
    }
  },
});

Ничего не замечаете?

Грузите вы в любом случае всё - это в первую очередь поток байт, во вторую простой текст, и только после парсинга движком браузера появляются какие-то там head и прочие body.
В принципе, вы можете прервать загрузку, если посчитали что загрузили достаточно.
XMLHttpRequest вызывает событие readystatechange\onprogress несколько раз с промежуточными результатами, а также имеет метод abort для остановки. Однако с современными скоростями интернета весь контент скорее всего будет загружен быстрее чем браузер сможет остановить зарос.