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

Posted 2023-02-16

【中文标题】Vue 2 应用程序无法在 vue-router 中延迟加载路由导入组件

【英文标题】：Vue 2 app can't lazy load routes import componentes in vue-router

【发布时间】：2021-12-23 21:52:51

【问题描述】：

我正在尝试按照指南在 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 文件吗？

【参考方案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;
  
;