vue项目中 页面组件懒加载 使用webpackChunkNmae

在路由中使用 

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') 

来实现组件的懒加载  这种配置会生产一个about.[hash].js

 对于优化首屏很有帮助， 但对于内部页面会有一点损失，比较资源不会一次加载到位的。

  

   

    

     

    
    

     

      const routes = [
     
    
   

    

     

    
    

     

        {
     
    
   

    

     

    
    

     
    path: '/',
     
    
   

    

     

    
    

     
    name: 'Home',
     
    
   

    

     

    
    

     
    component: Home
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

        {
     
    
   

    

     

    
    

     
    path: '/about',
     
    
   

    

     

    
    

     
    name: 'About',
     
    
   

    

     

    
    

     
    // route level code-splitting
     
    
   

    

     

    
    

     
    // this generates a separate chunk (about.[hash].js) for this route
     
    
   

    

     

    
    

     
    // which is lazy-loaded when the route is visited.
     
    
   

    

     

    
    

     
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      ]
     
    
  
 

  
 
 

在开发时可以有选择性地懒加载，全部加载。 这个属于是router级别的代码分割。

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/104712227