VUE 단일 페이지 응용 첫 화면 로드 속도 최적화 방안

단일 페이지 응용 프로그램 은 프로젝트 가 클 수록 첫 화면 로드 속도 가 느 려 집 니 다!!다음은 아래 에서 알 고 있 는 몇 가지 최적화 방안 을 제시한다.

CDN 자원 을 사용 하여 서버 대역 폭 압력 을 줄인다

게 으 른 로드

일부 정적 js css 를 다른 곳(예 를 들 어 OSS)에 두 고 서버 의 압력 을 줄인다

4.567917.필요 에 따라 3 자 자원 을 불 러 옵 니 다.예 를 들 어 iview 는 필요 에 따라 iview 의 구성 요 소 를 도입 하 는 것 을 권장 합 니 다네트워크 전송의 유량 크기 를 줄 이기 위해 nginx 를 사용 하여 gzip 를 엽 니 다웹 팩 gzip 압축 열기

만약 에 첫 화면 이 로그 인 페이지 라면 다 중 입 구 를 만 들 수 있 고 로그 인 페이지 는 하나의 입구 로 분리 할 수 있다

CDN 자원 을 사용 하여 서버 대역 폭 압력 을 줄 입 니 다.
index.html 에 cdn 자원 도입


...
 <body>
  <div id="app">
  </div>
  <!-- built files will be auto injected -->
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
 </body>
 ...

build/webpack.base.conf.js 수정


module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
  app: './src/main.js'
 },
 externals:{
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex',
  'vue-resource': 'VueResource'
 },
 ...
}

src/main.js src/router/index.js 주석 을 수정 하여 import 가 도입 한 vue,vue-resource 를 설명 합 니 다.


// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)

루트 게 으 름 로드


const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index')), 'workCircle')
const workCircleList = r => require.ensure([], () => r(require('@/module/work-circle/page/List')), 'workCircleList')

일부 정적 js css 를 다른 곳 에 두 고 서버 압력 을 줄 입 니 다.
이 js 파일 을 주의 하 십시오.결 과 를 던 져 야 합 니 다.그리고 이 js 를 사용 해 야 하 는 구성 요소 에서 import 를 도입 해 야 합 니 다.
필요 에 따라 3 자 자원 을 불 러 옵 니 다.예 를 들 어 iview 는 필요 에 따라 iview 의 구성 요 소 를 도입 하 는 것 을 권장 합 니 다.
필요 에 따라 iview 공식 문 서 를 보십시오iview
nginx 를 사용 하여 gzip 를 켜 서 네트워크 전송의 유량 크기 를 줄 입 니 다
nginx 설정,참고 가능Nginx Gzip 압축 오픈 페이지 로드 속도 대폭 증가
웹 팩 gzip 압축 열기
여 기 는 Nginx 서버 에 맞 춰 야 합 니 다.Nginx 는 gzip 을 엽 니 다.
config/index.js 중


module.exports = {
 build: {
  ...
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: true, //       gzip,vue-cli    ，     false
  productionGzipExtensions: ['js', 'css'],

  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 }
}

build/webpack.prod.conf.js 중
vue-cli 를 사용 하여 프로젝트 를 구축 할 때 기본적으로 이 코드 가 있 습 니 다.


if (config.build.productionGzip) {
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 webpackConfig.plugins.push(
  new CompressionWebpackPlugin({
   asset: '[path].gz[query]',
   algorithm: 'gzip',
   test: new RegExp(
    '\\.(' +
    config.build.productionGzipExtensions.join('|') +
    ')$'
   ),
   threshold: 10240,
   minRatio: 0.8
  })
 )
}

첫 화면 이 로그 인 페이지 라면 다 중 입 구 를 만 들 수 있 고 로그 인 페이지 는 하나의 입구 로 분리 된다.
웹 팩 설정 수정
원래 하나의 입구 만 app 이 라 고 불 렀 던 토대 에서 login 이라는 입 구 를 추가 하여 다른 입구 js 파일 을 가 리 킵 니 다.
두 페이지 인 만큼 원래 하나 밖 에 없 었 던 Html Webpackplugin 도 하 나 를 더 추가 하고 filename 과 template 를 로그 인 페이지 로 바 꿔 야 합 니 다.
HtmlWebpackPlugin 은 기본적으로 모든 자원 을 html 에 넣 습 니 다.필요 하지 않 은 자원 을 제거 하기 위해 HtmlWebpackPlugin 옵션 에 각각 excludeChunks:['login']과 excludeChunks:['app']를 추가 해 야 합 니 다.
원래 의 일부 Commons Chunk Plugin 은 오 류 를 초래 할 수 있 습 니 다.manifest 만 남 은 Commons Chunk Plugin 을 삭제 하면 됩 니 다.
로그 인 관련 파일 추가
이전에 설 치 된 login 입구 파일 을 추가 합 니 다.app 과 유사 하지만 로그 인 페이지 에 필요 하지 않 은 것 을 제거 합 니 다.예 를 들 어 사용 할 수 없 는 구성 요소 와 스타일 등;
login 입구 전용 router 설정 파일 을 추가 하고 다른 경 로 를 제거 하 며 로그 인 페이지 하나만 남 겨 두 면 됩 니 다.

로그 인 경로 만 남기 기
로그 인 페이지 의 html 템 플 릿 을 추가 하 는 것 도 로그 인 에 사용 할 수 없 는 자원 을 제거 합 니 다.
기타 세부 사항 수정
로그 인 이 완료 되면 vue-router 의 push 방법 이 아니 라 location.href 를 직접 수정 하여 다른 페이지 로 이동 합 니 다.
원래 app 경로 의 login 제거 하기;
로그 인 페이지 에 숨겨 진 iframe 등 방식 으로 app 페이지 의 데 이 터 를 미리 불 러 올 수 있 습 니 다(추측).
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

VUE 기반 장치가 PC인지 모바일 포트인지 판단

실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

VUE 단일 페이지 응용 첫 화면 로드 속도 최적화 방안

좋은 웹페이지 즐겨찾기