Anton
В общем проблема во вьюстрапе. Используются в нескольких местах отельные компоненты импортированные через import datepicker from 'vue-strap/src/datepicker'
Anton
Убрал везде эти импорты, все сбилдилось, vendor.js 1 мб, в gz 300 кб
Anton
уже гораздо лучше
Anton
Вопрос как их теперь правильно импортировать чтоб билдилось нормально
Yaroslav 🇺🇦
Что-то у вас всё равно не так посоны. Только что прогнал через свой углифай и сжатие бандл для клиентской части. Там стандартно ву, стора, роутер, нотификации, гугл аналитика, ша256, ву -маска, несколько своих модулей, лендинг главной странички, 6 внутренних страниц, несколько своих компонент. И 117kb в сжатом виде
Nikolay
во во )
Anonymous
this.$root
Не сработало
Nikolay
ууу
Yaroslav 🇺🇦
Не сработало
так а мы не понимаем что у тебя должно сработать
Nikolay
теперь понятно
Denis
Не сработало
window.Vue = Vue
Nikolay
Есть такое
ща тебе скину как в вебпаке нужно написать чтобы ты не импортировал вообще все локали от momentjs
Anton
Буду благодарен
Denis
date-fns
Nikolay
Буду благодарен
в секцию plugins: [] добавь new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
Nikolay
в конфиге webpack'a
Nikolay
и импортируй в main.js или app.js как у тебя там, нужную локаль ручками
Nikolay
поидее должен бандл похудеть значительно
Yaroslav 🇺🇦
Да я уже советовал это пару дней назад. Если не ошибаюсь. Но кто-то особо умный написал, чо мол парится я локаль вот так подключаю {'ru'}, заработало. И как бы проблема ушла. Я такой- ну ок..)
Nikolay
тут не в локали дело, а как вебпак обрабатывает динамические подключения
Nikolay
вида require('momentjs/locale/'+locale)
Nikolay
он просто инклудит всю директорию locale на всякий случай
Anton
и импортируй в main.js или app.js как у тебя там, нужную локаль ручками
Добавил, похудел на 150 кб. Может я не правильно делаю. Момент используется в нескольких компонентах. в каждом компоненте он импортируется как import moment from 'moment' Вопрос правильно ли так. Или же он 10 раз инклюдится в итоговом билде и его как-то глобально 1 раз надо импортировать
Astr0junk
подключений будет N - код один
Nikolay
он инклюдится весь с локалями единожды
Nikolay
кусок кода выше просто не позволяет вебпаку инклюдить папку locale целиком всю
Nikolay
если да то как подключаешь?
Anton
Нет, но сейчас проверю еще раз
Anton
Нет, точно не использую
Roman
а можно ли чисто теоретически разделить .vue на { .template + .style + .js} ?
Anton
То есть импорт через import moment from 'moment' в каждом компоненте это нормальная практика?
Anton
Спасибо
Roman
Файлы?
ну да.. дабы разделить вот этот .vue файл: <template>...</template> <script>...</script> <style scoped lang="stylus">...</style> на три отдельных файла, скрипт, шаблон, стиль
Denis
Denis
@Romshark ^
Roman
о, здорово! спасибо, намного чище нежели всё в один
Anton
Всем спасибо за помощь. Получил более менее приемлемые результаты: vendor.js - 1.14 mb vendor.js.gz - 310 kb app.js - 282 kb app.js.gz - 41 kb Дальше видимо стоит смотреть в сторону выпиливания ненужных либ и подгрузки по требованию
Yaroslav 🇺🇦
Дальше анализировать бандл и тонкий тюн
Roman
Мне чет наоборот не нра )
небольшие компоненты можно и в один... но когда файл за 100 строк заходит становится уже как-то некрасиво если CSS, JS и HTML в один файл..
Roman
но.. кому как..
Roman
кто-то и C++ в километровые файлы пишет без разделения))
Roman
@Piterden кстати а что за module атрибут у style тэга?
Roman
CSS Modules
эвоно как, интересно какой смысл скрыт в "ломанном" логотипе https://github.com/css-modules/css-modules
Roman
Это известный прикол про CSS :)
случайно не связано с немодульностью системы позиционирования CSS?
Stanislav
случайно не связано с немодульностью системы позиционирования CSS?
Оригинал https://bethesignal.org/wp-content/uploads/2009/06/css-is-awesome-700x375.jpg
Roman
одна из тех вещей что меня в CSS бесит так это что нет такого как в QML: Item { width: parent.width / 2 anchors.horizontalCenter: parent.horizontalCenter }
Oleh
Я просто не сильно знаю, что такое QML
Oleh
Это для Qt? Я прочитал только что
Oleh
Ага, теперь понял. Спасибо
Denis
Ага, теперь понял. Спасибо
Самое шустрое, что я видел из всего
Roman
ты про horizontalCenter?
нет, я про property binding, что можно к parent'у обращаться например написать modal компонент, который отображает разные layout'ы в родителе любого размера Item { Loader { anchors.centerIn: parent source: parent.width > 500 ? "ThinLayout.qml" : "WideLayout.qml" } }
Oleh
Roman
QML = truly modular, HTML5 = pseudo-modular
Denis
Сейчас про qt? или про qml?
QML - это XML/CSS для Qt
Oleh
QML - это XML/CSS для Qt
Я понимаю уже) я про скорость спрашиваю, с помощью чего она достигается, и именно qt сам по себе быстрый? или ты про qml?
Oleh
там нет никакого DOM'а, там всё поверх SceneGraph'а который поверх OpenGL ES2
Если бы я понимал, что ты сказал) Ладно, не суть - я разобрался что такое QML. Мне достаточно) Спасибо
Roman
эх... как мне нехватает QML в браузере, по сравнению Webpack + Vue.js + HTML5 это такой жуткий костыль
Anonymous
Я текст врап всегда юзаю