首頁 > 文章 > web前端 > webpack專案的網路優化程式碼分享

webpack專案的網路優化程式碼分享

小云云原創: 2018-02-22 13:32:051513瀏覽

SPA應用的流程是：

載入HTML
#載入javascript（bundle.js）
執行javascript，開始請求介面
先建立和介面的HTTP/HTTPS連線（dns查詢/tcp握手/TLS連結）
#發送請求header，取得回應資料...
渲染數據，呈現給使用者

##我們用Vue/React + Webpack打包的js動輒300KB以上，步驟2會消耗一點時間。如果在

步驟2 進行中時，同步執行步驟4 建立連接，就能節省一點點時間。尤其在行動端，建立連線的時間佔了大頭，能省是省。

利用

`讓瀏覽器預先建立連線。`

主流瀏覽器大多已支援：https://caniuse.com/#feat=link-rel-preconnect

做了一個簡單的webpack插件: https://github.com /joaner/html-webpack-preconnect-plugin

// $ npm install html-webpack-preconnect-plugin --save-dev

var HtmlWebpackPreconnectPlugin = require('html-webpack-preconnect-plugin');

// webpack config
{
  ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',

      // set the preconnect origins
      preconnect: [
        'http://api1.example.com',
        'http://api2.example.com',
      ]
    }),

    // enabled preconnect plugin
    new HtmlWebpackPreconnectPlugin(),
  ]
}

這個外掛程式做的事非常簡單，就是插入到

裡：

<!-- dist/index.html -->
<head>
  ...
  <link rel="preconnect" href="http://api1.example.com">
  <link rel="preconnect" href="http://api2.example.com">
</head>

#我之前用

HtmlWebpackPlugin的模板實現，但是略微有點繁瑣，所以提取成了插件。

<!-- template.html -->
<link rel="preconnect" href=<%= htmlWebpackPlugin.options.api1_origin %>>

webpack專案的網路優化程式碼分享

讓瀏覽器預先建立連線。

相關文章

`讓瀏覽器預先建立連線。`