快捷導(dǎo)航

vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開網(wǎng)頁(yè)

更新時(shí)間：2022年08月17日 10:31:55 作者：m0_67394006

最近在搭建自己的博客,前端采用Vue技術(shù),發(fā)現(xiàn)首頁(yè)加載速度非常之慢,常常達(dá)到10S左右,遂開始優(yōu)化之旅,這篇文章主要給大家介紹了關(guān)于vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開網(wǎng)頁(yè)的相關(guān)資料,需要的朋友可以參考下

【vue網(wǎng)站優(yōu)化】網(wǎng)頁(yè)渲染速度快到極致

在將打包后的dist目錄上傳到服務(wù)器時(shí)，往往會(huì)出現(xiàn)首次加載頁(yè)面速度較慢的情況，以下給出幾點(diǎn)優(yōu)化意見

在路由配置文件中，采用路由懶加載

當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件，這樣就會(huì)更加高效。

vue-router官網(wǎng)介紹

component: () =>
import(/* webpackChunkName: "login" */ '@/views/login/login.vue'),

關(guān)閉webpack的productionSourceMap選項(xiàng)

webpack中有一項(xiàng)productionSurceMap設(shè)置，productionSourceMap是什么？是打包后是否讓每個(gè)js文件都生成一個(gè).map文件？true代表生成，false代表不生成。那么.map文件作用是什么？因?yàn)榇虬蟠a都是經(jīng)過壓縮加密的，如果出現(xiàn)報(bào)錯(cuò)情況，輸出錯(cuò)誤信息，不會(huì)知道是哪里代碼有問題，.map就行沒有加密一樣，能準(zhǔn)確輸出哪一行出錯(cuò)了。但是在生產(chǎn)環(huán)境中，我們是不需要輸出錯(cuò)誤信息的，在webpack.config.js中找到productionSourceMap選項(xiàng)，并關(guān)閉它

source-map官網(wǎng)描述

productionSourceMap: false,

使用uglifyjs-webpack-plugin來壓縮js文件

官網(wǎng)敘述很直白，就是直接壓縮，在此不做過多敘述

插件描述

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

new UglifyJsPlugin({
    uglifyOptions: {
	    compress: {
	          warnings: false,
	    }
    },
    sourceMap: config.build.productionSourceMap,
    parallel: true
}),

使用cdn加速用來加載三方插件

點(diǎn)擊跳轉(zhuǎn)之前的文章查看，此處不做過多贅述

服務(wù)器端開啟gzip壓縮

前端采用compression-webpack-plugin插件將代碼壓縮為gzip結(jié)尾的文件，后端通過nginx開啟gzip壓縮，完成完整壓縮流程
插件描述

const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({

        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
            '\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')$'
        ),
        threshold: 10240,
        minRatio: 0.8
    })
)

前端

nginx

gzip_static: on

注：在github pages上可直接上傳gzip文件，github默認(rèn)開啟gzip選項(xiàng)，由于webpack配置可能不同，所以僅提供解決思路，不建議直接copy，如果對(duì)此配置感興趣,可前往 github查看具體配置

總結(jié)

到此這篇關(guān)于vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開網(wǎng)頁(yè)的文章就介紹到這了,更多相關(guān)vue秒開網(wǎng)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: