一、代碼層面的優(yōu)化

?1、v-if和v-show的使用場(chǎng)景
?（1）v-if適用于在運(yùn)行時(shí)很少改變條件，不需要頻繁切換條件的場(chǎng)景，屬于真正的條件渲染，會(huì)確保在切換過(guò)程中，元素適當(dāng)?shù)谋讳N(xiāo)毀和重建，也是惰性的；
?（2）v-show適用于頻繁切換條件的場(chǎng)景，v-show不管初始的渲染條件是什么，元素總是會(huì)被渲染，然后根據(jù)css的display屬性的值去切換顯示與隱藏。

2、computed和watch的使用場(chǎng)景
?（1）當(dāng)需要進(jìn)行數(shù)值計(jì)算，并且依賴(lài)于其他數(shù)據(jù)時(shí)，應(yīng)該使用computed，可以利用computed的緩存特性，避免每次獲取值的時(shí)候都重新計(jì)算；
?（2）當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作時(shí)，應(yīng)該是用watch，使用watch允許我們進(jìn)行異步操作，限制我們執(zhí)行該操作的頻率，并且在我們得到最終結(jié)果前，設(shè)置中間值，能拿到每一次的當(dāng)前值和前一次的值。

?3、v-for循環(huán)遍歷必須為item添加key，key不建議設(shè)置為索引，且避免在同一個(gè)元素中同時(shí)使用v-if

4、長(zhǎng)列表性能優(yōu)化
?vue會(huì)通過(guò)Object.defineProperty()對(duì)數(shù)據(jù)進(jìn)行劫持，來(lái)實(shí)現(xiàn)響應(yīng)數(shù)據(jù)的變化，但是有時(shí)候我們的組件只需要實(shí)現(xiàn)對(duì)數(shù)據(jù)的展示就可以了，不會(huì)有其他修改刪除的操作，所以就不需要vue來(lái)劫持我們的數(shù)據(jù)，在大量數(shù)據(jù)展示的情況下，這能夠很明顯的減少組件初始化的時(shí)間，可以通過(guò)Object.freeze()方法來(lái)凍結(jié)一個(gè)對(duì)象，一旦被凍結(jié)的對(duì)象就不可以被修改

5、圖片資源懶加載：使用vue-lazyload插件
安裝：npm install vue-lazyload --save-dev
main.js引入：import VueLazyload from 'vue-lazyload'
使用：Vue.use(VueLazyload)
頁(yè)面中使用，直接將img的src屬性改成v-lazy：<img v-lazy="/static/img/logo.png">

6、路由懶加載：const comp = () => import('./Comp.vue')

7、第三方插件的按需引入

8、vue優(yōu)化無(wú)限列表性能：使用vue-virtual-scroll-list插件
安裝：npm install vue-virtual-scroll-list --save-dev
使用：<virtual-list style="height: 660px; overflow-y: auto;" :data-key="'id'" :data-sources="itemData" :data-component="itemComponent" /> (itemData：數(shù)據(jù)，itemConponent：真正展示內(nèi)容的組件)

9、keep-alive的使用
利用keep-alive將不活動(dòng)的組件緩存起來(lái)，在組價(jià)切換過(guò)程中，將組件的狀態(tài)保存在內(nèi)存中，防止重復(fù)渲染dom，減少加載時(shí)間及性能消耗，提高用戶(hù)體驗(yàn)。

二、webpack層面的優(yōu)化

1、對(duì)圖片進(jìn)行壓縮
在 vue 項(xiàng)目中除了可以在 webpack.base.conf.js 中 url-loader 中設(shè)置 limit 大小來(lái)對(duì)圖片處理，對(duì)小于 limit 的圖片轉(zhuǎn)化為 base64 格式，其余的不做操作。所以對(duì)有些較大的圖片資源，在請(qǐng)求資源的時(shí)候，加載會(huì)很慢，我們可以用 image-webpack-loader來(lái)壓縮圖片；
安裝：npm install image-webpack-loader --save-dev
webpack.js中配置：

{
? test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
? use:[
? ? {
? ? loader: 'url-loader',
? ? options: {
? ? ? limit: 10000,
? ? ? name: utils.assetsPath('img/[name].[hash:7].[ext]')
? ? ? }
? ? },
? ? {
? ? ? loader: 'image-webpack-loader',
? ? ? options: {
? ? ? ? bypassOnDebug: true,
? ? ? }
? ? }
? ]
}

