IT이야기

vue-cli를 사용하여 중첩된 html을 구축하는 데 오래 걸림

cyworld 2022. 5. 2. 21:22
반응형

vue-cli를 사용하여 중첩된 html을 구축하는 데 오래 걸림

나는 vue-cli(2.9.6, 그러나 3.0.0 베타*는 동일한 이슈가 있다)의 빌딩 프로세스는 템플릿의 html이 상대적으로 깊어진 후에 영원히 걸린다는 것을 발견했다.

예를 들어, 나는 단지 몇 가지를 추가했을 뿐이다.div로.App.vue 예약 예약, 사사:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div><div><div><div></div></div></div></div>
    <HelloWorld/>
  </div>
</template>

그렇게 오래 걸리진 않을 거야

하지만 일단 이렇게 되면:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
    <HelloWorld/>
  </div>
</template>

건축과정이 오래 걸리고, 이 깊이의 둥지가 그렇게 흔하지 않다고 믿는다.

이 문제를 어떻게 처리해야 할까?

EDIT(상세)

문제가 환경에 따라 다를 수 있는 것 같아, 자세한 내용은 여기 있어.

이 문제는 최소한 다음과 같은 환경에서 재현할 수 있다.

  • MacOS High Sierra on Mac mini(2014년 말)
  • Dell XPS 13의 Ubuntu 18.04

노드 및 npm 버전은

node --version
# prints
v8.9.4
# and
npm version
# prints
{ npm: '6.1.0',
  ares: '1.10.1-DEV',
  cldr: '31.0.1',
  http_parser: '2.7.0',
  icu: '59.1',
  modules: '57',
  nghttp2: '1.25.0',
  node: '8.9.4',
  openssl: '1.0.2n',
  tz: '2017b',
  unicode: '9.0',
  uv: '1.15.0',
  v8: '6.1.534.50',
  zlib: '1.2.11' }

이러한 기능을 사용하여 Mac에서 다음 사항을 다시 시도해 보았다.

npm uninstall -g vue-cli
npm install -g vue-cli
vue init webpack divnest
# then some Enter keys - everything is default
cd divnest

그럼, 열어봐.App.vue그리고 많은 div를 넣는다.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
    <router-view/>
  </div>
</template>

(여기서 기본 설정을 사용했기 때문에,<router-view/>원래 게시물과 달리 포함되지만 문제가 되어서는 안 된다.)

그리고 마지막으로

npm run dev

이 과정은 영구히 소요되며, 특히 이 시점에서 중단된다.

 13% building modules 28/31 modules 3 active ...myname/Documents/divnest/src/App.vue

의 경우

npm run build

, 프로세스가 이 지점에서 중지됨:

> divnest@1.0.0 build /Users/myname/Documents/divnest
> node build/build.js

Hash: 483ebabc54d5aed79fd7
Version: webpack 3.12.0
Time: 13742ms
                                                  Asset       Size  Chunks             Chunk Names
               static/js/vendor.7fed9fa7b7ba482410b7.js     112 kB       0  [emitted]  vendor
                  static/js/app.f1ebca7a6e0ec0b7ebdf.js      12 kB       1  [emitted]  app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
    static/css/app.30790115300ab27614ce176899523b62.css  432 bytes       1  [emitted]  app
static/css/app.30790115300ab27614ce176899523b62.css.map  828 bytes          [emitted]  
           static/js/vendor.7fed9fa7b7ba482410b7.js.map     553 kB       0  [emitted]  vendor
              static/js/app.f1ebca7a6e0ec0b7ebdf.js.map    23.3 kB       1  [emitted]  app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  509 bytes          [emitted]  

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

 94% asset optimization

그냥 놔두면 1155409ms!!!!

 DONE  Compiled successfully in 1155409ms                                                        13:35:34

 I  Your application is running here: http://localhost:8080

추가 편집

