JS前端首屏優(yōu)化技巧
更新時間：2022年07月14日 08:33:43 作者：嗆再首
這篇文章主要為大家介紹了JS前端首屏優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
引言
前段時間領導突然找到我，說新項目的訪問怎么變得這么慢，我立馬訪問對應頁面，果然，首頁加載8、9s，這近10s的等待時間，對于用戶來說，無疑是痛苦的。于是乎領導就把這個首頁加載優(yōu)化的任務交給我了。
在經過我的一頓折騰后，首屏加載時間基本都在2s左右，這樣的首屏加載時間，對于用戶來說，算是可以接受的。
因此在此記錄一下，針對首屏優(yōu)化我做了些什么
打包分析
在 package.json 中添加命令
"report": "vue-cli-service build --report"
然后命令行執(zhí)行 npm run report，就會在dist目錄下生成一個 report.html 文件，右鍵瀏覽器中打開即可看到打包分析報告。
下面我們可以針對報告中的問題逐一進行優(yōu)化
路由懶加載
vue 中使用
component: () => import("views/home/Home.vue"),
vue.config.js 修改 productionSourceMap 為 false
productionSourceMap: false
首屏請求優(yōu)化
vue 腳手架默認開啟了 preload 與 prefetch，當我們項目很大時，這個就成了首屏加載的最大元兇了
- preload 與 prefetch 都是一種資源預加載機制；
- preload 是預先加載資源，但并不執(zhí)行，只有需要時才執(zhí)行它；
- prefetch 是意圖預獲取一些資源，以備下一個導航/頁面使用；
- preload 的優(yōu)先級高于 prefetch。
//vue.config.js
chainWebpack(config) {
config.plugins.delete('preload') // 刪除默認的preload
config.plugins.delete('prefetch') // 刪除默認的prefetch
}
原先項目首頁近六百個請求，設置后降到一百左右，減少了http的連接，自然也就減少了首屏加載時間。
配置前：
配置后：
圖片壓縮
有時候 ui 給到的圖片資源可能過大，因此我們可以對圖片進行壓縮，這里推薦常用的在線壓縮網(wǎng)站 tinypng,可以將圖片體積降低至原來的30%左右。而肉眼看起來，圖片的清晰度并沒有差別。
當然，可以你也可以構建流程中加入壓縮圖片
使用 image-webpack-loader：
安裝
npm i image-webpack-loader -D
vue.config.js 配置
chainWebpack: config => {
// 壓縮圖片
chainWebpack: (config) => {
if (isProd) {
// 圖片壓縮處理
const imgRule = config.module.rule('images')
imgRule
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
}
}
配置使用 CDN 方式引入資源庫
//vue.config.js
configureWebpack: config => {
config.resolve = {
// 使用 CDN 的包不用打包到文件中
externals: {
// 這里的 element-ui 是 import xx from yy 中的 yy 包名。ELEMENT 則是文件導出的全局變量名字
'element-ui': 'ELEMENT',
},
},
},
chainWebpack: config => {
// 添加 CDN 參數(shù)到 htmlWebpackPlugin 配置中
config.plugin('html').tap(args => {
args[0].cdn = {
js: [
'https://xx.com/CDN/js/index-element-ui@2.13.0.js',
],
css: [
'https://xx.com/CDN/css/element-ui2.13.0/index.css',
],
};
return args;
});
},
然后在 index.html 中掛載 CDN：
<!DOCTYPE html>
<html lang="zh">
<head>
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<% } %>
<!-- 使用 CDN 加速的 JS 文件，配置在 vue.config.js 下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" type="text/javascript"></script>
<% } %>
</head>
<body>
<div id="app"></div>
</body>
</html>
公共代碼抽離
configureWebpack: (config) => {
// 公共代碼抽離
config.optimization = {
splitChunks: {
cacheGroups: {
libs: {
name: "chunk-libs",
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: "initial", // only package third parties that are initially dependent
},
common: {
chunks: "all",
test: /[\\/]src[\\/]js[\\/]/,
name: "common",
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 60,
},
styles: {
name: "styles",
test: /\.(sa|sc|c)ss$/,
chunks: "all",
enforce: true,
},
pinyin: {
// split pinyin libs
name: "chunk-pinyin",
test: /[\\/]node_modules[\\/]_?pinyin(.*)/,
priority: 40,
chunks: "async",
reuseExistingChunk: true,
},
html2canvas: {
// split html2canvas libs
name: "chunk-html2canvas",
test: /[\\/]node_modules[\\/]_?html2canvas(.*)/,
priority: 40,
chunks: "async",
reuseExistingChunk: true,
},
"vue-pdf": {
// split vue-pdf libs
name: "chunk-vue-pdf",
test: /[\\/]node_modules[\\/]_?vue-pdf(.*)/,
priority: 40,
chunks: "async",
reuseExistingChunk: true,
},
runtimeChunk: {
name: "manifest",
},
},
},
};
開啟 gzip 壓縮
安裝依賴
npm install compression-webpack-plugin --save-dev
//vue.config.js
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: config => {
config.plugins = [
...config.plugins,
// 開啟 gzip 壓縮
new CompressionPlugin({
filename: '[path][base].gz',
algorithm: 'gzip',
test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要壓縮的文件類型
threshold: 10240,
minRatio: 0.8
})
]
}
}
nginx 也需要相應進行配置：
http {
gzip on; # 開啟 gzip 壓縮
gzip_static on; # 若存在靜態(tài) gz 文件，則使用該文件
gzip_min_length 10k; # 設置允許壓縮的頁面最小字節(jié)數(shù)
gzip_buffers 16 8k; # 設置用于處理請求壓縮的緩沖區(qū)數(shù)量和大小
gzip_comp_level 1; # 設置壓縮級別 1-9，數(shù)字越大，壓縮后的大小越小，也越占用CPU，花費時間越長
# 對特定的 MIME 類型生效, 其中'text/html'被系統(tǒng)強制啟用
gzip_types application/javascript text/css font/ttf font/x-woff;
gzip_vary on; # 是否在 http header中 添加 Vary:Accept-Encoding, on | off
gzip_http_version 1.1; # 在 http/1.1 的協(xié)議下不開啟壓縮
}
資源響應頭中出現(xiàn) Content-Encoding: gzip 則代表配置成功
其他優(yōu)化
當然，除了以上所講到的幾種優(yōu)化手段，還有很多其他的優(yōu)化方式，比如：
- 白屏加載時的 loading 動畫
- 骨架屏
- 小圖標把圖片替換成 svg
- 路由跳轉時的動畫
以上就是JS前端首屏優(yōu)化技巧的詳細內容，更多關于JS前端首屏優(yōu)化的資料請關注腳本之家其它相關文章！
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了小程序實現(xiàn)文字循環(huán)滾動動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
日常小程序里很多是需要付款的，那如何在小程序里實現(xiàn)付款呢？本篇就帶著大家體驗一下，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值2022-08-08
Nuxt默認模板、默認布局和自定義錯誤頁面的實現(xiàn)
這篇文章主要介紹了Nuxt默認模板、默認布局和自定義錯誤頁面的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
Underscore是一個非常實用的JavaScript庫，提供許多編程時需要的功能的支持，他在不擴展任何JavaScript的原生對象的情況下提供很多實用的功能,需要了解的朋友可以詳細參考下2012-12-12
這篇文章主要介紹了Javascript的&&和||的另類用法,需要的朋友可以參考下2014-07-07
javascript和jquery分別實現(xiàn)的九九乘法表代碼
javascript 九九乘法表 附jquery 實現(xiàn)的九九乘法表代碼2010-03-03
在動態(tài)頁面中，頁面中包含一些動態(tài)產生的控件，在有些情況下需要判斷動態(tài)生成的控件是否存在。2010-08-08
這篇文章主要為大家介紹了Javascript 虛擬 DOM，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了JavaScript、C# URL編碼總結,注意包括了encodeURI、decodeURI、encodeURIComponent、decodeURIComponent等使用需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)播放音頻，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06