[webpack] “코드 생성기가 [100KB]를 초과하여 [일부 파일]의 스타일을 최적화하지 않았다”는 것은 무엇을 의미합니까?

Program / 글쓴이

프로젝트에 새 npm 패키지를 추가하고 내 모듈 중 하나에 필요합니다.

이제 웹팩에서이 메시지를받습니다.

build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB".

무슨 뜻인가요? 조치를 취해야합니까?

답변

compactBabel 컴파일러의 옵션 과 관련이 있습니다. “불필요한 공백 문자와 줄 종결자를 포함하지 않습니다. ‘자동’으로 설정하면 입력 크기가 100KB보다 크면 컴팩트로 설정됩니다.” 기본적으로 값은 “auto”이므로 경고 메시지가 표시 될 수 있습니다. Babel 문서를 참조하십시오 .

쿼리 매개 변수를 사용하여 Webpack에서이 옵션을 변경할 수 있습니다 . 예를 들면 다음과 같습니다.

loaders: [
    { test: /\.js$/, loader: 'babel', query: {compact: false} }
]

답변

이것은 바벨 오류 인 것 같습니다 . babel-loader를 사용하고 있으며 로더 테스트에서 외부 라이브러리를 제외하지 않는 것 같습니다. 내가 알 수있는 한, 메시지는 해롭지는 않지만 여전히 다음과 같이해야합니다.

loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
]

보세요 그랬어?

답변

아래 세 가지 옵션 중 하나가 메시지를 제거합니다 (그러나 다른 이유로 그리고 다른 부작용으로 가정합니다).

  1. node_modules디렉토리를 제외 하거나 include앱이있는 디렉토리를 명시 적으로 제외 합니다 (100KB를 초과하는 파일은 포함하지 않을 수 있음)
  2. 설정된 바벨 옵션 compact 에 true( “자동”이외의 실제로 값)
  3. 바벨 옵션 compact을 설정 false하십시오 (위 참조)

위 목록의 # 1은 node_modules디렉토리 를 제외 하거나 앱이있는 디렉토리를 명시 적으로 포함하여 달성 할 수 있습니다.

예 webpack.config.js:

let path = require('path');
....
module: {
     loaders: [
          ...
          loader: 'babel',
          exclude: path.resolve(__dirname, 'node_modules/')

… include: path.resolve(__dirname, 'app/')또는를 다시 사용하여 webpack.config.js.

위 목록의 # 2와 # 3 은이 답변에서 제안한 방법으로 또는 .babelrc파일 을 편집하여 (내 선호도) 달성 할 수 있습니다 . 예 :

$ cat .babelrc
{
    "presets": ["es2015", "react"],
    "compact" : true
}

다음 설정으로 테스트했습니다.

$ npm ls --depth 0 | grep babel
├── babel-core@6.7.4
├── babel-loader@6.2.4
├── babel-preset-es2015@6.6.0
├── babel-preset-react@6.5.0

답변

Ricardo Stuven의 방식으로 시도했지만 효과가 없었습니다. 결국에는 .babelrc 파일에 “compact”: false를 추가했습니다.

{
    "compact": false,
    "presets": ["latest", "react", "stage-0"]
}

답변

read에 대한 자세한 설명 은 불필요한 공백 문자와 줄 종결자를 포함하지 않는 명령의 THIS LINK옵션입니다 . 몇 번 전에 임계 값이 되었지만 지금은 입니다.Babel compiler100KB500KB

개발 환경 에서이 코드를 .babelrc파일로 사용 하여이 옵션을 비활성화하는 것이 좋습니다 .

{
    "env": {
      "development" : {
        "compact": false
      }
    }
}

프로덕션 환경의 Babel경우 기본 구성 인을 사용하십시오 auto.

답변

react / redux / webpack / babel 빌드에서 스크립트 태그 유형 text / babel을 제거하여이 오류를 수정했습니다.

오류가 발생했습니다 :

<script type="text/babel" src="/js/bundle.js"></script>

오류가 없습니다 :

<script src="/js/bundle.js"></script>

답변

여러 모듈 규칙이있는 webpack 4에서는 .js 규칙에서 다음과 같이하면됩니다.

{
     test: /\.(js)$/,
     loader: 'babel-loader',
     options: {
          presets: ['es2015'],    // or whatever
          plugins: [require('babel-plugin-transform-class-properties')], // or whatever
          compact: true    // or false during development
     }
},