2、減少es6轉(zhuǎn)為es5的冗余代碼
Babel插件會(huì)在es6代碼轉(zhuǎn)換成es5代碼的時(shí)候注入一些輔助函數(shù)，例如：class HelloWebpack extends Component{...}，這段代碼再被轉(zhuǎn)換成能正常運(yùn)行的es5代碼時(shí)需要以下兩個(gè)輔助函數(shù)：

babel-runtime/helpers/createClass ?// 用于實(shí)現(xiàn) class 語(yǔ)法
babel-runtime/helpers/inherits ?// 用于實(shí)現(xiàn) extends 語(yǔ)法

在默認(rèn)情況下，Babel會(huì)在每個(gè)輸出文件中內(nèi)嵌這些依賴(lài)的輔助函數(shù)代碼，如果多個(gè)源代碼文件都依賴(lài)于這些輔助函數(shù)，那么這些輔助函數(shù)的代碼將會(huì)出現(xiàn)很多次，造成代碼冗余，為了不然他們重復(fù)出現(xiàn)，可以在依賴(lài)他們時(shí)通過(guò) require('babel-runtime/helpers/createClass')的方式導(dǎo)入，這樣就能做到只出現(xiàn)一次了，babel-plugin-transform-runtime這個(gè)插件就是用來(lái)實(shí)現(xiàn)這個(gè)作用的，將相關(guān)的輔助函數(shù)進(jìn)行替換成導(dǎo)入語(yǔ)句，從而減小babel編譯出來(lái)的代碼的大??；
安裝：npm install babel-plugin-transform-runtime --save-dev
修改.babelrc配置文件：

"plugins": [
? ? "transform-runtime"
]

3、提取公共代碼，業(yè)務(wù)代碼和第三方庫(kù)代碼分開(kāi)：webpack3中使用CommonsChunkPlugin插件、webpack4中使用optimization.splitChunks插件

CommonsChunkPlugin插件詳細(xì)參數(shù)：
name： 給這個(gè)包含公共代碼的chunk命名
filename： 命名打包后生成的js文件
minChunks: 公共代碼的判斷標(biāo)準(zhǔn)，某個(gè)js模塊被多少個(gè)文件引入才算公共代碼，默認(rèn)為1，我們可以為2, 也就是說(shuō)如果
一個(gè)文件被其他頁(yè)面引入了超過(guò)了2次及以上，就可以認(rèn)為該文件就是公用代碼。
chunks: 表示需要在哪些chunk(配置中entry的每一項(xiàng))里尋找公共代碼進(jìn)行打包，默認(rèn)不設(shè)置，那么它的尋找范圍為所有的chunk;

如果項(xiàng)目中沒(méi)有把每個(gè)頁(yè)面的第三方庫(kù)和公共模塊提取出來(lái)，則項(xiàng)目會(huì)存在以下問(wèn)題：
a、相同的資源被重復(fù)加載，浪費(fèi)客戶(hù)的流量和服務(wù)器的成本
b、每個(gè)頁(yè)面需要加載的資源太大，導(dǎo)致網(wǎng)頁(yè)首屏加載緩慢，影響用戶(hù)體驗(yàn)
所以我們需要將多個(gè)頁(yè)面的公共代碼抽離成單獨(dú)的文件，來(lái)優(yōu)化以上問(wèn)題，webpack專(zhuān)門(mén)內(nèi)置了用于提取多個(gè)chunk中的公共部分的插件CommonsChunkPlugin，我們?cè)陧?xiàng)目中CommonChunkPlugin的配置如下：

// 所有在 package.json 里面依賴(lài)的包，都會(huì)被打包進(jìn) vendor.js 這個(gè)文件中。
new webpack.optimize.CommonsChunkPlugin({
? name: 'vendor',
? minChunks: function(module, count) {
? ? return (
? ? ? module.resource &&
? ? ? /\.js$/.test(module.resource) &&
? ? ? module.resource.indexOf(
? ? ? ? path.join(__dirname, '../node_modules')
? ? ? ) === 0
? ? );
? }
}),
// 抽取出代碼模塊的映射關(guān)系
new webpack.optimize.CommonsChunkPlugin({
? name: 'manifest',
? chunks: ['vendor']
})

