JS前端首屏優(yōu)化技巧

更新時(shí)間：2022年07月14日 08:33:43 作者：?jiǎn)茉偈?

這篇文章主要為大家介紹了JS前端首屏優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

前段時(shí)間領(lǐng)導(dǎo)突然找到我，說(shuō)新項(xiàng)目的訪問(wèn)怎么變得這么慢，我立馬訪問(wèn)對(duì)應(yīng)頁(yè)面，果然，首頁(yè)加載8、9s，這近10s的等待時(shí)間，對(duì)于用戶來(lái)說(shuō)，無(wú)疑是痛苦的。于是乎領(lǐng)導(dǎo)就把這個(gè)首頁(yè)加載優(yōu)化的任務(wù)交給我了。

在經(jīng)過(guò)我的一頓折騰后，首屏加載時(shí)間基本都在2s左右，這樣的首屏加載時(shí)間，對(duì)于用戶來(lái)說(shuō)，算是可以接受的。

因此在此記錄一下，針對(duì)首屏優(yōu)化我做了些什么

打包分析

在 package.json 中添加命令

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

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

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

路由懶加載

vue 中使用

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

vue.config.js 修改 productionSourceMap 為 false

productionSourceMap: false

首屏請(qǐng)求優(yōu)化

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

preload 與 prefetch 都是一種資源預(yù)加載機(jī)制；
preload 是預(yù)先加載資源，但并不執(zhí)行，只有需要時(shí)才執(zhí)行它；
prefetch 是意圖預(yù)獲取一些資源，以備下一個(gè)導(dǎo)航/頁(yè)面使用；
preload 的優(yōu)先級(jí)高于 prefetch。

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

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

配置前：

配置后：

圖片壓縮

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

當(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 方式引入資源庫(kù)

//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",
          },
        },
      },
    };

開(kāi)啟 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,
      // 開(kāi)啟 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; # 開(kāi)啟 gzip 壓縮
   gzip_static on; # 若存在靜態(tài) gz 文件，則使用該文件
   gzip_min_length 10k; # 設(shè)置允許壓縮的頁(yè)面最小字節(jié)數(shù)
   gzip_buffers 16 8k; # 設(shè)置用于處理請(qǐng)求壓縮的緩沖區(qū)數(shù)量和大小
   gzip_comp_level 1; # 設(shè)置壓縮級(jí)別 1-9，數(shù)字越大，壓縮后的大小越小，也越占用CPU，花費(fèi)時(shí)間越長(zhǎng)
   # 對(duì)特定的 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é)議下不開(kāi)啟壓縮
}

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