vue 또는 react 프로젝트 생산 환경 에서 console.log 를 제거 합 니 다.

개발 환경 에 console.log/info/debug 를 많이 썼 습 니 다.생산 환경 에서 이 console 를 제거 해 야 합 니 다.
수 동 으로 삭제 하 는 것 도 힘 들 고 나중에 재 개발 하려 면 콘 솔 을 다시 써 야 합 니 다.
사실 웹 팩 은 console 을 삭제 하 는 플러그 인 을 제공 합 니 다.vue-cli 3 에 서 는 이렇게 사 용 됩 니 다.
우선 terser-webpack-plugin 설치
npm install terser-webpack-plugin -D
그리고 vue.config.js 파일 에 플러그 인 설정 을 쓰 십시오:

module.exports = {
 configureWebpack: (config)=>{
 if(process.env.NODE_ENV === 'production'){
  config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
 }
 }
}

2020.1.14 보충:
위의 쓰 기 는 웹 팩 의 설정 을 직접 수정 하 는 것 입 니 다.vue 공식 문서 에서 도 합 쳐 질 대상 을 되 돌려 줄 수 있다 고 합 니 다.쓰 기 는 다음 과 같 습 니 다.

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
 configureWebpack: (config)=>{
 if(process.env.NODE_ENV === 'production'){
  //             
  return {
  optimization:{
  minimizer: [
 new TerserPlugin({
 sourceMap:false,
 terserOptions:{
  compress:{
  drop_console : true
  }
 }
 })
   ]
 }
 }
 }
 }
}

2020.4.22 보충:
최근 에 react 프로젝트 를 할 때 웹 팩 의 설정 을 발 견 했 습 니 다.terser 를 사용 하여 console.log 를 제거 할 수도 있 습 니 다.
webpack.config.prod.js:

module.exports = {
 optimization:{
 minimizer: [
 new TerserPlugin({
  sourceMap:false,
 terserOptions:{
 compress:{
  drop_console : true
 }
 }
 })
 ]
 }
}

보충 지식:vue 에서 데이터 업 데 이 트 를 만 났 지만 페이지 가 업데이트 되 지 않 은 경우
오늘 프로젝트 에서 수 요 를 만 났 습 니 다.데 이 터 를 바 꾸 려 면 누 르 면 페이지 에서 변 경 된 데 이 터 를 바로 볼 수 있 습 니 다.

우선,위의 그림 과 같은 노란색 단 추 는 v-for 순환 을 통 해 만들어 집 니 다.data()에는 데이터 cards 만 있 습 니 다.[...]cards 의 값 은 배경 인 터 페 이 스 를 호출 하여 얻 을 수 있 습 니 다.

data(){
 return {
 cards:[]
 }
}

<div v-for="card in cards" :key="card.id">
 <img src="xxx" />
 <div v-if="card.isShow" @click="cacelHandler(card)">
 <img src="xxxx" />
 </div>
</div>

이 프로필 아래 노란색 단 추 는 카드 리 스 쇼 의 truthy 결정 에 따라 표시 되 거나 표시 되 지 않 습 니 다.
내 가 단 추 를 눌 렀 을 때,카드 리 스 쇼 의 값 을 false 로 바 꾸 었 다.
그러나 페이지 의 노란색 버튼 은 내 가 원 하 는 것 처럼 사라 지지 않 았 다.
조회 자 료 를 통 해 알 수 있 듯 이 this.$forceUpdate()를 사용 하면 구성 요 소 를 다시 렌 더 링 할 수 있 습 니 다.그러면 원 하 는 효 과 를 얻 을 수 있 습 니 다.

cacelHandler(card){
 card.isShow = false;
 this.$forceUpdate();
}

vue 공식 적 으로$forceUpdate 에 대한 설명 은:
$forceUpdate 는 Vue 인 스 턴 스 를 다시 렌 더 링 할 수 있 습 니 다.모든 하위 구성 요소 가 아 닌 인 스 턴 스 자체 와 슬롯 내용 을 삽입 하 는 하위 구성 요소 에 만 영향 을 줍 니 다.
이상 의 vue 나 react 프로젝트 의 생산 환경 에서 console.log 를 제거 하 는 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.