Webpack 프로젝트를 위한 네트워크 최적화 코드 공유-JS 튜토리얼-php.cn

Webpack 프로젝트를 위한 네트워크 최적화 코드 공유

小云云

풀어 주다： 2018-02-22 13:32:05

원래의

1533명이 탐색했습니다.

SPA 적용 프로세스는 다음과 같습니다.

HTML 로드
javascript(bundle.js) 로드
javascript를 실행하고 인터페이스 요청 시작
먼저 인터페이스와 HTTP/HTTPS 연결을 설정합니다. (dns 쿼리/tcp handshake/TLS 링크)
요청 헤더를 보내고 응답 데이터를 받습니다...
데이터를 렌더링하여 사용자에게 제공합니다

Vue/와 함께 패키징하는 js React + Webpack은 300KB를 초과하는 경우가 많으므로 2단계에서는 시간이 좀 걸립니다. 2단계가 진행되는 동안 4단계를 실행하여 동시에 연결을 설정하면 시간을 조금 절약할 수 있습니다.
특히 모바일 측면에서는 연결 설정에 대부분의 시간이 소요되므로 시간을 절약할 수 있습니다.

브라우저가 미리 연결을 설정하도록 하려면 `<link rel="preconnect">`를 사용하세요.

<link rel="preconnect"> 让浏览器预先建立连接。

主流浏览器大多已支持：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(),
  ]
}

로그인 후 복사

这个插件做的事非常简单，就是插入到<head>里：

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

로그인 후 복사

我之前用HtmlWebpackPlugin대부분의 주류 브라우저는 이미 다음을 지원합니다: https://caniuse.com/#feat=link-rel-preconnect

간단한 웹팩 플러그인을 만들었습니다: https://github.com/joaner/html- webpack-preconnect-plugin

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

로그인 후 복사

이 플러그인의 기능은 매우 간단합니다. <head>에 삽입됩니다. rrreee

저는 HtmlWebpackPlugin을 사용했습니다. > 템플릿 구현 전인데 조금 번거로워서 플러그인으로 추출했습니다.

rrreee

Webpack 프로젝트를 위한 네트워크 최적화 코드 공유

브라우저가 미리 연결을 설정하도록 하려면 <link rel="preconnect">를 사용하세요.

브라우저가 미리 연결을 설정하도록 하려면 `<link rel="preconnect">`를 사용하세요.