Я пишу приложение Vue с webpack 3, и у меня есть следующие настройки:
- У меня есть единственная точка входа, называемая 'app'
- , приложение состоит изнесколько эксклюзивных компонентов
- весь мой код упакован в один файл "build.js" в папке dist через webpack и скрипт npm
- локально все работает нормально, мы используем webpack-dev-server для проверки кода
- мы отправляем наш код на удаленный сервер, который на базе Microsoft Azure
- , на сервере запускается тот же скрипт npm, создается пакет и артефакт копируетсяв общую папку этого сервера давайте назовем его «http://my -vue-app.com / dist / build.js »
И тут все становится сложно.Само приложение не используется как одностраничное приложение, обслуживаемое с этого сервера, но его компоненты используются другим основным приложением, которое обслуживается с другого сервера (и домена).Например, «http://my -main-app.com ».Основное приложение написано на Java с использованием JSP в старом стиле. Это означает, что каждая страница отображается на сервере, а навигация между ними вызывает перезагрузку страницы.А внизу каждой релевантной страницы есть простой тег HTML-скрипта, привязанный к приложению vue: <script src="http://my-vue-app.com/dist/build.js"></script>
До сих пор все просто работало, но с каждым новым компонентом размер пакета увеличивался.Кроме того, поскольку эти компоненты являются эксклюзивными, они не будут использоваться параллельно, и нет смысла заставлять пользователя загружать их все, чтобы использовать один.И есть риск, что ошибка в одном компоненте вызовет сбой всего приложения (это произошло один раз).
Итак, мы хотели отделить компоненты друг от друга, при этом все еще есть возможность загрузить их из одного места.Я использовал динамический импорт в самом приложении, чтобы создавать различные фрагменты с компонентами, и это работало хорошо.Основное приложение все еще было доступно как «build.js», в то время как другие фрагменты загружались асинхронно по требованию.Эти блоки могут иметь встроенный хеш-компоновщик для кэширования, пока они все еще доступны из приложения.
Затем я хотел сделать еще одно улучшение - разделить основную часть приложения на часть поставщика и часть приложения.использовать кэширование еще дальше, и это то, с чем у меня проблемы.Я мог бы применить хэши к build.js и vendor.js (в результате чего sth вроде 'build.f388.js'), но тогда такие файлы не могут быть включены в тег script.Бэкэнд-приложение не будет знать правильный хеш для каждой сборки.Я мог бы оставить файлы без хеша, но тогда возникнет проблема, когда аннулировать кеш.Я также читал о манифесте и различных плагинах для включения хэшированных файлов, но проблема в том, что всегда производится включение в html-файл на одном и том же сервере.В данном случае это не так.
В крайнем случае я думал о том, чтобы написать свой собственный JS-файл vanilla для чтения JSON с помощью манифеста и на его основе создать теги сценария, но я думаю, это должен быть другойрешение.Я имею в виду, что вы не используете фреймворк, который должен работать «из коробки», чтобы писать свои собственные обертки, просто чтобы поддерживать простую задачу из старого мира - иметь одну статическую точку входа с учетом кеширования.Тем более, что он нормально работает с обычными блоками.
Это действительно такая странная установка?Необычно ли развертывать приложение FE на одном сервере и указывать на файл ввода в другом приложении на другом сервере?Как я могу достичь этого в стиле "webpack" ?