optimization.splitChunks參數(shù)詳解：

（1）、cacheGroups：splitChunks配置的核心，對(duì)代碼的拆分規(guī)則全在cacheGroups緩存組里配置，緩存組里的每一個(gè)屬性都是一個(gè)配置規(guī)則，可以自己定義屬性名稱(chēng)，屬性值是一個(gè)對(duì)象，放的是對(duì)一個(gè)代碼拆分規(guī)則的描述，有兩個(gè)屬性：name和chunks；
name：提取出來(lái)的公共模塊將會(huì)以這個(gè)名稱(chēng)命名，可以不配置，如果不配置的話(huà)，就會(huì)生成默認(rèn)的文件名
chunks：指定哪些類(lèi)型的chunks參與拆分，值可以是string也可以是函數(shù)，如果是string的話(huà)，可以有三個(gè)值：all、async、initial，all代表所有模塊，async代表異步加載的，initial代表初始化時(shí)就能獲取的模塊，如果是函數(shù)，則可以通過(guò)chunks的name屬性等進(jìn)行更詳細(xì)的篩選

（2）、miniChunks：splitChunks是自帶默認(rèn)配置的，而緩存組默認(rèn)會(huì)繼承這些配置，其中有個(gè)miniChunks屬性，它是控制每個(gè)模塊什么時(shí)候被抽離出去：當(dāng)模塊被不同的entry引用的次數(shù)大于等于這個(gè)配置的值時(shí)，才會(huì)被抽離出去，默認(rèn)值是1，也就是任何模塊都會(huì)被抽離出去，（入口模塊也會(huì)被webpack引入一次）

（3）、miniSize：提取的chunk的最小大小

（4）、priority：值為數(shù)值型，可以是負(fù)數(shù)，作用是當(dāng)拆分組中設(shè)置多個(gè)拆分規(guī)則，且某個(gè)模塊符合多個(gè)規(guī)則時(shí)，則通過(guò)優(yōu)先級(jí)屬性priority來(lái)決定使用哪個(gè)拆分規(guī)則，優(yōu)先級(jí)高者執(zhí)行

（5）、test：用于進(jìn)一步控制緩存組選擇的模塊，可以是一個(gè)正則表達(dá)式，也可以是一個(gè)函數(shù)，可以匹配模塊的絕對(duì)路徑或chunk名稱(chēng)，匹配chunk名稱(chēng)時(shí)將選擇chunk中所有的模塊

例子：

