Webpack 프로젝트를 위한 네트워크 최적화 코드 공유
- 小云云원래의
- 2018-02-22 13:32:051518검색
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을 사용했습니다. > 템플릿 구현 전인데 조금 번거로워서 플러그인으로 추출했습니다.
위 내용은 Webpack 프로젝트를 위한 네트워크 최적화 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!