[Vuejs]-Vue 2 app can't lazy load routes import componentes in vue-router

by

0👍

You can try a different config, something like this:

module.exports =
{
  configureWebpack: (config) =>
  {
    config.optimization = {
      // runtimeChunk: 'single',
      moduleIds: 'hashed',
      splitChunks:
      {
        automaticNameDelimiter: '_',
        chunks: 'all',
        maxInitialRequests: 5,
        minSize: 5000,
        // maxSize: 250000,
        cacheGroups:
        {
          default:
          {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
          },
          vendor:
          {
            reuseExistingChunk: true,
            test: /[\\/]node_modules[\\/]/,
            name(module)
            {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `vendors_${packageName.replace('@', '')}`;
            },
          },
        },
      },
    };
  },
  chainWebpack: config =>
  {
    config.resolve.symlinks(false);
    if (process.env.NODE_ENV === 'development')
    {
      config.module.rule('eslint').use('eslint-loader').loader('eslint-loader').tap(options =>
      {
        delete options.cacheIdentifier;
        options.cache = false; // otherwise on each restart cached errors won't be shown !!!
        return options;
      });
    }
    config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options =>
    {
      delete options.cacheDirectory;
      return options;
    });
    config.module.rule('vue').uses.delete('cache-loader');
    config.module.rule('js').uses.delete('cache-loader');
    config.plugins.delete('prefetch'); // for async routes
    config.plugins.delete('preload'); // for CSS

    // condense whitespace in templates
    config.module.rule('vue').use('vue-loader').tap(options =>
    {
      options.compilerOptions = { whitespace: 'condense' };
      return options;
    });

    return config;
  }
};

Leave a comment