floydback

https://webpack.js.org/api/module-methods/#require...
обратите внимание на 4й необязательный параметр mode, особенно на 'lazy' и 'lazy-once'

Вот документация

const requireComponents = {};
const requireComponentContext = require.context('./', false, /\.vue$/i, 'lazy'); //lazy!
requireComponentContext.keys().forEach((fileName, index) => {
	//componentName может быть по названию файла, смотрите пример в документации.
	const componentName = `MySuperComponent-${index + 1}`;
	const componentConfig = requireComponentContext(fileName);
	requireComponents[componentName] = () => componentConfig;
});

//vue instance
export default {
	components: {
		...requireComponents
	}
}

<my-super-component-1></my-super-component-1>
<my-super-component-2></my-super-component-2>
...

Дело в том, что JavaScript может ошибаться, если числа дробные, так называемые "числа с плавающей точкой". Подробнее вы можете разобраться в статье.

Как решение, вы можете использовать библиотеку Dinero или использовать метод .toFixed(n). Библиотека создана для расчета неизменяемых денежных величин.

1. Используем препроцессор, любой: sass, less, stylus

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

Все общие переменные обязательно в отдельный файл*
Все общие миксины обязательно в отдельный файл*
** Дает возможность быстро изменить препроцессор, если понадобится. У всех разные синтаксис переменных и миксинов

Если миксин статичный, без параметров, лучше заменить его на класс, например .some-mixin-class
И использовать его так:
.some-class {
@extend .some-mixin-class;
...
}
При этом .some-mixin-class нельзя использовать как обычный класс напримую, только экстендить в других классах

@extend .some-mixin-class - Работает одинаково во всех препроцессорах и хорошо читается

Все общие стили только по БЕМ

3. Специфичные стили для компонента пишем в файле компонента.
Или scoped или БЕМ - как удобней
Если таких стилей очень много, то выносим в отдельный файл и импортируем в компаненте
В эти стили по необходимости(если нужно использовать) и импортируем файл с общими переменными или миксинами

Самое сложное, научится определять, что общее а что специфичное, это не объяснить. Приходит с опытом и постепенно

Amplify это фреймворк - каркас вашего проекта и удобный sdk. Все) Как мне сказали ребята из Accenture "мы задолбались его devops'ить". Если привыкнуть то действительно упрощает жизнь разработчику, но только ему.

тут читать больше

1. Давно, например uBlock уже где-то полгода точно блокирует.
2. Да, такая же абсолютно.

В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

Хочется хранить стили в однофайловых компонентах, при этом имея возможность определить глобально часть sass-переменных, кое-какие миксины и функции. Также нужно как-то подключить миксины сетки и ритма, возможно подключать стили от сторонних пакетов.

Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.

Что делаем:
Подключаем в точке входа (main.js) основной стилевой файл:

import '@/styles/main.scss';
import Vue from 'vue';
//...

В нем подключаем всякое-разное-глобальное-базовое:

@import "base/normalize";
@import "base/init";
@import "base/typography";
@import "base/code";
@import "base/links";
@import "base/tables";
@import "base/buttons";
@import "base/control-group";
@import "base/general-form";
@import "parts/transitions";
...

Далаем два файла: env-development.scss и env-production.scss

$NODE_ENV: development;
@import "cfg-vars";

$NODE_ENV: production;
@import "cfg-vars";

Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги

$DEV_MODE: $NODE_ENV == development;
$MAX_INT32: 2147483647;

@import "cfg-vrhythm";
@import "cfg-grid";
@import "../../../node_modules/vrhythm/source/vrhythm";
@import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../mixins";
@import "cfg-z-indexes";

$wt-family-base: "Open Sans", sans-serif;
$wt-family-head: "Roboto Slab", serif;
$font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;

//==
//== Color palette
//== ======================================= ==//

$palette-light-blue: #3c8dbc; // Primary
$palette-red       : #dd4b39; // Danger
$palette-green     : #00a65a; // Success
$palette-aqua      : #00c0ef; // Info
$palette-yellow    : #f39c12; // Warning

...

Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
Идём в vue.config.js и добавляем секцию css:

const NODE_ENV = process.env.NODE_ENV === 'development'
    ? 'development'
    : 'production';
//...
module.exports = {
    //...
    css: {
        extract: NODE_ENV === 'production',
        loaderOptions: {
            sass: {
                data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
            },
        },
    },
};

Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

Enjoy!

Vue-way - хранить стили в .vue, для того оно и придумано. Компонентный подход улучшает восприятие кода.

css-файл можно оставить только если, например, он уже остался от верстальщика и лень раскидывать по компонентам.

За последние годы в hetzner обслуживали более 50 серверов.
Держим там продакшен нескольких проектов.

Соотношение цена/качество считаю идеальным.
Из подвохов - обратите внимание на заявленную память и диски:

• Память должны быть с ECC
  
• У дисков должно быть написано data center class / enterprise class
  

Года 3 назад у них была мода ставить жестко б/у диски, сейчас вроде бы исправились.

Красивого решения не подскажу, но что если пропарсить maillog через grep+awk+wc?
ну то есть grep invalid /var/log/maillog выплюнет вам все строчки содержащие неверный email, а дальше awk с сортировкой,м?

Всё настраивается нормально, документация говно прост.

Vue.use(VueAuth, {
    auth: require('./components/auth'),
    http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
    router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
    rolesVar: 'role',
    loginData: {url: '/api-token-auth/', method: 'POST', redirect: '/somepage', fetchUser: true},
    fetchData: {url: '/users/me/', method: 'GET', enabled: true},
    refreshData: {url: '/users/me/', method: 'GET', enabled: true, interval: 5},
    parseUserData: function(res) { return res; },
    logoutData: {url: 'auth/logout', method: 'POST', redirect: '/login', makeRequest: false},
});

components/auth.js

module.exports = {
    request: function (req, token) {
        this.options.http._setHeaders.call(this, req, { Authorization: 'Token ' + token });
    },

    response: function (res) {
        let token = res.data.token
        if (token) {
            return token;
        }
    }
};

С подобным сталкивался. Решил проблему так, при загрузке страницы подгружал не все данные, а только малую часть (достаточную для того что бы юзер мог начать пользоваться приложением), и информацию о количестве всех данных. И после этого подгружал остальную часть данных. Для юзера это не заметно, а скорость загрузки приложения при первом обращении увеличивается в разы.
Как вариант можно использовать GraphQL.