Наконец, после нескольких часов напряженной работы и исследований мне удалось успешно выполнить разделение кода в моем приложении 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 файла, оно будет становиться все медленнее и медленнее с каждый компонент, который вы добавляете в свое приложение. У меня было очень плохое время, когда я занимался этим вопросом.

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