vue 프로젝트 패키지 및 최적화 실현 절차

vue 프로젝트 의 포장 온라인 및 최적화
프로젝트 가 완성 되면 우 리 는 프로젝트 를 온라인 으로 진행 할 것 이다.성능 을 향상 시 키 기 위해 우 리 는 종종 최적화 처 리 를 할 것 이다.
vue 프로젝트 패키지
비계 항목 에 기본 포장 명령 이 있 습 니 다.npm run bulid 를 입력 하여 항목 을 포장 할 수 있 습 니 다.
터미널 을 열 고 프로젝트 루트 디 렉 터 리 로 전환 합 니 다.
입력 명령:npm run build현재 항목 의 루트 디 렉 터 리 아래 dist 폴 더 를 생 성 합 니 다.그 안에 포 장 된 파일 이 있 습 니 다.
 
프로젝트 위탁 관리
우 리 는 포 장 된 프로젝트 를 관리 하기 위해 간단 한 node 서버 를 만 들 수 있 습 니 다.그러면 서버 에 접근 하 는 프로젝트 를 모 의 할 수 있 습 니 다.
1.서버 루트 디 렉 터 리 로 새 디 렉 터 리 를 만 들 고,작은 검 은 창 은 node init-y 를 실행 하여 초기 화 한 다음 npm i express 를 실행 하여 express 패 키 지 를 다운로드 한 다음 app.js 파일 을 만 들 고 아래 코드 를 복사 합 니 다(express 패 키 지 를 이용 하여 서버 를 엽 니 다)
2.방금 포 장 된 dist 디 렉 터 리 를 node 서버 디 렉 터 리 로 복사
3.자원 은 dist 디 렉 터 리 에 있 기 때문에 정적 자원 위탁 관리 방식 으로 자원 을 제공 하고 dist 디 렉 터 리 를 자원 위탁 관리 디 렉 터 리 로 할 수 있 습 니 다.
express 생 성 서버

var express = require('express')
const path = require('path')

// 2.      
var app = express();

//       
//                    ， public,         
app.use(express.static('dist'))
app.use('/', express.static(path.join(__dirname, 'dist')))

// 3.           
app.listen(3001, () => {
  console.log('http://127.0.0.1:3001')
})

시작 서버
서버 디 렉 터 리 에서 터미널 을 열 고 node app.js 를 입력 하 십시오.
브 라 우 저 에 서버 주 소 를 입력 하 십시오

프로젝트 의 흔 한 최적화
프로젝트 포장 후 이전에 사 용 했 던 배치 의존 패키지 와 프로젝트 에 사 용 된 외부 자원 을 모두 포장 합 니 다.
만약 에 이전에 도 입 된 가방 이 많 거나 불필요 한 가방 을 도입 하면 프로젝트 의 부 피 를 확대 하고 사용자 가 방문 할 때 더 많은 데 이 터 를 요청 해 야 정상 적 인 방문 을 할 수 있 으 며 사용자 체험 에 불리 하기 때문에 포장 과정 을 최적화 해 야 한다.
일반적인 상황 에서 우 리 는 최적화 코드 의 측면 에서 프로젝트 를 최적화 할 수 있 고 cdn 과 유사 한 방식 으로 프로젝트 를 최적화 할 수 있다.
비계 에서 프로젝트 의 자원 분포(점용)상황 을 볼 수 있 는 명령 을 제공 합 니 다:npm run build C--report
프로젝트 보고 파일 생 성

npm run build C --report

보고서 페이지 열기

