JS前端首屏如何優化
這篇文章主要介紹“JS前端首屏如何優化”，在日常操作中，相信很多人在JS前端首屏如何優化問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS前端首屏如何優化”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
打包分析
在 package.json 中添加命令
"report":?"vue-cli-service?build?--report"
然后命令行執行 npm run report，就會在dist目錄下生成一個 report.html 文件，右鍵瀏覽器中打開即可看到打包分析報告。
下面我們可以針對報告中的問題逐一進行優化
路由懶加載
vue 中使用
component:?()?=>?import("views/home/Home.vue"),
vue.config.js 修改 productionSourceMap 為 false
productionSourceMap:?false
首屏請求優化
vue 腳手架默認開啟了 preload 與 prefetch，當我們項目很大時，這個就成了首屏加載的最大元兇了
preload 與 prefetch 都是一種資源預加載機制；
preload 是預先加載資源，但并不執行，只有需要時才執行它；
prefetch 是意圖預獲取一些資源，以備下一個導航/頁面使用；
preload 的優先級高于 prefetch。
//vue.config.js
chainWebpack(config)?{
??config.plugins.delete('preload')?//?刪除默認的preload
??config.plugins.delete('prefetch')?//?刪除默認的prefetch
}
原先項目首頁近六百個請求，設置后降到一百左右，減少了http的連接，自然也就減少了首屏加載時間。
配置前：
配置后：
圖片壓縮
有時候 ui 給到的圖片資源可能過大，因此我們可以對圖片進行壓縮，這里推薦常用的在線壓縮網站 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?參數到?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;?#?若存在靜態?gz?文件，則使用該文件
???gzip_min_length?10k;?#?設置允許壓縮的頁面最小字節數
???gzip_buffers?16?8k;?#?設置用于處理請求壓縮的緩沖區數量和大小
???gzip_comp_level?1;?#?設置壓縮級別?1-9，數字越大，壓縮后的大小越小，也越占用CPU，花費時間越長
???#?對特定的?MIME?類型生效,?其中'text/html'被系統強制啟用
???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?的協議下不開啟壓縮
}
資源響應頭中出現 Content-Encoding: gzip 則代表配置成功
其他優化
當然，除了以上所講到的幾種優化手段，還有很多其他的優化方式，比如：
白屏加載時的 loading 動畫
骨架屏
小圖標把圖片替換成 svg
路由跳轉時的動畫
到此，關于“JS前端首屏如何優化”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注蝸牛博客網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：niceseo99@gmail.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
版權聲明：蝸牛博客如無特殊標注，文章均為來源于網絡，轉載時請以鏈接形式注明文章出處。
評論