웹 팩 에서 미리 렌 더 링 을 해서 첫 화면 공백 시간 을 낮 추 는 방법 을 자세히 설명 합 니 다.
1.사용자 가 페이지 를 열 고 공백 화면 으로 html 의 귀환 을 기다린다.
2.html 다운로드 완료,html 분석 시작,초기 렌 더 링
3.css,js 등 자원 을 다운로드 하고 js 렌 더 링 가상 DOM 을 실행 합 니 다.
4.요청,데이터 획득,렌 더 링 내용
다음은 프 리 렌 더 링 을 통 해 공백 화면 을 낮 추 는 방법 에 대해 논의 하 겠 습 니 다.
첫 화면 적재 시간 을 줄 이 는 것 은 중요 한 최적화 항목 으로 요약 하면 주로 다음 과 같은 몇 가지 방식 이 있다.
1.가능 한 한 웹 팩 이나 다른 포장 도구 로 생 성 된 가방 의 크기 를 줄 입 니 다.
2.서버 렌 더 링 방식 사용
3.미리 렌 더 링 하 는 방식 사용
4.gzip 를 사용 하여 네트워크 전송 의 유량 크기 를 줄인다.
5.페이지 나 구성 요소 에 따라 블록 을 나 누 어 게 으 름 피 우기
2.전통 페이지 개발
React,Vue 와 같은 데이터 구동 프레임 워 크 가 아직 유행 하지 않 았 을 때 보통 우 리 는 html 에 dom 구 조 를 직접 쓰 거나 직접 서버 에서 나 오기 때문에 html 페이지 를 다운로드 한 후에 공백 화면 시간 이 매우 짧 습 니 다.dom 은 html 에 있 기 때문에 지금 처럼 가상 dom 방식 으로 js 에 쓰 는 것 이 아 닙 니 다.그래서...저 희 는 js 다운로드 가 끝 난 후에 야 페이지 를 렌 더 링 할 필요 가 없습니다.html 다운로드 가 끝 난 후에 dom 구 조 를 직접 렌 더 링 합 니 다.
현재 우리 가 Vue 등 프레임 워 크 를 활용 하여 개발 할 때 html 구 조 는 보통 아래 와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div id="app"></div>
<script src="/bound.js"></script>
</body>
</html>
화이트 스크린 이 어떻게 생 겼 는 지 알 게 된 이상 웹 팩 에 미리 보 여 주 는 기능 을 통합 하여 화이트 스크린 의 시간 을 낮 추 는 방법 을 시도 해 보 겠 습 니 다.
3.웹 팩 에 프 리 렌 더 링 기능 통합
github： 웹 팩 에서 어떻게 미리 렌 더 링 기능 을 통합 합 니까?
vue 로 작 성 된 loading 구성 요 소 를 웹 팩 컴 파일 과정 에서 가상 dom 을 html 에 미리 렌 더 링 하려 고 합 니 다.다음은 loading 구성 요소 의 내용 입 니 다.
<template>
<div class="loading-img"></div>
</template>
<script>
export default {}
</script>
<style>
.loading-img {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
display: inline-block;
width: 60px;
height: 60px;
background: url(__inline__) no-repeat center center;
background-size: contain;
}
</style>최종 적 으로 우리 가 원 하 는 효 과 는 이 vue 구성 요소 의 가상 dom 을 html 파일 에 미리 렌 더 링 하 는 것 입 니 다.
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- pre-render-loading css -->
<style>
.loading-img {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
display: inline-block;
width: 60px;
height: 60px;
<!-- loading base64 html -->
background: url(data:image/gif;base64,.....) no-repeat center center;
background-size: contain;
}
</style>
...
</head>
<body>
<div id="app">
<!-- loading base64 -->
<div class="loading-img"></div>
</div>
...
</body>
</html>
여기 서 우리 의 loading 구성 요 소 는 vue 로 작 성 된 것 이기 때문에 우 리 는 어떻게 미리 렌 더 링 을 하고 웹 팩 에 통합 하 는 지 보 려 고 합 니 다.(창고 의 코드 와 함께 볼 수 있 습 니 다.코드 는 매우 간단 합 니 다.단지 demo 일 뿐 입 니 다)
여기 서 vue 단일 파일 의 html 와 css 를 따로 추출 합 니 다.
// render-loading.js
let vueAssets = null
let vueTplPath = resolvePath('./src/loading/pre-render-loading.vue')
const extractAssetsInVueTpl = (vueTplPath) => {
let vueTpl = clearEnter(fs.readFileSync(vueTplPath).toString())
let html = /<template>(.*)<\/template>/g.exec(vueTpl)[1]
let css = /<style>(.*)<\/style>/g.exec(vueTpl)[1]
return {
html,
css
}
}
vueAssets = extractAssetsInVueTpl(vueTplPath)
let gifPath = resolvePath('./src/loading/imgs/loading.gif')
const transGifToCSSFile = (imgPath) => {
let ext = path.extname(imgPath).slice(1)
let preStr = `data:image/${ext};base64,` // base64
let bitDate = fs.readFileSync(imgPath)
let base64Str = bitDate.toString('base64')
let dataURL = preStr + base64Str
return dataURL
}
let dataURL = transGifToCSSFile(gifPath)
const injectDataURLToCSS = (cssStr, dataURL) => {
return cssStr.replace(/__inline__/, dataURL)
}
let cssStr = injectDataURLToCSS(vueAssets.css, dataURL)
loading.html = vueAssets.html
loading.css = '<style>' + cssStr + '</style>'
module.exports = loading
const HtmlWebpackPlugin = require('html-webpack-plugin')
const loading = require('./render-loading')
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
loading: loading
})
]
}
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
...
<%= htmlWebpackPlugin.options.loading.css %>
</head>
<body>
<div id="app">
<!-- loading base64 -->
<%= htmlWebpackPlugin.options.loading.html %>
</div>
...
</body>
</html>여기에 데모 만 써 서 원 리 를 소개 합 니 다.더 복잡 한 것 은 vue-server-render 를 사용 하여 같은 구 조 를 하거나 handlebars 와 같은 템 플 릿 엔진 을 사용 하여 템 플 릿 을 만 들 수 있 습 니 다.사실은 서버 의 렌 더 링 작업 을 컴 파일 하 는 과정 에 두 었 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Qiita API v2를 Ajax에서 사용하기위한 webpack 설정 (로컬 개발 환경 전용)에서는 Qiita의 기사 목록, 사용자 세부 정보, 기사를 '좋아요'한 사람 목록 및 재고가 있는 사람 목록을 검색할 수 있습니다. Qiita 화면에서 기사를 재고한 사람을 볼 수 없기 때문에 API를 통해 기사를 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
