目前有三種方式實現路由元件的懶載入，分別是：
把路由配置，進行修改
path: 『/shopcar』,
name: 『shopcar』,
component: resolve => require([』@/pages/shopcar』],resolve)
1）、執行是開啟chrome的network，就會看到進入路由 /shopcar 時，會多出另外 乙個js檔案。一般是0.js或者1.js
2）、用npm run build打包時，wepback就會多打了乙個 js檔案（如：0.b5a82d6947b2e30edcc8.js），這個js檔案就是把shopcar檔案進行了單獨打包。同樣的在network裡，就會看到進入路由 /shopcar 時，多出乙個單獨的js檔案的請求
注：這種方式，webpack會把每個非同步元件單獨打成乙個js檔案。
主要是把原來的引入方式進行修改 ，路由配置就不用改了：
1、不指定webpackchunkname，每個元件單獨打乙個js檔案
原來是：import shopcar from 『@/pages/shopcar』
修改後：const shopcar = () => import(』@/pages/shopcar』);
修改後的做法是定義了乙個函式，由於函式不呼叫不執行，所有，一開始時，並不會引入該元件，只有路由跳轉時才會呼叫該函式。
2、指定webpackchunkname，相同的webpackchunkname就會打在同乙個js檔案裡
1）、以下兩個元件的webpackchunkname相同，所以，打在乙個js檔案裡
const shopcar = () => import(/* webpackchunkname: 『demot』 */ 『@/pages/shopcar』);
const goodsdetailpage = () => import(/* webpackchunkname: 『demot』 */ 『@/pages/goodsdetailpage』);
2）、下面這個元件的webpackchunkname和上面兩個不一樣，所以，單獨打在乙個js檔案裡
const login = () => import(/* webpackchunkname: 『demoty』 */ 『@/pages/login』);
這種方式，只改路由配置即可。
如： path: 『/goodsdetailpage』,
name: 『goodsdetailpage』,
component: r => require.ensure(, () => r(require(』@/pages/goodsdetailpage』)), 『demot』)
path: 『/login』,
name: 『login』,
component: r => require.ensure(, () => r(require(』@/pages/login』)), 『demot』)
path: 『/shopcar』,
name: 『shopcar』,
component: r => require.ensure(, () => r(require(』@/pages/shopcar』)), 『demoty』)
以上**中，我把login和goodsdetailpage使用了相同的chunkname
路由懶載入（按需載入）
比較常用的import 一 為什麼要使用路由懶載入 在單頁應用中，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，延時過長，不利於使用者體驗，運用懶載入可以將頁面進行劃分，按需載入頁面，可以分擔首頁所承擔的載入壓力，減少載入用時。二 定義 懶載入簡...
vue路由懶載入,元件按需載入
懶載入也叫延遲載入，即在需要的時候進行載入，隨用隨載。在單頁應用中，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，延時過長，不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用...
vue專案實現路由按需載入 路由懶載入 的3種方式
vue非同步元件 es提案的import webpack的require,ensure 1 vue非同步元件技術 非同步載入 vue router配置路由 使用vue的非同步元件技術 可以實現按需載入 但是,這種情況下乙個元件生成乙個js檔案 vue非同步元件技術 元件懶載入方案二 路由懶載入 使用...