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

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

1. HTML 로드

2. javascript(bundle.js) 로드

3. javascript를 실행하고 인터페이스 요청 시작

4. 먼저 인터페이스와 HTTP/HTTPS 연결을 설정합니다. (dns 쿼리/tcp handshake/TLS 링크)

5. 요청 헤더를 보내고 응답 데이터를 받습니다...

6. 데이터를 렌더링하여 사용자에게 제공합니다

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(),
  ]
}

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

<!-- dist/index.html -->

  ...
  <link>
  <link>

---

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

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

<!-- template.html -->
<link>>

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

---

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

rrreee

관련 추천 :

webpack 모듈과 webpack3의 새로운 기능에 대한 자세한 설명

Webpack 서버측 코드 패키징 예시에 대한 자세한 설명

🎜Webpack, vue, node가 단일 페이지 코드 공유를 실현🎜🎜🎜 🎜🎜

위 내용은 Webpack 프로젝트를 위한 네트워크 최적화 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!