title: Laravel webpack vue code splitting lazy routes are not versioned
body: <p>I'm working on a Laravel + Vue SPA project and I tried to optimize the project with code splitting and defining lazy routes, but now every lazy route file are not being versioned.</p>
  <p>Let's see if I can describe the problem.</p>
  <p><a href="https://i.stack.imgur.com/Jtio0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jtio0.png" alt="enter image description here" /></a></p>
  <p>You can see here the main files are versioned: <code>app.css</code>, <code>app.js</code>, <code>vendors.js</code>.
  But what happens with <code>users.js</code>? It's a lazy route.</p>
  <p><code>app.blade.php</code></p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;ca_ES&quot;&gt;
  &lt;head&gt;
      &lt;link rel=&quot;manifest&quot; href=&quot;/fullscreen-manifest.json&quot;&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;meta name=&quot;csrf-token&quot; content=&quot;{{ csrf_token() }}&quot;&gt;
  
      &lt;link rel=&quot;shortcut icon&quot; href=&quot;{{ asset('favicon.png') }}&quot;&gt;
      &lt;link rel=&quot;dns-prefetch&quot; href=&quot;//fonts.gstatic.com&quot;&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Roboto:100,300,500,700,900|Material+Icons' rel=&quot;stylesheet&quot;&gt;
      &lt;link href=&quot;{{ mix('css/app.css') }}&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  &lt;script src=&quot;{{ mix('js/app.js') }}&quot; defer&gt;&lt;/script&gt;
  &lt;script src=&quot;{{ mix('vendors.js') }}&quot; defer&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><code>routes.js</code></p>
  <pre><code>const home = () =&gt; import(/* webpackChunkName: &quot;home&quot; */ '@/pages/home');
  const login = () =&gt; import(/* webpackChunkName: &quot;home&quot; */ '@/pages/auth/login');
  const pageNotFound = () =&gt; import(/* webpackChunkName: &quot;home&quot; */ '@/pages/errors/404');
  const pageForbidden = () =&gt; import(/* webpackChunkName: &quot;home&quot; */ '@/pages/errors/403');
  
  import users from &quot;./users&quot;;
  import profile from &quot;./profile&quot;;
  (...)
  
  export default [
      ...users,
      ...profile,
      (...)
      {
          path: '/',
          name: 'home',
          component: home,
          meta: {
              auth: true,
          }
      },
      {
          path: '/forbidden',
          name: '403',
          component: pageForbidden,
          meta: {
              auth: true,
          }
      },
      {
          path: '/login',
          name: 'login',
          component: login,
          meta: {
              guest: true,
          }
      },
      {
          path: '*',
          name: '404',
          component: pageNotFound,
      }
  ];
  </code></pre>
  <p><code>users.js</code></p>
  <pre><code>const users = () =&gt; import(/* webpackChunkName: &quot;users&quot; */ '@/pages/users/index');
  const show = () =&gt; import(/* webpackChunkName: &quot;users&quot; */ '@/pages/users/show');
  
  export default [
      {
          path: '/users',
          name: 'users',
          component: users,
          meta: {
              auth: true,
              admin: true,
          }
      },
      {
          path: '/show/:id',
          name: 'users.show',
          component: show,
          meta: {
              auth: true,
              admin: true,
          }
      },
  ];
  </code></pre>
  <p><code>webpack.config.js</code></p>
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  const CompressionPlugin = require('compression-webpack-plugin');
  const moment = require('moment');
  
  module.exports = {
      output: {
          chunkFilename: '[name].js',
      },
      resolve: {
          extensions: ['.js', '.json', '.vue'],
          alias: {
              '@': path.join(__dirname, './resources/js'),
          }
      },
      plugins: [
          new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
          new BundleAnalyzerPlugin({
              analyzerMode: 'static',
              openAnalyzer: false,
              reportFilename: 'bundle-analyzer-plugin/reports/' + moment().format('YYYYMMDD') + '.html'
          }),
          new CompressionPlugin({
              filename: '[path].gz[query]',
              algorithm: 'gzip',
              test: /\.js$|\.css$|\.html$/,
              threshold: 10240,
              minRatio: 0.7
          }),
      ],
      optimization: {
          splitChunks: {
              cacheGroups: {
                  commons: {
                      test: /[\\/]node_modules[\\/]/,
                      name: 'vendors',
                      chunks: 'all'
                  }
              }
          }
      }
  };
  </code></pre>
  <p><code>webpack.mix.js</code></p>
  <pre><code>const config = require('./webpack.config');
  const mix = require('laravel-mix');
  
  mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css')
      .sass('resources/sass/pdf.scss', 'public/css');
  
  if (mix.inProduction()) {
      mix.version();
  }
  
  mix.webpackConfig(config);
  </code></pre>
  <p>So what am I doing wrong? I can import all lazy routes files on the app.blade.php and it would be importing with versioning, but I will be missing the point... The idea is this files are being include when the websites need them. But when they do that automatically it does without versioning.</p>