Stelikas's avatar

Laravel Mix dead code elimination best practices

Based on some reports app.js file has a lot of code (77% of it) which is not being used. I did some changes on my webpack and also I'm dynamically importing components in Vue but still no luck.

const mix = require('laravel-mix');
const webpack = require('webpack');
require('vuetifyjs-mix-extension')
require('laravel-mix-purgecss');
require('laravel-mix-bundle-analyzer');
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

mix.js('resources/js/app.js', 'public/js').js('resources/js/app2.js', 'public/js').vuetify('vuetify-loader').vue()
   .sass('resources/sass/app.scss', 'public/css')
   .css('../assets/css/booking.css', 'public/css')
   .css('../assets/css/custom.css', 'public/css');

   mix.extract(['vue','vuetify'])

   if (mix.inProduction()) {
      mix.version();
  }  

  mix.webpackConfig({
     output: {
        publicPath: '/core/public/',
        chunkFilename: '[name].js?id=[contenthash]',
     },

     plugins: [
      new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /en-gb|el/),
      new CaseSensitivePathsPlugin()
    ]
  })

I can't find a proper way-documentation to eliminate dead code through Laravel Mix.

0 likes
11 replies
Sinnbeck's avatar

Is this "dead code" in your code or in packages? I assume packages. Sounds like what you want is tree shaking

Stelikas's avatar

@Sinnbeck If the dead code was in the packages, aren't the packages inside vendor.js? In webpack i extract the code in three files with code splitting

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

Where can i find a proper documentation or tutorial to implement tree-shaking in my project?

Sinnbeck's avatar

@Stelikas You need to check each package you use to see if they have special documentation for tree shaking. And yes you are extracting them to vendor.js, but unless they get "tree shaken" you get the whole thing.

For instance lodash.

import _ from 'lodash'

this imports the whole thing.. so every single function is imported. But perhaps you only need a few?

import { map, uniq } from 'lodash';

now we only import a few, and thereby "tree shake" the rest

Stelikas's avatar

@Sinnbeck I understand but the reports are showing that app.js has a lot of unused code not vendor.js, so shouldn't i look into app.js?

Sinnbeck's avatar

@Stelikas Well maybe you are using some packages in there that isnt vue or vuetify? Those the the once two you extract.

Stelikas's avatar

@Sinnbeck That's a production build, i run bundle analyzer in production, you can see it in the webpack code above.

Sinnbeck's avatar

@Stelikas ok you should look into if you can tree shake or purge either of those huge ones. Grapes js and vuetify css

Stelikas's avatar

@Sinnbeck So i used purge css and changed the mix.extract to mix.extract(['vue','vuetify', 'grapes', 'lottie-player', 'moment', 'bootstrap', 'jquery']) and the size decreased significantly. I read here https://github.com/laravel-mix/laravel-mix/issues/3010 that in Laravel Mix 6 it doesn't automatically detect and extract packages, that's what i also noticed, so you must write them manually which is pretty odd, anyway, of course there is room for improvement and if anyone has any suggestions I'm happy to hear.

Please or to participate in this conversation.