Anton
В общем проблема во вьюстрапе. Используются в нескольких местах отельные компоненты импортированные через
import datepicker from 'vue-strap/src/datepicker'
Anton
Убрал везде эти импорты, все сбилдилось, vendor.js 1 мб, в gz 300 кб
Anton
уже гораздо лучше
Anton
Вопрос как их теперь правильно импортировать чтоб билдилось нормально
Stanislav
Вопрос как их теперь правильно импортировать чтоб билдилось нормально
надо билдить vue-strap
Yaroslav 🇺🇦
Что-то у вас всё равно не так посоны. Только что прогнал через свой углифай и сжатие бандл для клиентской части. Там стандартно ву, стора, роутер, нотификации, гугл аналитика, ша256, ву -маска, несколько своих модулей, лендинг главной странички, 6 внутренних страниц, несколько своих компонент. И 117kb в сжатом виде
Nikolay
во во )
Nikolay
Вопрос как их теперь правильно импортировать чтоб билдилось нормально
милок а ты часом momentjs не используешь?
Nikolay
ууу
Nikolay
теперь понятно
Anonymous
Если на клетке с тигром написано заяц - не верь глазам своим.
Не понял морали сей басни 😁
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
Добавил, похудел на 150 кб. Может я не правильно делаю. Момент используется в нескольких компонентах. в каждом компоненте он импортируется как
import moment from 'moment'
Вопрос правильно ли так. Или же он 10 раз инклюдится в итоговом билде и его как-то глобально 1 раз надо импортировать
теперь вопрос, используешь lodash?
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
Stanislav
эвоно как, интересно какой смысл скрыт в "ломанном" логотипе https://github.com/css-modules/css-modules
Это известный прикол про CSS :)
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
Oleh
Я просто не сильно знаю, что такое QML
Oleh
Это для Qt? Я прочитал только что
Oleh
Ага, теперь понял. Спасибо
Roman
ты про horizontalCenter?
нет, я про property binding, что можно к parent'у обращаться
например написать modal компонент, который отображает разные layout'ы в родителе любого размера
Item {
Loader {
anchors.centerIn: parent
source: parent.width > 500 ? "ThinLayout.qml" : "WideLayout.qml"
}
}
Oleh
нет, я про property binding, что можно к parent'у обращаться
например написать modal компонент, который отображает разные layout'ы в родителе любого размера
Item {
Loader {
anchors.centerIn: parent
source: parent.width > 500 ? "ThinLayout.qml" : "WideLayout.qml"
}
}
А, ну да. Иногда вот так и хочется, к родителю обратиться
Roman
QML = truly modular, HTML5 = pseudo-modular
Egor
одна из тех вещей что меня в CSS бесит так это что нет такого как в QML:
Item {
width: parent.width / 2
anchors.horizontalCenter: parent.horizontalCenter
}
о, знакомый с QT пришел, такой же недовольный с этого CSS )))))
Oleh
QML - это XML/CSS для Qt
Я понимаю уже) я про скорость спрашиваю, с помощью чего она достигается, и именно qt сам по себе быстрый? или ты про qml?
Roman
Я понимаю уже) я про скорость спрашиваю, с помощью чего она достигается, и именно qt сам по себе быстрый? или ты про qml?
там нет никакого DOM'а, там всё поверх SceneGraph'а который поверх OpenGL ES2
Oleh
там нет никакого DOM'а, там всё поверх SceneGraph'а который поверх OpenGL ES2
Если бы я понимал, что ты сказал) Ладно, не суть - я разобрался что такое QML. Мне достаточно) Спасибо
Roman
Если бы я понимал, что ты сказал) Ладно, не суть - я разобрался что такое QML. Мне достаточно) Спасибо
https://youtu.be/vhWS_bN-T3k
Roman
эх... как мне нехватает QML в браузере, по сравнению Webpack + Vue.js + HTML5 это такой жуткий костыль
Anonymous
Anonymous
Я текст врап всегда юзаю
Egor
эх... как мне нехватает QML в браузере, по сравнению Webpack + Vue.js + HTML5 это такой жуткий костыль
https://github.com/qmlweb/qmlweb