Vue Cli 3 패키지 설정 및 console.log 문 구 를 자동 으로 무시 하 는 방법

2678 단어 VueCli3포장 하 다.console.log
플러그 인 다운로드

npm i -D uglifyjs-webpack-plugin
vue.config.js 에 사용 하기

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
 configureWebpack: {
  plugins: [
   new UglifyJsPlugin({
    uglifyOptions: {
     compress: {
      drop_console: true,
     },
    },
   }),
  ],
 },
 devServer: {
  proxy: {
   '/xxx': {
    target: 'http://192.168.150.17:8080/',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/xxx': 'xxx',
    },
   },
  },
 },
 publicPath: './',
}
이때 npm run build 포장 을 실행 한 파일 에는console.log 문구 가 없 었 다.
그러나 이 럴 때 문 제 는 개발 환경 에서 컴 파일 이 매우 느리다 는 것 이다.예 를 들 어 변수의 값 을 수 정 했 습 니 다.제 컴퓨터 는 10 초 동안 컴 파일 해 야 페이지 를 다시 고 칠 수 있 고 계속 걸 려 있 습 니 다92% chunk asset optimization. console.log 문 구 를 제거 하 는 기능 은 포장 할 때 만 필요 하기 때문에 우 리 는 하나의 판단 을 추가 하여 생산 환경 에서 만 상기 설정 코드 를 추가 할 수 있다.
그래서 정확 한 설정 은 다음 과 같 습 니 다.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const config = {
 devServer: {
  proxy: {
   '/xxx': {
    target: 'http://192.168.150.17:8080/',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/xxx': 'xxx',
    },
   },
  },
 },
 publicPath: './',
}

if (process.env.NODE_ENV === 'production') {
 config.configureWebpack = {
  plugins: [
   new UglifyJsPlugin({
    uglifyOptions: {
     compress: {
      drop_console: true,
     },
    },
   }),
  ],
 }
}

module.exports = config
vue-cli 3.0 패키지 console.log 제거
플러그 인 을 설치 하지 않 고 console.log 를 제거 하 는 방법
vue-cli 3.0 포장 과정 에서 terser-webpack-plugin 플러그 인 을 사용 하여 최적화 시 켰 습 니 다.구체 적 인 설정 은 nodemodules/@vue/cli-service/lib/config/prod.js 에서 보 았 습 니 다.
환경 변 수 를 사용 하여 제어 합 니 다.생산 가방 을 만 들 때 만 이 플러그 인 을 사용 하여 포장 최적화 할 수 있 습 니 다.
terser-webpack-plugin 의 구체 적 인 설정 은 같은 폴 더 아래 terserOptions.js 에 있 습 니 다.이 파일 에 copress 대상 에 다음 과 같은 몇 가지 속성 을 추가 하면 됩 니 다.

warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']
Vue Cli3 패키지 설정 과 console.log 문 구 를 자동 으로 무시 하 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue Cli3 패키지 와 console.log 내용 을 무시 합 니 다.이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 지원 바 랍 니 다!
Spring Data JPA 동적 조건 조회 의 쓰기
Maven 프로필 pom.xml 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage