Vue-cli 打包优化之路由懒加载应该如何配置

在现代 Web 应用程序中,使用路由懒加载是一种常见的优化技术。这可以帮助我们减小应用程序的初始包大小,提高页面加载速度。在 Vue-cli 中,我们可以通过以下步骤来配置路由懒加载:

1. 在 Vue 路由配置中,使用动态导入语法来引入组件,而不是直接引用组件文件。这样,webpack 会将这些组件分割成单独的块文件,在需要时才加载。

   
   const routes = [
     {
       path: '/about',
       component: () => import('./views/About.vue')
     }
   ]
       

2. 在 Vue-cli 的 webpack 配置中,可以进一步优化输出,比如给每个块文件起一个有意义的名称,这样可以更好地识别加载的文件。

   
   output: {
     filename: 'js/[name].[contenthash].js',
     chunkFilename: 'js/[name].[contenthash].js'
   }
       

3. 为进一步减小应用程序的包大小,可以将第三方库(如 Vue、Vuex、Vue-Router 等)提取到一个单独的供应商块中。

   
   optimization: {
     splitChunks: {
       chunks: 'all',
       maxInitialRequests: Infinity,
       minSize: 0,
       cacheGroups: {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
           name(module) {
             const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
             return `vendor.${packageName.replace('@', '')}`;
           }
         }
       }
     }
   }
       

通过以上配置,我们可以有效地优化 Vue-cli 应用程序的打包输出,提高页面加载速度,为用户提供更好的体验。