Laravel-mix: [Proposal] Best code splitting when we use mix.extract();

Created on 28 May 2019 · 4Comments · Source: JeffreyWay/laravel-mix

Actual Code Splitting

When we use mix.extract (); it generates three main files:

Application Code: app.js
Vendor Libraries: vendor.js
Manifest (webpack Runtime): manifest.js

The files of vendor.js andmanifest.js are fine that are always loaded, but in the app.js there is a large amount of code that we do not use in some pages.

Best Code Splitting

Application Code In Separate Files: hello.js, counter.js, todos.js, header.js, link.js, card.js
Vendor Libraries: vendor.js
Manifest (webpack Runtime): manifest.js

The javascript code that we will always need throughout our page

``` blade

Laravel

    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <div id="app">
       <div id="header"></div> <!-- JS component -->
       @yield('content')
    </div>

      <script src="/js/manifest.js"></script>
      <script src="/js/vendor.js"></script>
      <script src="/js/header.js"></script>
      @stack('scripts')
</body>

````