Question 15264 in Laravel Question posted in
The official Laravel Documentation can be found here.

Minify vendor.js file in Laravel Mix

I’m trying to optimize the page load and after doing a lighthouse review i found out that vendor.js file is 5MB and doesn’t use dead code elimination, although, I’m using dynamic imports, so vendor.js file should be smaller, obviously I’m doing something wrong.

I’m dynamically importing components like below:

const app = new Vue({
    vuetify,
    el: '#app',
    components: {
        'currency-converter': () => import(
          /* webpackChunkName: "components/js/Assets/Menu/Currency" */ 
          './components/Assets/Menu/Currency.vue'
        ),
...

When loading the page i can see that each component gets loaded when inspecting the network tab, the vendo.js file also gets loaded and it’s 5MB where that shouldn’t be the case when i dynamically import each component, so i should eliminate the dead code which is not getting used somehow.

My mix.js file:

mix.js('resources/js/admin.js', 'public/js').js('public/assets/admin/main.js', 'public/js')
    .js('resources/js/app.js', 'public/js').vue().vuetify('vuetify-loader')
    .sass('resources/sass/admin.scss', 'public/css')
    .css('public/assets/css/main.css', 'public/css')
    .webpackConfig({
        output: {
            publicPath: '/',
            chunkFilename: '[name].js?id=[contenthash]',
         },
        plugins: [
            new webpack.ContextReplacementPlugin(/moment[/]locale$/, /en-gb|el/),
            new NodePolyfillPlugin()
        ],
    });

    mix.extract();

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

I looked for resources but I haven’t found out how to do this properly.

Tags:

2

Answers


  1. 0

    Have you checked if the dynamically imported components are also present in the vendor.js?
    In my experience vendor bundles can get this large – if you do not configure the server correctly to compress the sources for transport (gzip, brotli).
    Perhaps this is just a config issue on the server.

    Login or Signup to reply.
  2. 0

    You could use tree shaking plugin to remove the dead code, this is really your only option outside of using production mode for optimisations in Mix.

    const DeadCodePlugin = require('webpack-deadcode-plugin');

module.exports = {
  // ...
  plugins: [
    new DeadCodePlugin({
      patterns: ['**/*.(js|jsx|css)'],
      exclude: ['**/*.(stories|spec).(js|jsx)'],
    }),
  ],
  // ...
};

    Also have you considered using the minify plugin for webpack?

    const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin(),
    ],
  },
  plugins: [
    new webpack.optimize.MinimizePlugin(),
  ],
  // ...
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search