1.보고서 페이지 에서 큰 블록 일수 록 이 템 플 릿 이 차지 하 는 부피 가 크다 는 것 을 설명 합 니 다.
2.부피 가 큰 모듈 을 사용 할 수록 제품 에 포장 하지 않 는 것 을 고려 해 야 합 니 다.
cdn 가속 최적화
cdn:CDN 은 본질 적 으로 미디어 자원,동적 정적 이미지(Flash),HTML,CSS,JS 등 내용 을 더 가 까 운 IDC 에 캐 시 하여 사용자 로 하여 금 자원 을 공유 하 게 하고 사이트 간 의 응답 시간 을 줄 이 는 등 수 요 를 실현 하 게 하 는 것 이다.한편,온라인 게임 가속 기 는 본질 적 으로 고대 역 폭 기계실 을 구축 하고 다 중 노드 서버 를 설치 하여 사용 자 를 가속 화 하 는 것 이다.
우 리 는 cdn 이 우리 에 게 해당 하 는 자원 을 제공 하도록 부피 가 큰 모듈 을 제공 할 수 있 습 니 다.그러면 우리 자신의 서버 의 압력 을 완화 시 키 는 동시에 더욱 빠 르 고 더 좋 은 자원 응답 을 제공 할 수 있 습 니 다.
vue.config.js
비계 항목 에서 프로젝트 설정 을 추가 하려 면 루트 디 렉 터 리 에 vue.config.js 파일 을 추가 하여 이 파일 에서 사용자 정의 설정 을 실현 할 수 있 습 니 다.
포장 할 때 이 설정 은 비계 설정 과 함께 조 합 됩 니 다.
가방 제외 추가

module.exports = {
    configureWebpack: {
        externals:{
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'quill': 'Quill'
        }
    },
}

이 를 통 해 알 수 있 듯 이 포장 후의 프로젝트 의 부피 가 현저히 감소 하지만 문 제 는 해결 되 지 않 았 다.이런 가방 이 없 기 때문에 포장 후의 프로젝트 는 운행 할 수 없다.

이것 은 현재 포 장 된 프로젝트 에 Vue 라 는 가방 이 없 기 때문에 오류 가 발생 했 습 니 다.우 리 는 지금 cdn 방식 으로 이 자원 을 제공 해 야 합 니 다.
사용자 정의
vue.config.js 에 다음 코드 추가

let cdn = {
  css: [
    // element-ui css
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css',//    
    //         
    'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css'
  ],
  js: [
    // vue must at first!
    'https://unpkg.com/vue/dist/vue.js', // vuejs
    // element-ui js
    'https://unpkg.com/element-ui/lib/index.js', // elementUI
    //       
    'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
  ]
}

플러그 인 을 통 해 자원 을 페이지 에 자동 으로 추가 합 니 다.
플러그 인 에 자원 마 운 트

module.exports = {
  //       ，                   
  configureWebpack: {
    externals:{
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'quill': 'Quill'
        }
  },
  //  cdn         
  chainWebpack (config) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  }
}

페이지 에 플러그 인 을 사용 하여 지정 한 cdn 자원 을 추가 하고 프로젝트 의 Public 에 index 에 아래 코드 를 추가 합 니 다(프로젝트 패키지 전의 index 파일)
css 도입 추가(head 구조 중)

<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%=css%>" />
<% } %>

js 도입 추가(body 구조 중)

<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>

다시 포장,OK
설정 은 제품 단계 에서 만 cdn 을 사용 합 니 다.
프로젝트 개발 을 할 때 cdn 을 사용 할 필요 가 없습니다.그러면 오히려 우리 의 페이지 로 딩 효율 이 떨 어 지 는 동시에 현지 개발 에 도 적합 하지 않 습 니 다(네트워크 연결 이 필요 합 니 다)
우 리 는 환경 변수 에 따라 해당 하 는 처 리 를 할 수 있 습 니 다.제품 이 있 을 때 만 플러그 인 으로 하여 금 해당 하 는 자원 파일 을 html 페이지 에 자동 으로 주입 하 게 할 수 있 습 니 다.

const isProd = process.env.NODE_ENV === 'production' //       

let externals = {
  'vue': 'Vue',
  'element-ui': 'ELEMENT',
  'quill': 'Quill'
}


let cdn = {
  css: [
    // element-ui css
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css',//    
    //         
    'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css'
  ],
  js: [
    // vue must at first!
    'https://unpkg.com/vue/dist/vue.js', // vuejs
    // element-ui js
    'https://unpkg.com/element-ui/lib/index.js', // elementUI
    //       
    'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
  ]
}

cdn = isProd ? cdn : { css: [], js: [] }
externals = isProd ? externals : {}


module.exports = {
  //       ，                   
  configureWebpack: {
    externals
  },
  // 
  chainWebpack (config) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  }
}

vue 프로젝트 패키지 및 최적화 실현 절차 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 프로젝트 패키지 와 최적화 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!