@tony19가 지적했듯이, 더 예쁜 것이 유력한 용의자다.그 조언에 따라 우분투 18.04(맥이 지금 없어서 맥이 아니다, 미안하다)와 함께 몇 가지 패턴을 시도해 보았는데 결과는 다음과 같다.

  • vue-cli 2.9.6 +npm run dev- 매달리다
  • vue-cli 2.9.6 +npm run build- 6초 (이거 너무 헷갈려.위의 100만 초는 무엇이었습니까!?Vue-cli 재설치가 잔돈을 빚진 것 아닐까?)
  • .0+ vue-cli 3.0.0-16 +vue serve- 매달림(@tony19의 보고와는 반대로)
  • .0+ vue-cli 3.0.0-16 +vue build - 5초

더 많은 편집 기능

그래서, 이것은 확실히 더 예뻐서 생긴 것 같다.https://github.com/prettier/prettier/issues/1250은 이 문제를 해결한 최초의 이슈로 개발팀은 https://github.com/prettier/prettier/pull/2259이 고쳤다고 생각했지만, 현실은 https://github.com/prettier/prettier/issues/4672에서 @ on19가 보여주듯이 내 사건을 처리할 수 없었던 것이다. 아, 그렇구나.

"솔루션"

이 되었다. @변화하고 있다. @tony19의 보고에 따라, 변화했다./node_modules/vue-loader/lib/template-compiler/index.js 78:81

if (!isProduction) {
  code = prettier.format(code, { semi: false })
}

로

// if (!isProduction) {
//   code = prettier.format(code, { semi: false })
// }

이렇게 해서 문제가 해결된다.고마워 프런트엔드, 고마워

당신이 설명한 대로 성능 문제를 재현할 수 있다(macOS High Sierra 10.13.4, 노드 8.9.4 및 9.11.1).이 문제는 새로 생성된 경우에도 발생한다.vue-cli3.x 프로젝트.

교수형은 교수수에서 .prettier의 템플릿 컴파일러에서 호출됨.내포된<div>에 의해 자바스크립트로 변환됨vue-loader그리고 그것은 다음과 같은 조각이 된다.

var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"app"}},[_c('img',{attrs:{"src":require("./assets/logo.png")}}),_vm._v(" "),_c('router-view'),_vm._v(" "),_vm._m(0)],1)}
var staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div')])])])])])])])])])])])])])])])])])])])])])])])])}]

vue-loader이 긴 끈을 에 전달하다.prettier이것은 처리하는데 약 159초가 걸린다.의 은 '그대'의 ''을 이다.divs. 이 버그를 보고했는데prettier(4672호).

그 동안, 나는 깊은 보금자리를 피하기 위해 당신의 HTML을 리팩터링하는 것을 추천한다.기존 템플릿을 계속 사용해야 하는 경우, 다음과 같이 생산 모드로 구축하여 문제를 해결할 수 있다.vue-loader건너뛰다prettier생산 빌드의 경우:

NODE_ENV=production npm run dev

갱신하다 vue-loaderv15.5.0에서 사용 안 함을 허용하는 옵션을 추가함prettier(의 최신 버전으로 업데이트됨@vue/cli확실히 하기 위해vue-loader새 옵션의 최신 버전임).이 옵션은 다음과 같이 사용할 수 있다.

  1. 추가하다vue.config.js(아직 존재하지 않는 경우) 프로젝트의 근본에 도달하십시오.

  2. 포함할 파일 편집:

    module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.prettify = false
          return options
        })
  }
}

업데이트 2019

vue-loader사용 안 함으로 설정하기 위해 옵션에 플래그 추가prettier또한 개발 중에.

추가하기prettify: false당신께vue-loader옵션들

https://vue-loader.vuejs.org/options.html#prettify

참고: 최신 버전의 vue-loader가 있는지 확인하십시오.

나는 vue-cli 3.1.1(TypeScript + SCSS)과 Bootstrap(기본적으로 약간의 중첩이 필요하다)과 비슷한 문제를 가지고 있었다.구조 예:

