1. 程式人生 > >【vue】--------------vue路由懶加載-------------【劉】

【vue】--------------vue路由懶加載-------------【劉】

resolve utils commonj pan ons 需要 require nbsp name

一、懶加載

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

二、為什麽要使用懶加載

  像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

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

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

【vue】--------------vue路由懶加載-------------【劉】