title: Laravel Vue Non SPA - How to split the files for every page for its vue js components?
body: <p>My application is using laravel vue but not SPA,.. so im still using laravel blades to separate the pages. Every page are importing app.js. My App.js is compiled by webpack and all my vue components are compiled on that file. so the problem is the app.js getting MB size and the every page will slow to load that file. Is their way to split the code of vuejs or separate the file for every pages using webpack?</p>
  <p>this is my webpack.js in my web application.</p>
  <pre><code>const mix = require('laravel-mix');
  
  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel application. By default, we are compiling the Sass
   | file for the application as well as bundling up all the JS files.
   |
   */
  
  mix.setPublicPath('public')
      .setResourceRoot('../') // Turns assets paths in css relative to css file
      // .options({
      //     processCssUrls: false,
      // })
      .sass('resources/sass/frontend/app.scss', 'css/frontend.css')
      .sass('resources/sass/backend/app.scss', 'css/backend.css')
      .js('resources/js/frontend/app.js', 'js/app.js')
      .js([
          'resources/js/backend/before.js',
          'resources/js/backend/app.js',
          'resources/js/backend/after.js'
      ], 'js/backend.js')
  
      .extract([
          // Extract packages from node_modules to vendor.js
          'jquery',
          'bootstrap',
          'popper.js',
          'axios',
          'sweetalert2',
          'lodash'
      ])
      .sourceMaps();
  
  if (mix.inProduction()) {
      mix.version()
          .options({
              // Optimize JS minification process
              terser: {
                  cache: true,
                  parallel: true,
                  sourceMap: true
              }
          });
  } else {
      // Uses inline source-maps on development
      mix.webpackConfig({
          devtool: 'inline-source-map'
      });
  }
  </code></pre>
  <p>My laravel is using laravel boiler plate template and he separated the other files into vender.js. And my problem is the app.js getting biggger size and it will hard to load for the users have slower connection.</p>