像vue這種單頁面應用，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，
需要載入的內容過多，時間過長，會出現長時間的白屏，
即使做了loading也是不利於使用者體驗，
而運用懶載入則可以將頁面進行劃分，
需要的時候載入頁面，
可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時
分為三種
vue非同步元件
es提案的import()
webpack的require,ensure(）
一.非同步元件技術就是非同步載入吧
vue-router配置路由 , 使用vue的非同步元件技術 , 可以實現按需載入 .
但是,這種情況下打包時會乙個元件生成乙個js檔案
/* vue非同步元件技術 */
,,
2.路由懶載入（import）
const 元件名=() => import('元件路徑');
//下面2行**，沒有指定webpackchunkname，每個元件打包成乙個js檔案。
const home = () => import('@/components/home')
const index = () => import('@/components/index')
const about = () => import('@/components/about')
//下面2行**，指定了相同的webpackchunkname，會合併打包成乙個js檔案。
把元件按組分塊
const home = () => import(/*
webpackchunkname: 'importfuncdemo'
*/ '@/components/home')
const index = () => import(/*
webpackchunkname: 'importfuncdemo'
*/ '@/components/index')
const about = () => import(/*
webpackchunkname: 'importfuncdemo'
*/ '@/components/about')
3.webpack的require.ensure
vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需載入。這種情況下，多個路由指定相同的chunkname，會合併打包成乙個js檔案。
/*元件懶載入方案三: webpack提供的require.ensure() */,
, //r就是resolve
const list = r => require.ensure(, () => r(require('../components/list/list')), 'list');
//這種是官方推薦的寫的 按模組劃分懶載入
//估計公司裡也是這麼寫的
VUE Webpack 實現懶載入的三種方式
第一種const router new router const router new router r就是resolve const list r require.ensure r require components list list list 路由也是正常的寫法 這種是官方推薦的寫的 按模組...
VUE Webpack 實現懶載入的三種方式
第一種 引入方式 就是正常的路由引入方式 const router new router 第二種 const router new router 第三種 推薦！r就是resolveconst list r require.ensure r require components list list l...
懶載入和預載入的區別
預載入增加了伺服器壓力，換來的是使用者體驗的提公升，典型例子是在乙個較多的網頁中，如果使用了預載入就可以避免網頁載入出來是時，的位置一片空白 可能還沒載入出來 造成不好的使用者體驗 懶載入的作用減少不要的請求，緩解了伺服器壓力 原理 原理很簡單，先把img的src指向空或者乙個小，真實的位址儲存在i...