<template>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card-deck">
                    <div class="card">
                        <div class="card-body">
                            <div class="accordion">
                                <div class="card">
                                    <div class="card-header">
                                        ...
                                    </div>
                                    <div class="collapse">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-12 form-group">
                                                    <label>...</label>
                                                    <div class="dropdown">
                                                        <button class="custom-select" type="button" data-toggle="dropdown">{{someValue}}</button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#" :data-key="somekey1" @click="onClickMethod">value1</a>
                                                            <a class="dropdown-item" href="#" :data-key="somekey2" @click="onClickMethod">value2</a>
                                                            ...

400개 이상의 코드 라인(템플릿 + TypeScript + SCSS)을 컴파일하는 데 최대 12초가 필요했다.제거 후:

:data-key="somekey1" @click="onClickMethod"
:data-key="somekey2" @click="onClickMethod"

암호는 컴파일하는데 5~6초가 필요했다.코드를 사용자 지정 구성 요소로 이동한 후(및 일부 TypeScript 코드를 Vue 구성 요소에서 Helper.ts 파일로 이동):

<template>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card-deck">
                    <div class="card">
                        <div class="card-body">
                            <div class="accordion">
                                <div class="card">
                                    <div class="card-header">
                                        ...
                                    </div>
                                    <div class="collapse">
                                        <div class="card-body">
                                            <SubComponent/>

컴파일하는데 700ms가 필요하다(주요 구성요소 1개와 추가 하위 구성요소 2개, 각 파일은 정확히 97줄의 코드를 가진 100줄 미만의 코드 + Helper.ts를 가지고 있다).

그래서 만약 당신이 가난에 시달린다면npm run serve 서브 는 성능, 요하, 하하를 큰 못했다. 호출하는 동안 컴파일 시간에 큰 차이가 없음을 알아차리지 못함npm run build그래서 나는 이 문제가 또한 다음에 사용할 수 있는 코드 프리메이커에 의해 발생한다고 가정한다(잘못될 수도 있다).serve에 있어서 장애가 있는.build(TSLint는 저장 작업 시 호출되지 않으므로 영향을 미치지 않음)npm run serve내 경우에는).

나는 당신의 25개의 내포된 것에 대해 특별한 문제가 없다.<div>의 예: (Vue 런타임 컴파일러를 사용하여 브라우저에서 쉽게 테스트할 수 있도록 하기 위해 아래 예)

new Vue({
  el: '#app',
  template: '#app-template',
});
#app div {
  border: 1px solid grey;
  padding: 1px;
}
<script src="https://unpkg.com/vue@2"></script>

<div id="app">
</div>

<template id="app-template">
<div id="app">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div>
                        <div>
                          <div>
                            <div>
                              <div>
                                <div>
                                  <div>
                                    <div>
                                      <div>
                                        <div>
                                          <div>
                                            <div>
                                              <div>
                                                <div>
                                                  <div>25 nested <code>&lt;div&gt;</code>'s</div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

다음은 CodeSandbox에서 Vue CLI 프로젝트를 사용한 데모(예: https://codesandbox.io/s/v3knpl447l)입니다.

(즉, 템플릿을 미리 컴파일하여 CodeSandbox 서버에서 실제로 빌딩 프로세스가 수행됨)

참조URL: https://stackoverflow.com/questions/50752427/building-deeply-nested-html-with-vue-cli-takes-forever

반응형

'IT이야기' 카테고리의 다른 글

Vue.js 및 Firebase에서 기존 사용자에게 새 데이터를 추가하는 방법  (0) 2022.05.02
내 경로에서 Vue'x getter를 사용할 때 "state.user가 null임"  (0) 2022.05.02
c 어레이 - 경고: 문자열 리터럴이 아닌 형식  (0) 2022.05.02
Axios - 한 번의 호출만으로 헤더 권한 부여 제거  (0) 2022.05.02
Java에서 일반 매개 변수 유형 가져오기(반영 포함)  (0) 2022.05.02

'IT이야기'의 다른글

  • 현재글vue-cli를 사용하여 중첩된 html을 구축하는 데 오래 걸림

관련글

댓글

티스토리툴바