Vue 프로덕션 환경을 수정하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

Vue 프로덕션 환경을 수정하는 방법

王林

May 23, 2023 pm 08:13 PM

Vue는 최신 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue 개발 환경에서는 Vue CLI(명령줄 인터페이스)를 쉽게 사용하여 Vue 애플리케이션을 만들고 개발할 수 있습니다. Vue CLI에는 유용한 기능이 많이 있으며, 그 중 하나는 Vue 애플리케이션 내에서 개발하고 배포할 수 있다는 것입니다. 이 기사에서는 Vue 프로덕션 환경에서 수정하는 방법을 자세히 살펴보겠습니다.

Vue의 프로덕션 환경 컴파일과 개발 환경 컴파일은 가장 큰 차이점은 성능입니다.

개발 환경에서는 Vue CLI를 사용하여 Vue 애플리케이션을 빌드할 때 핫 리로드 서버를 확보하여 코드가 변경되면 업데이트된 결과를 즉시 확인할 수 있습니다. 이는 Vue 애플리케이션 내에서 개발하고 테스트할 때 매우 유용합니다.

그러나 Vue 애플리케이션을 프로덕션 환경에 배포할 때 성능을 최적화하기 위해 몇 가지 수정이 필요합니다. 프로덕션 Vue 환경에서 수정하는 몇 가지 방법은 다음과 같습니다.

Vue의 프로덕션 버전을 애플리케이션에 로드합니다.

개발 환경에서는 모든 경고 및 디버깅 정보가 포함되어 있기 때문에 Vue 정식 버전을 사용하여 개발합니다. 그러나 프로덕션 환경에서는 애플리케이션의 로드가 증가하고 성능이 저하되므로 이 정보가 필요하지 않습니다. 따라서 Vue의 프로덕션 버전을 사용해야 합니다.

Vue CLI에서 다음 명령을 사용하여 Vue의 프로덕션 버전을 애플리케이션에 로드할 수 있습니다.

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false // 阻止启动生产消息

new Vue({
  render: h => h(App),
}).$mount('#app')

로그인 후 복사

위 코드에서는 Vue.config.productionTip = false를 설정하여 Vue가 프로덕션 모드에서 메시지를 시작하지 못하도록 했습니다.

Gzip 압축 켜기

프로덕션 환경에서는 HTTP 응답 크기를 줄이고 애플리케이션 로딩 속도를 높이려면 Gzip 압축을 켜야 합니다. Gzip 압축 기능은 webpack을 사용하여 구성할 수 있으며 vue.config.js에서 구성할 수 있습니다.

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
  },
};

로그인 후 복사

위 코드에서는 CompressionWebpackPlugin 플러그인을 사용하여 Gzip 압축 기능을 활성화했습니다.

콘솔 및 디버그 문 제거

프로덕션 환경에서는 애플리케이션의 모든 콘솔 및 디버그 문을 제거해야 합니다. 이러한 문은 애플리케이션의 크기를 늘리고 보안 위험을 초래할 수도 있습니다. 이러한 명령문은 webpack의 UglifyJSPlugin을 사용하여 애플리케이션에서 제거할 수 있습니다.

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new UglifyJSPlugin({
        uglifyOptions: {
          compress: {
            drop_console: true, // 移除所有的console语句
          },
        },
      }),
    ],
  },
};

로그인 후 복사

위 코드에서는 UglifyJSPlugin 플러그인을 사용하여 애플리케이션의 콘솔 문을 삭제했습니다.

CDN으로 정적 리소스 가속화

프로덕션 환경에서는 애플리케이션의 로딩 속도를 향상시키기 위해 정적 리소스를 CDN에 배치해야 합니다. CDN은 애플리케이션 내에서 webpack을 사용하여 구성할 수 있습니다.

// vue.config.js
module.exports = {
    chainWebpack: config => {
      config.plugin('html')
        .tap(args => {
          args[0].cdn = process.env.NODE_ENV === 'production' ? cdn.build : cdn.dev
          return args
        })
    }
};

로그인 후 복사

위 코드에서는 chainWebpack을 사용하여 webpack을 확장하고 args[0].cdn을 사용하여 CDN의 URL 주소를 제공합니다.

요약

Vue 프로덕션 환경을 수정하는 것은 애플리케이션의 성능을 향상시키는 것입니다. 이 기사에서는 다음 방법을 배웠습니다.