vue-cli3 Prefetch (官網內容)
<link rel="prefetch"> 是一種 resource hint，用來告訴瀏覽器在頁面加載完成后，利用空閑時間提前獲取用戶未來可能會訪問的內容。
默認情況下，一個 Vue CLI 應用會為所有作為 async chunk 生成的 JavaScript 文件 (通過動態 import()按需 code splitting 的產物) 自動生成 prefetch 提示。
這些提示會被 @vue/preload-webpack-plugin 注入，並且可以通過 chainWebpack 的 config.plugin('prefetch') 進行修改和刪除。
示例：
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugins.delete('prefetch');
//config.plugins.delete('preload'); //不需要禁用
// 或者
// 修改它的選項：
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}
- 當 prefetch 插件被禁用時，你可以通過 webpack 的內聯注釋手動選定要提前獲取的代碼區塊：
import(/* webpackPrefetch: true */ './someAsyncComponent.vue')
webpack 的運行時會在父級區塊被加載之后注入 prefetch 鏈接。
- 路由懶加載，可能要加載的組件進行預加載，當然一些可能跳轉的一些錯誤頁面也可以進行預加載
提示：
Prefetch 鏈接將會消耗帶寬。如果你的應用很大且有很多 async chunk，而用戶主要使用的是對帶寬較敏感的移動端，那么你可能需要關掉 prefetch 鏈接並手動選擇要提前獲取的代碼區塊。
基本優化
路由懶加載 router.js
const HomePage = () => import(/* webpackChunkName: "HomePage", webpackPrefetch: true */ 'views/homepage/index.vue')
routes: [
{
path: '*',
name: 'HomePage',
component: HomePage,
},
CDN加速
<!DOCTYPE html>
<html lang="en" style=" height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0">
<title>理財商城</title>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="./reset.css ">
<link rel="stylesheet" href="./font/font.css ">
<script type="text/javascript" src="./dprFlex.js"></script>
</head>
<body style="position: relative; width: 100%; height: 100%; overflow: hidden;background:#F1F1F2">
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script>
// eruda.init();
// var vConsole = new VConsole();
</script>
</body>
</html>
vue.config.js
configureWebpack: {
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'Axios':'axios',
'moment': 'moment'
}
},
min.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import Vuex from 'vuex'
import moment from 'moment'