optimization: {
? ? splitChunks: {
? ? ? ? minSize: 30, ?//提取出的chunk的最小大小
? ? ? ? cacheGroups: {
? ? ? ? ? ? default: {
? ? ? ? ? ? ? ? name: 'common',
? ? ? ? ? ? ? ? chunks: 'initial',
? ? ? ? ? ? ? ? minChunks: 2, ?//模塊被引用2次以上的才抽離
? ? ? ? ? ? ? ? priority: -20
? ? ? ? ? ? },
? ? ? ? ? ? vendors: { ?//拆分第三方庫(kù)（通過(guò)npm|yarn安裝的庫(kù)）
? ? ? ? ? ? ? ? test: /[\\/]node_modules[\\/]/,
? ? ? ? ? ? ? ? name: 'vendor',
? ? ? ? ? ? ? ? chunks: 'initial',
? ? ? ? ? ? ? ? priority: -10
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

4、構(gòu)建結(jié)果輸出分析：webpack-bundle-analyzer
webpack輸出的代碼可讀性很差，而且文件非常大，為了簡(jiǎn)單、直觀(guān)的分析輸出結(jié)果，可以使用分析工具，以圖形的形式將結(jié)果更直觀(guān)的展示出來(lái)
安裝：npm install --save-dev webpack-bundle-analyzer
webpack.config.js配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
? ? new BundleAnalyzerPlugin()
? ? ]

package.json的"scripts"中添加：

"dev": "webpack --config webpack.config.js --progress"

執(zhí)行語(yǔ)句生成分析報(bào)告：npm run dev

5、打包去掉console.log等語(yǔ)句：uglifyjs-webpack-plugin
安裝：npm install uglifyjs-webpack-plugin
webpack.config.js中配置：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
? ? configureWebpack: (config) => {
? ? ? ? if (process.env.NODE_ENV === 'production') {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? plugins: [
? ? ? ? ? ? ? ? ? ? //打包環(huán)境去掉console.log
? ? ? ? ? ? ? ? ? ? new UglifyJsPlugin({
? ? ? ? ? ? ? ? ? ? ? ? uglifyOptions: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? compress: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? warnings: false,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? drop_console: true, ?//注釋console
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? drop_debugger: true, //注釋debugger
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? pure_funcs: ['console.log'], //移除console.log
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? }),
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

三、基礎(chǔ)的web技術(shù)優(yōu)化

1、開(kāi)啟gzip壓縮：compression-webpack-plugin
安裝：//新版本不太兼容，推薦這個(gè)版本
npm install compression-webpack-plugin@6.1.1 --save-dev
在webpack.config.js中使用：

const CompressionWebpackPlugin = require('compression-webpack-plugin')
new CompressionWebpackPlugin({
? ? ? filename: '[path][base].gz',
? ? ? algorithm: 'gzip', ?// 壓縮算法，官方默認(rèn)壓縮算法是gzip
? ? ? test: /\.js$|\.css$|\.html$|\.eot$|\.woff$/, // 使用gzip壓縮的文件類(lèi)型
? ? ? threshold: 10240, ?// 以字節(jié)為單位壓縮超過(guò)此大小的文件，默認(rèn)是10240
? ? ? minRatio: 0.8, ?// 最小壓縮比率，默認(rèn)是0.8
? ? })

后端配置：
（1）Nginx：主要是下方的gizp配置哦，直接復(fù)制粘貼就可以使用啦，親測(cè)有效哦

server{
? ? //開(kāi)啟和關(guān)閉gzip模式
?? ?gzip on;
?? ?//gizp壓縮起點(diǎn)，文件大于2k才進(jìn)行壓縮;設(shè)置允許壓縮的頁(yè)面最小字節(jié)數(shù)，頁(yè)面字節(jié)數(shù)從header頭得content-length中進(jìn)行獲取。 默認(rèn)值是0，不管頁(yè)面多大都?jí)嚎s。建議設(shè)置成大于2k的字節(jié)數(shù)，小于2k可能會(huì)越壓越大。
?? ?gzip_min_length 2k;
?? ?// 設(shè)置壓縮所需要的緩沖區(qū)大小，以4k為單位，如果文件為7k則申請(qǐng)2*4k的緩沖區(qū)?
?? ?gzip_buffers 4 16k;
?? ?// 設(shè)置gzip壓縮針對(duì)的HTTP協(xié)議版本
?? ?gzip_http_version 1.0;
?? ?// gzip 壓縮級(jí)別，1-9，數(shù)字越大壓縮的越好，也越占用CPU時(shí)間
?? ?gzip_comp_level 2;
?? ?//進(jìn)行壓縮的文件類(lèi)型
?? ?gzip_types text/plain application/javascript text/css application/xml;
?? ?// 是否在http header中添加Vary: Accept-Encoding，建議開(kāi)啟
?? ?gzip_vary on;
}

（2）express的中間件：compression，主要用于進(jìn)行g(shù)zip壓縮，通常用于web性能優(yōu)化，能對(duì)文本內(nèi)容進(jìn)行壓縮，一般用于html文件；
安裝：npm install compression --save
使用：

var compression = require('compression');
const app = express()
// 啟用gzip
app.use(compression());

2、瀏覽器緩存
對(duì)靜態(tài)資源進(jìn)行緩存，根據(jù)是否需要重新向服務(wù)器發(fā)起請(qǐng)求來(lái)分類(lèi)，將http請(qǐng)求分為強(qiáng)制緩存和對(duì)比緩存

3、CDN的使用
瀏覽器從服務(wù)器上下載css、js和圖片等文件時(shí)都要和服務(wù)器連接，而大部分的服務(wù)器的帶寬都有限，如果超過(guò)限制，網(wǎng)頁(yè)就半天反應(yīng)不過(guò)來(lái)，而CDN可以通過(guò)不同的域名來(lái)加載文件，從而使下載文件的并發(fā)連接數(shù)大大增加，且CDN具有更好的可用性，更低的網(wǎng)絡(luò)延遲和丟包率

4、使用Chrome Performance查找性能瓶頸
Chrome的Performance面板可以錄制一段時(shí)間內(nèi)的js執(zhí)行細(xì)節(jié)及時(shí)間，步驟：
a、打開(kāi)Chrome開(kāi)發(fā)者工具，點(diǎn)進(jìn)Performance面板
b、點(diǎn)擊Record開(kāi)始錄制
c、刷新頁(yè)面或展開(kāi)某個(gè)節(jié)點(diǎn)
d、點(diǎn)擊stop停止錄制，就可以查看了

四、網(wǎng)絡(luò)層面的優(yōu)化

1、重復(fù)請(qǐng)求的取消
第一次請(qǐng)求還沒(méi)回來(lái)之前就進(jìn)行了第二次同樣的請(qǐng)求時(shí)，就應(yīng)該把第二次請(qǐng)求取消掉，防止重復(fù)請(qǐng)求；
在axios請(qǐng)求中進(jìn)行封裝，采用攔截器進(jìn)行處理，首先實(shí)現(xiàn)三個(gè)方法，當(dāng)請(qǐng)求方式、請(qǐng)求URL和攜帶參數(shù)都一致時(shí)，就可以認(rèn)為是同樣的請(qǐng)求，因此在發(fā)起請(qǐng)求時(shí)，可以根據(jù)當(dāng)前的請(qǐng)求方式、請(qǐng)求地址和攜帶的參數(shù)來(lái)生成一個(gè)唯一的key，同時(shí)為每個(gè)請(qǐng)求創(chuàng)建一個(gè)專(zhuān)屬的cancelToken，然后將key和cancelToken函數(shù)以鍵值對(duì)的形式保存到map對(duì)象中，使用map對(duì)象的好處就是可以快速判斷是否有重復(fù)的請(qǐng)求：

    // 用于根據(jù)當(dāng)前的請(qǐng)求信息生成請(qǐng)求的key
? ? generateReqKey(config) {
? ? ? const { url, method, params, data } = config;
? ? ? return [url, method, qs.stringify(params), qs.stringify(data)].join("&");
? ? },
? ? // 用于將當(dāng)前請(qǐng)求信息添加到pendingRequest對(duì)象中
? ? PendingRequest = new Map(),
? ? addPendingRequest(config) {
? ? ? const requestKey = this.generateReqKey(config)
? ? ? config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
? ? ? ? if(!this.PendingRequest.has(requestKey)) {
? ? ? ? ? this.PendingRequest.set(requestKey, cancel)
? ? ? ? }
? ? ? })
? ? },
? ? // 檢查是否有重復(fù)的請(qǐng)求，若存在則需要取消已經(jīng)發(fā)出的請(qǐng)求
? ? removeRequest(config) {
? ? ? const requestKey = this.generateReqKey(config)
? ? ? if (this.PendingRequest.has(requestKey)) {
? ? ? ? const CancelToken = this.PendingRequest.get(requestKey)
? ? ? ? CancelToken(requestKey)
? ? ? ? this.PendingRequest.delete(requestKey)
? ? ? }
? ? }

因?yàn)樾枰獙?duì)所有的請(qǐng)求都進(jìn)行處理，所以直接在攔截器來(lái)實(shí)現(xiàn)取消重復(fù)請(qǐng)求的操作，
（1）請(qǐng)求攔截器：作用是在請(qǐng)求發(fā)送前統(tǒng)一執(zhí)行某些操作，比如在請(qǐng)求頭中添加token字段
（2）響應(yīng)攔截器：作用是在接收到服務(wù)器響應(yīng)后統(tǒng)一執(zhí)行某些操作，比如根據(jù)不同的狀態(tài)碼進(jìn)行不同的響應(yīng)操作

    axios.interceptors.request.use(config => {
? ? ? // 檢查是否有重復(fù)的請(qǐng)求
? ? ? this.removeRequest(config)
? ? ? // 把當(dāng)前請(qǐng)求添加到PendingRequest對(duì)象中
? ? ? this.addPendingRequest(config)
? ? ? const token = localStorage.getItem('token')
? ? ? if(token) {
? ? ? ? config.headers.Authorization = `Bearer ${token}`
? ? ? }
? ? ? return config
? ? }, error => {
? ? ? return Promise.reject(error)
? ? })
? ? axios.interceptors.response.use(res => {
? ? ? // 從PendingRequest對(duì)象中移除請(qǐng)求
? ? ? this.removeRequest(res.config)
? ? ? const {data} = config;
? ? ? return data
? ? }, error => {
? ? ? // 從PendingRequest對(duì)象中移除請(qǐng)求
? ? ? this.removeRequest(error.config)
? ? ? return Promise.reject(error)
? ? })

2、限制失敗請(qǐng)求重試的次數(shù)，避免無(wú)效請(qǐng)求過(guò)多，導(dǎo)致大量的資源消耗

//在main.js設(shè)置全局的請(qǐng)求次數(shù)，請(qǐng)求的間隙
axios.defaults.retry = 4; ?// 請(qǐng)求次數(shù)
axios.defaults.retryDelay = 1000; ?// 請(qǐng)求間隙
//響應(yīng)攔截
axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
? ? var config = err.config;
? ? // 如果配置不存在或未設(shè)置重試選項(xiàng)，則返回錯(cuò)誤信息
? ? if(!config || !config.retry) return Promise.reject(err);
?
? ? // 設(shè)置變量即跟蹤重試次數(shù)
? ? config.__retryCount = config.__retryCount || 0;
?
? ? // 檢查我們是否已經(jīng)超過(guò)了總重試次數(shù)
? ? if(config.__retryCount >= config.retry) {
? ? ? ? // 返回錯(cuò)誤信息
? ? ? ? return Promise.reject(err);
? ? }
?
? ? // 重試次數(shù)加1
? ? config.__retryCount += 1;
?
? ? // 創(chuàng)建延時(shí)器等待發(fā)送重試請(qǐng)求
? ? var backoff = new Promise(function(resolve) {
? ? ? ? setTimeout(function() {
? ? ? ? ? ? resolve();
? ? ? ? }, config.retryDelay || 1);
? ? });
?
? ? // 返回調(diào)用AXIOS來(lái)重試請(qǐng)求
? ? return backoff.then(function() {
? ? ? ? return axios(config);
? ? });
});

