溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS前端首屏如何優(yōu)化

發(fā)布時間：2022-07-14 10:26:10 來源：億速云 閱讀：215 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“JS前端首屏如何優(yōu)化”，在日常操作中，相信很多人在JS前端首屏如何優(yōu)化問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS前端首屏如何優(yōu)化”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

打包分析

在 package.json 中添加命令

"report": "vue-cli-service build --report"

然后命令行執(zhí)行 npm run report，就會在dist目錄下生成一個 report.html 文件，右鍵瀏覽器中打開即可看到打包分析報告。

JS前端首屏如何優(yōu)化

下面我們可以針對報告中的問題逐一進(jìn)行優(yōu)化

路由懶加載

vue 中使用

component: () => import("views/home/Home.vue"),

vue.config.js 修改 productionSourceMap 為 false

productionSourceMap: false

首屏請求優(yōu)化

vue 腳手架默認(rèn)開啟了 preload 與 prefetch，當(dāng)我們項目很大時，這個就成了首屏加載的最大元兇了

  • preload 與 prefetch 都是一種資源預(yù)加載機(jī)制；

  • preload 是預(yù)先加載資源，但并不執(zhí)行，只有需要時才執(zhí)行它；

  • prefetch 是意圖預(yù)獲取一些資源，以備下一個導(dǎo)航/頁面使用；

  • preload 的優(yōu)先級高于 prefetch。

//vue.config.js
chainWebpack(config) {
  config.plugins.delete('preload') // 刪除默認(rèn)的preload
  config.plugins.delete('prefetch') // 刪除默認(rèn)的prefetch
}

原先項目首頁近六百個請求，設(shè)置后降到一百左右，減少了http的連接，自然也就減少了首屏加載時間。

配置前：

JS前端首屏如何優(yōu)化

配置后：

JS前端首屏如何優(yōu)化

圖片壓縮

有時候 ui 給到的圖片資源可能過大，因此我們可以對圖片進(jìn)行壓縮，這里推薦常用的在線壓縮網(wǎng)站 tinypng,可以將圖片體積降低至原來的30%左右。而肉眼看起來，圖片的清晰度并沒有差別。

JS前端首屏如何優(yōu)化

當(dāng)然，可以你也可以構(gòu)建流程中加入壓縮圖片

使用 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 則是文件導(dǎo)出的全局變量名字
        '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 也需要相應(yīng)進(jìn)行配置：

http {

   gzip on; # 開啟 gzip 壓縮
   gzip_static on; # 若存在靜態(tài) gz 文件，則使用該文件
   gzip_min_length 10k; # 設(shè)置允許壓縮的頁面最小字節(jié)數(shù)
   gzip_buffers 16 8k; # 設(shè)置用于處理請求壓縮的緩沖區(qū)數(shù)量和大小
   gzip_comp_level 1; # 設(shè)置壓縮級別 1-9，數(shù)字越大，壓縮后的大小越小，也越占用CPU，花費時間越長
   # 對特定的 MIME 類型生效, 其中'text/html'被系統(tǒng)強(qiá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é)議下不開啟壓縮
}

資源響應(yīng)頭中出現(xiàn) Content-Encoding: gzip 則代表配置成功

JS前端首屏如何優(yōu)化

其他優(yōu)化

當(dāng)然，除了以上所講到的幾種優(yōu)化手段，還有很多其他的優(yōu)化方式，比如：

  • 白屏加載時的 loading 動畫

  • 骨架屏

  • 小圖標(biāo)把圖片替換成 svg

  • 路由跳轉(zhuǎn)時的動畫

到此，關(guān)于“JS前端首屏如何優(yōu)化”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手