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

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

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

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

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

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

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

webpack中有一項(xiàng)productionSurceMap設(shè)置，productionSourceMap是什么？是打包后是否讓每個js文件都生成一個.map文件？true代表生成，false代表不生成。那么.map文件作用是什么？因?yàn)榇虬蟠a都是經(jīng)過壓縮加密的，如果出現(xiàn)報錯情況，輸出錯誤信息，不會知道是哪里代碼有問題，.map就行沒有加密一樣，能準(zhǔn)確輸出哪一行出錯了。但是在生產(chǎn)環(huán)境中，我們是不需要輸出錯誤信息的，在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，如果對此配置感興趣,可前往 github查看具體配置

總結(jié) 

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

最新評論