Moment.js - потрясающая библиотека даты и времени, которую я использовал практически в каждом проекте, над которым работал за последнее десятилетие. К сожалению, в наши дни он показывает свой возраст, когда создатели не рекомендуют использовать его в новых проектах, а проект переводят в режим только техобслуживания.
Я могу понять почему - инструменты и структура библиотек JavaScript быстро развивались в последние годы, и старые библиотеки часто не успевают за ними без внесения массивных, обратно несовместимых изменений. Сам Интернет также эволюционировал - бедствие, которым был IE, почти исчезло, и вместо этого почти все постепенно стало работать на Webkit и его вариантах. Есть много обратной совместимости, которая просто больше не нужна, и в какой-то момент становится более разумным просто переписать.
Так почему это должно вас беспокоить - и стоит ли вообще переключаться? Если вы пытаетесь сократить размер пакета, я бы сказал, что об этом стоит подумать, так как момент довольно тяжелый по сравнению с новым поколением легких библиотек для манипуляции датами. Это также довольно легко сделать даже со сложной существующей базой кода благодаря Day.js, который пытается сохранить почти идентичный API для moment.js.
На самом деле есть только две вещи, которые вам нужно знать при переключении между двумя: Day.js использует систему ядра + плагин, поэтому в зависимости от строк формата и функций, которые вы используете в настоящее время, вам нужно будет зарегистрировать соответствующие плагины. Например, мне нужно .weekday(), поэтому я регистрирую плагин weekday:
import dayjs from 'dayjs' import weekday from 'dayjs/plugin/weekday' dayjs.extend(weekday)
К тому времени, как вы закончите, у вас может быть несколько из этих плагинов! Второе, что вам нужно знать, это то, что объекты Day.js неизменяемы, поэтому что-нибудь вроде этого:
var foo = moment() foo.add(1, 'day')
Вместо этого изменится на это:
var foo = moment() foo = foo.add(1, 'day')
После того, как вы зарегистрировали нужные плагины и привыкли к неизменяемым объектам, они практически идентичны. Несколько находок и замен, и вы можете похвалить себя по спине! Если вы все равно не используете Chart.js или vue-chartjs, в этом случае…
Заставить Chart.js также использовать Day.js
Так где же тут дело с vue-chartjs? Как оказалось, Chart.js по умолчанию связывает момент.js, и, конечно же, vue-chartjs также использует Chart.js. Итак, нам необходимо сделать следующее:
- Скажите Chart.js, чтобы он прекратил объединять момент.js
- Добавьте адаптер даты / времени, чтобы вместо Chart.js использовался Day.js.
- Убедитесь, что мы выполняем описанные выше действия без нарушения разделения кода.
Эта последняя часть может быть немного сложной, но имеет решающее значение - в конце концов, мы начали этот процесс, ища способ сократить наши пакеты! Если вы просто импортируете dayjs и Chart.js в свой входной файл и начнете возиться с плагинами и адаптерами, система разделения кода больше не сможет вытащить его в отдельный кусок. Это не имеет большого значения для Day.js, поскольку вы, вероятно, собираетесь использовать его везде, и в любом случае он довольно маленький, но Chart.js - это совсем другое дело.
Подход, который сработал для меня лучше всего, - обернуть базовые библиотеки и передать их через экспорт. Итак, для Day.js у меня есть файл src/dayjs.js, который выглядит так:
Это очень просто - импортируйте библиотеку, настройте ее и снова экспортируйте. Теперь во всей моей кодовой базе вместо import dayjs from 'dayjs' я просто import dayjs from '@/dayjs'. Это гарантирует, что везде будут использоваться одни и те же плагины, а код по-прежнему может быть разбит на части по мере необходимости.
Нам также нужно обернуть vue-chartjs, чтобы указать, как использовать Day.js вместо moment.js. В npm есть несколько библиотек, которые утверждают, что это делают, но мне больше повезло с адаптацией (ха!) Адаптера отсюда, чтобы вместо этого использовать мой завернутый Day.js. На этот раз мы будем обертывать vue-chartjs, так как это то, что мы в конечном итоге импортируем (и как таковое будет использоваться при разделении кода):
Наконец, нам нужно остановить объединение по умолчанию moment.js в Chart.js. Вы можете сделать это, обновив конфигурацию вашего веб-пакета, например, в vue.config.js:
module.exports = {
configureWebpack: {
externals: {
moment: 'moment'
}
}
}
Это позволяет нам солгать веб-пакету, что этот момент уже будет существовать на странице извне, поэтому он не будет пытаться импортировать его. Конечно, его на самом деле не будет, но все равно никто не будет его использовать, так что ... миссия выполнена?
Как только все это будет сделано - в зависимости от количества плагинов Day.js, которые вы используете, и от того, настроили ли вы ранее правила для удаления локалей moment.js - вы должны увидеть что-то между уменьшением на 45–250 КБ в проанализированный размер вашей кодовой базы. Не слишком потрепанный!
