Привет! Использую create-react-app. Решил оптимизировать размер файлов при Запустил 'yarn eject' и извлек конфиг. Посмотрел статьи на эту тему, но не понял, как начать оптимизацию, при этом сохранив основную функциональность. Может есть какое-то хорошее руководство именно для оптимизации размера для create-react-app?

А как CRA связан с оптимизациями? Оптимизировать нужно что-то конкретное, а не просто (в CRA уже есть множество основных оптимизаций)

А как CRA связан с оптимизациями? Оптимизировать нужно что-то конкретное, а не просто (в CRA уже есть множество основных оптимизаций)

А как CRA связан с оптимизациями? Оптимизировать нужно что-то конкретное, а не просто (в CRA уже есть множество основных оптимизаций)

Хочу оптимизировать размер файлов при билде.

Хочу оптимизировать размер файлов при билде.

Ну т.е. используйте lazy loading, brotly, webp и т.п.

Он и так оптимизирован

На выходе получается размер больше мегабайта. Есть способы ужать? Я видел, что некоторые рекомендуют использовать preact вместо react, но это, как мне кажется, не совсем разумно. Во всяком случае, не всегда.

На выходе получается размер больше мегабайта. Есть способы ужать? Я видел, что некоторые рекомендуют использовать preact вместо react, но это, как мне кажется, не совсем разумно. Во всяком случае, не всегда.

В первую очередь вам нужен lazy loading

видимо у тебя много толстых либ и ассетов

На выходе получается размер больше мегабайта. Есть способы ужать? Я видел, что некоторые рекомендуют использовать preact вместо react, но это, как мне кажется, не совсем разумно. Во всяком случае, не всегда.

Это с компрессией? Можете попробовать бротли вместо гзипа ( только нужен фолбек)

Всяких полно, да. Вот я и хочу узнать, как отфильтровать ту часть функций, которая не используется библиотеками.

Сначала посмотри в bundler analyzer и кинь package на bundlephobia

На выходе получается размер больше мегабайта. Есть способы ужать? Я видел, что некоторые рекомендуют использовать preact вместо react, но это, как мне кажется, не совсем разумно. Во всяком случае, не всегда.

Есть ссылка на доки?

нужно внимательно изучить набор используемых вами либ (какой вариант пакетирования они используют, желательно отказаться от всех зависимостей commonJs формата) и способов импорта оных чтобы нормально при сборке заработал (https://webpack.js.org/guides/tree-shaking/) у CRA какое-то время были проблемы с remove dead code Для библиотек lodash и moment.js - которые часто встречаются - есть специальные гайды как от лодаша добиться три-шейкинга и с моментом то же самое + там можно и нужно собирать с целевыми таймзонами и не более. Настройки минификации в CRA вроде и так нормальные. Так что тут надо архитектурно работать скорее всего плотнее

Никак ты не добьешься от лодаша нормально тришейкинга, если не будешь явно писать пусть до нужного модуля, а не по старинке _ 🙂 Что в общем плагин для бабеля за тебя это и сделает чаще всего, но не при чейнинге

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

на чем лучше делать чат? сокети или чет еще?

на чем лучше делать чат? сокети или чет еще?

вопрос по react-storybook. Сторибук игнорирует стили компонентов. Конфиг вебпака на скрине. С таким скрином кидает ошибку > 2 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--10-1!./NoteItem.css"); | ^ 3 | 4 | if(typeof content === 'string') content = [[module.id, content, '']]; вопрос - как починить?

А есть шанс не юзать storybook?) docz какой нибудь

Что ты имеешь в виду под сокетами? websokets на клиенте?

да

Бэкенд тоже вы будете имплементировать?

не я

Обсудите с бэкендом, если он может веб-сокеты и главное хочет - то это будет лучший вариант, обсудите так-же протокол который вы "поверх" вебсокетов планируете использовать, иногда в этом плане у бэка тоже бывают изъебы

спасибо буду делать что то такого ода впервие, немного страшновато

можно ли название функции из константы сделать?

да

А есть шанс не юзать storybook?) docz какой нибудь

Скажите. Какой-нибудь из существующих пакетов с формами позволяет делать гибкие механизмы с сайдэффектами, которые обновляют значения полей формы при изменении других значений полей? Для примера: Поле А с выбором типа сущности, при применении фильтрует значения поля Б с выбором типа шаблона, при этом может быть применен дефолтный шаблон. Если он применяется, то вначале заполняются другие поля формы на основе значения в поле А, а затем сверху перезаписываются значениями из примененного шаблона из поля Б, причем при заполнении, некоторые поля (селекты) сначала должны сделать запрос за данными и только потом заполниться, это касается и прямого заполнения от поля А, так и заполнения при применении шаблона от поля Б. И вот такая цепочка сайд-эффектов изменения одного поля от другого может быть глубиной в 2-4 уровня, включая асинхронные запросы, перед изменением значения поля. В общем сейчас мы решаем это дело кастомным механизмом сайдэффектов, поверх redux-form. Хочется узнать, есть ли похожие механизмы в уже существующих пакетах с формами?

Сторибук норм сейчас

Ну ок, я видел что они много обновляли

Он в mdx как докз может сейчас

У него проблема была в конфигурации, очень она была сложная

Чтобы не было так страшно, разберите например вот этот туториал https://itnext.io/building-a-node-js-websocket-chat-app-with-socket-io-and-react-473a0686d1e1 С кодом примера

люди, я пользовал CSS модули (style.module.css) и все было ок. очень удобно без всяких настроек создавать отдельные css-файлы и испортировать в нужный реакт компонент. но я подключил еще и Laravel и там чет не работают эти css-модули. есть ли альтернативный вариант?

Используй laravel только как апи

да, я так и хочу. там по фронтенду у меня реакт. и не работают модули https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Это ж не связано с laravel, как не работают? Какая ошибка?

никакой ошибки. стили прилетают в <head> а вот у тегов не прописываются классы

а в сборке без ларавель работает на ура. скриын позже удалю

можно ли название функции из константы сделать?

Не понимаю где связь, почему ты laravel собираешь в месте с клиентом

я просто не знаю другого подхода, чтобы связывать фронт с бакэндом. на ларавеле папка resources считай что это папка src в проекте реакта и можно теперь делать запросы через 'api/request'

нет мне не нравится в перемешку. просто не нашел где показывается как из отдельного реакта делаются запросы на определенный сервер. там же защита стоит у сервера на корс. чтобы только с домена можно было отправлять запрос

Почитай про nginx, например

я просто не знаю другого подхода, чтобы связывать фронт с бакэндом. на ларавеле папка resources считай что это папка src в проекте реакта и можно теперь делать запросы через 'api/request'

Тоже самое но запросы на домен:api/ Тут у тебя индекс блейд подрывается и сервер на том же сервере А так будет тот же node static подрыва ь на сервере А и твой сервер на Б