我发现vue cli(2.9.6,但3.0.0 beta*也有同样的问题)的构建过程会在模板的html变得相对深入后永远持续下go .

例如,我刚刚在App.vue中添加了一些div,这是预先包含的:

<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(Details)

似乎问题可能与环境有关,下面是详细信息.

这个问题至少可以在以下环境中重现:

  • macOS High Sierra on Mac mini(2014年底)
  • 戴尔XPS13上的Ubuntu 18.04

node 和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 到 be served over an HTTP server.
  Opening index.html over file:// won't work.

 94% asset optimization 

如果我放手,它需要...1155409毫秒!!!!

 DONE  Compiled successfully in 1155409ms                                                        13:35:34

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

MORE EDIT

正如@到ny19所指出的,更漂亮的可能是嫌疑犯.按照建议,我在Ubuntu 18.04上try 了一些模式(不是Mac,因为Mac现在不在,抱歉),结果如下:

  • vue cli 2.9.6+npm run dev-挂起
  • vue cli 2.9.6+npm run build-6秒(这太令人困惑了.上面的npm run build万秒是多少?可能是重新安装vue cli导致了更改?)
  • vue-cli 3.0.0-beta16 + vue serve - hang (as opposed 到 @到ny19's report)
  • vue cli 3.0.0-beta16+vue build-5秒

EVEN MORE EDIT

所以,这似乎肯定是由漂亮引起的.

"SOLUTION"

最后我做了这件事——跟随@到ny19的报告,将/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、Node 8.9.4和9.11.1).新创建的vue-cli3也会出现这个问题.x项目.

实际上,绞刑发生在prettier年,从vue-loader's template compiler年开始.嵌套的<div>vue-loader转换为JavaScript,这将成为以下代码段:

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(Issue 4672)中报告了这个错误.

同时,我建议重构HTML以避免深度嵌套.如果您需要坚持使用旧模板,您可以通过在生产模式下构建来解决这个问题,因为vue-loader跳过prettier进行生产构建:

NODE_ENV=production npm run dev

UPDATE vue-loader v15.5.0添加了prettify选项以允许禁用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
            })
      }
    }
    

Vue.js相关问答推荐

为什么在Vue.js中修改非react 性似乎是react 性的?

Vue 3 需要 main.js 中的文件

如何将模板传递给EJS菜单

何时将代码拆分为 Nuxt 中的组件?

在keyup Vuejs 2上获取输入值

使用 jquery-chosen 插件更新 vuejs 模型值

Vue:如何将 store 与组件一起使用?

一个 div 组件中的 Vue.js 2.0 路由链接

在 vuejs 中的图像中包含 router-link 标记

VueRouter 未定义

如何将 vuetify 2.0 beta 安装到新的 vue cli 项目中?

Vue-test-utils:在单个测试中多次使用 $nextTick

如何在 vue 3 中获取路由的参数?

如何使用 JavaScript 按索引删除数组元素?

样式化 Vue 插槽

在 nuxt.js 页面中包含外部 javascript 文件

Vue - 如何在 v-if 或组件中使用窗口对象

如何从 Vuex 操作访问 Vuex 状态属性?

Vue-i18n - 无法读取未定义的属性配置

Vuex 模块Mutations