3、善用緩存，減小網(wǎng)絡(luò)請(qǐng)求的次數(shù)
4、斷網(wǎng)處理：
在vuex中存放network的狀態(tài)，根據(jù)network的狀態(tài)判斷是否需要加載斷網(wǎng)組件，斷網(wǎng)情況就加載斷網(wǎng)組件，不加載對(duì)應(yīng)的頁(yè)面組件，點(diǎn)擊刷新，就跳轉(zhuǎn)到refresh頁(yè)面然后立即返回來(lái)實(shí)現(xiàn)重新獲取數(shù)據(jù)，所以新建refresh.vue，在beforeRouteEnter鉤子中返回當(dāng)前頁(yè)面
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-771043.html

// 斷網(wǎng)頁(yè)面
<template> ?
? ? <div id="app"> ? ?
? ? ? ? <div v-if="!network"> ? ? ?
? ? ? ? ? ? <h3>我沒(méi)網(wǎng)了</h3> ? ? ?
? ? ? ? ? ? <div @click="onRefresh">刷新</div> ? ? ?
? ? ? ? </div> ? ?
? ? ? ? <router-view/> ? ? ?
? ? </div>
</template>

<script>
? ? import { mapState } from 'vuex';
? ? export default { ?
? ? ? ? name: 'App', ?
? ? ? ? computed: { ? ?
? ? ? ? ? ? ...mapState(['network']) ?
? ? ? ? }, ?
? ? ? ? methods: { ? ?
? ? ? ? ? ? // 通過(guò)跳轉(zhuǎn)一個(gè)空頁(yè)面再返回的方式來(lái)實(shí)現(xiàn)刷新當(dāng)前頁(yè)面數(shù)據(jù)的目的
? ? ? ? ? ? onRefresh () { ? ? ?
? ? ? ? ? ? ? ? this.$router.replace('/refresh') ? ?
? ? ? ? ? ? } ?
? ? ? ? }
? ? }
</script>
在refresh.vue頁(yè)面中：
// refresh.vue
beforeRouteEnter (to, from, next) {
? ? next(vm => { ? ? ? ? ? ?
? ? ? ? vm.$router.replace(from.fullPath) ? ? ? ?
? ? }) ? ?
}

到了這里，關(guān)于Vue項(xiàng)目性能優(yōu)化方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！