【巷子】---vue路由懶加載---【vue】


一、懶加載

也叫延遲加載或者按需加載,即在需要的時候進行加載,

 

二、為什么要使用懶加載

像vue這種單頁面應用,如果沒有應用懶加載,運用webpack打包后的文件將會異常的大,造成進入首頁時,需要加載的內容過多,時間過長,會出啊先長時間的白屏,即使做了loading也是不利於用戶體驗,而運用懶加載則可以將頁面進行划分,需要的時候加載頁面,可以有效的分擔首頁所承擔的加載壓力,減少首頁加載用時

    簡單的說就是:進入首頁不用一次加載過多資源造成用時過長

 

三、非懶加載的路由配置項

四、vue異步組件實現路由懶加載

 

  使用vue的異步組件,可以實現路由的懶加載

 

  {           

     path: '/home',           

     name: 'home',           

     component: resolve => require(['../components/home'], resolve)       

   } 

 

五、es提出的import(推薦使用這種方式)

 

const homeFn = () => import('../components/home/home')

const movieFn = () => import('../components/movie/movie')   

 

 

 

export default new Router({   

   routes: [       

     {   

      path: '/home',   

        name: 'home',            

      component: homeFn       

     },       

     {            

      path: '/movie',            

      name: 'movie',           

       component: movieFn      

      }  

  ] })   

 

 

六、chunkFilename

 

chunkFilename:chunkname就是未被列在entry中,但有些場景需要被打包出來的文件命名配置。比如按需加載(異步)模塊的時候,這樣的文件是沒有被列在entry中的使用CommonJS的方式異步加載模塊 

chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM