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

更新時間：2022年07月14日 08:33:43 作者：嗆再首

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

引言

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

在經(jīng)過我的一頓折騰后，首屏加載時間基本都在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 都是一種資源預(yù)加載機制；
preload 是預(yù)先加載資源，但并不執(zhí)行，只有需要時才執(zhí)行它；
prefetch 是意圖預(yù)獲取一些資源，以備下一個導航/頁面使用；
preload 的優(yōu)先級高于 prefetch。

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

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

配置前：

配置后：

圖片壓縮

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

當然，可以你也可以構(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 則是文件導出的全局變量名字
        '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)進行配置：

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)強制啟用
   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 則代表配置成功