Как сделать два бандла и отдать их в зависимости от разрешения?

Question

[Vann Damm]

У меня такого рода структура проекта,css и jsx.

Но не могу понять как в папке src , в зависимости от разрешения менять подключаемые css и jsx модули.
Приходит на ум только создание дву папок src , одна mobile, другая для браузера.
И второй вопрос: Как с бэка отадавать нужный бандл.

Answer 1

[Дмитрий Беляев]

Вам нужен динамический импорт. Бэк будет отдавать то что запросят, а что грузить решать будете на клиенте в корневом чанке.
https://webpack.js.org/guides/code-splitting/

Я надеюсь Вы в курсе, что на десктопе тоже бывает тач, а на компактных мобильных устройствах он может отсутствовать?

Comments

[Vann Damm]

Спасибо.
Не думал об этом. Но на тач десктопах разрешение вроде не меньше будет чем на маленьких маках

[Дмитрий Беляев]

Vann Damm, в плане десктоп тача я бы в 1ю очередь на Microsoft Surface ориентировался, ну и можно на китайские клоны еще.
У него разрешение ноутбучное, и у него вполне может быть как мультитач, так и мышка с клавой.
С мобилками без тача заморочнее, да может и не нужно в виду не высокой распространенности, но потестить можно подрубив мышку через otg к любому андроид смартфону

[Vann Damm]

Дмитрий Беляев, Спасибо , учту

[Vann Damm]

Дмитрий Беляев, Добрый день. у меня получается два бандла desktop и mobile ну и vendors~desktop-mobile, но не могу понять, где мне на фронте произвести проверку на разрешение экрана , чтобы скормить webpack'y на бэке один из этих бандлов?

[Дмитрий Беляев]

Vann Damm, а какой бандл у Вас точка входа? там и проверяйте

[Vann Damm]

Дмитрий Беляев, Добрый день, подскажите пожалуйста. В webpack конфиге , есть несколько точек входа. Когда все собирается, для того чтобы узнать , какому файлу принадлежит какой чанк , я использую webpack-assets-manifest, он мне отдает json файл , такого вида:

{
"desktop.js": "main-9c68d5e8de1b810a80e4.js",
"mobile.js": "main-9c68d5e8de1b810a80e4.js",
" vendors~desktop-mobile.js": " vendors~desktop-mobile-9c68d5e8de1b810a80e4.js",
"main.css": "main-9c68d5e8de1b810a80e4.css",
"images/logo.svg": "images/logo-b111da4f34cefce092b965ebc1078ee3.svg"
}

Из этого файла , я выбираю то , что нужно для страницы в текущий момент. И выбранные файлы отдать в :

app.use('/', express.static(__dirname + '/filesForThisPage'))

На место /filesForThisPage

Как это сделать правильно?

[Дмитрий Беляев]

Vann Damm, Вам нужна единая точка входа, условный main.js
в ней Вы проверите условие, на каком устройстве запущен скрипт, и с помощью динамического импорта уже подгрузите нужную кодовую базу.
Все остальное вебпак сделает за Вас

[Vann Damm]

Дмитрий Беляев, Круто, спасибо большое

[Vann Damm]

Дмитрий Беляев, Дмитрий, доброго времени суток. Возник такой вопрос: Как вы уже сказали есть единая точка входа main.js, она решает что рендерить desktop.js или mobile.js , структура у меня всё еще такая -

Задам вопрос на примере button. У нас есть папки desktop.button и mobile.button , соответсвенно, для того чтобы подключить файлы относящиеся к desktop или файлы относящиеся к mobile , у нас во всех компонентах должны быть проверки , либо нужно две папки desktop и mobile , но тогда получается дублирование кода. Как правильно это организовать ? Спасибо

[Дмитрий Беляев]

Vann Damm, а что мешает из папок desktop и touch импортить файлы из common?