Vue 2 应用程序无法在 vue-router 中延迟加载路由导入组件答案

【问题标题】：Vue 2 app can't lazy load routes import componentes in vue-routerVue 2 应用程序无法在 vue-router 中延迟加载路由导入组件
【发布时间】：2023-03-09 12:21:02
【问题描述】：

我正在尝试按照指南在 Vue 2 应用程序中延迟加载路由，但 webpack 没有创建块。

在我的路由器文件中

const Home = () => import(/* webpackChunkName: "Home" */'@/features/titles/views/Home.vue');

我的 vue 配置文件已经删除了预取和预加载插件（如 suggested here）

config.plugins.delete('prefetch');

但是构建任务的输出总是一样的：

File           Size                                                                              Gzipped

  dist/app.js    2024.66 KiB                                                                       452.42 KiB

vue版本是2.6.1，vue-router是3.0.7。该项目设置了 Typescript，我不知道是否有任何关系，因为在其他使用纯 js 的类似项目中，路由中的延迟加载工作正常。任何人都知道实施/配置中可能有什么问题吗？

【问题讨论】：

你能给我们看看你的整个 router.ts 文件吗？

标签： vue.js vuejs2 vue-router

【解决方案1】：

您可以尝试不同的配置，如下所示：

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;
  }
};

【讨论】：