Наконец, после нескольких часов напряженной работы и исследований мне удалось успешно выполнить разделение кода в моем приложении Laravel+Vuejs.
Это моя первая статья среднего размера, и я пишу ее, потому что нашел очень мало информации о разделении кода в Laravel Mix, а статьи, которые я нашел, были не такими простыми и в них не хватало некоторых моментов. Итак, я подумал, что было бы неплохо начать работу с Medium по этой теме.
Давайте перейдем непосредственно к статье. Я предполагаю, что вы используете связку Laravel+Vuejs и используете vue-router
для выполнения маршрутизации через ваше приложение. Итак, первым шагом будет установка пакета babel-plugin-syntax-dynamic-import.
Установите и настройте плагин динамического импорта Babel.
Чтобы установить этот плагин, перейдите в корневую папку документа и выполните следующую команду npm
.
npm install @babel/plugin-syntax-dynamic-import
После этого создайте файл .babelrc в корне документа и заполните его следующим содержимым.
{ “plugins”: [“@babel/plugin-syntax-dynamic-import”] }`
Теперь пришло время убедиться, что в наш основной блейд-файл включены все файлы, чтобы наше приложение могло работать так же, как оно работало до разделения кода.
Включить/импортировать все необходимые файлы в блейд-файл индекса.
Поскольку наш код теперь будет разделен на несколько частей, файлы нашего приложения css и js. Это означает, что если вы до сих пор импортировали только файл app.js и раньше все работало, как ожидалось, то теперь этого не произойдет!
Вы должны явно импортировать app.css в основной файл блейда, содержащий экземпляр приложения Vuejs. Итак, ваш индексный блейд-файл будет выглядеть следующим образом.
<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ env('APP_NAME') }}</title> <!-- CSS --> <link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css" /> </head> <body> <div id="app"> <router-view></router-view> </div> <!-- Javascripts --> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
Если вы выполнили эти шаги, ваше приложение не сломается после запуска hot
или watch
или production
после разделения кода, потому что оно обязательно загрузит все необходимые файлы Javascript и CSS. Что-то, что никто не сказал мне делать, и я потратил около 2-3 часов, выясняя, что произошло!
Тем не менее, есть еще один шаг, который необходимо выполнить, чтобы правильно выполнить разделение кода. Вы должны загрузить компоненты в файл routes.js
, используя функцию импорта.
Импорт компонентов с помощью функции Import()
Мы должны использовать функцию import()
, потому что ее можно использовать как точку разделения кода, и веб-пакет ее понимает. Таким образом, после использования функции import()
для импорта всех компонентов, которые есть в вашем приложении, в файл routes.js
, webpack будет создавать отдельный фрагмент для каждого компонента всякий раз, когда создается пакет.
Вам нужно изменить метод импорта компонентов.
От:
Import ComponentName from './components/path/ComponentName.vue // OR Vue.component('component-name', { /* ... */ })
To:
const ComponentName = () => import('./components/path/ComponentName.vue' /* webpackChunkName: "js/components/component-name" */)
После этого выполните любую из следующих команд, чтобы скомпилировать приложение vuejs и посмотреть, как оно разделяет все импортированные компоненты на небольшие фрагменты.
npm run production
npm run watch
Заключение. Очень важно выполнять разделение кода, если вашему приложению требуется много компонентов, потому что, если вы компилируете свое приложение с помощью одного скомпилированногоapp.js
файла, оно будет становиться все медленнее и медленнее с каждый компонент, который вы добавляете в свое приложение. У меня было очень плохое время, когда я занимался этим вопросом.
Всегда убедитесь, что вы предоставляете наилучшие впечатления посетителям/клиентам, которые регулярно посещают ваш сайт или используют ваше приложение. разделение кода, безусловно, значительно улучшит скорость вашего сайта!