Building deeply nested html with vue-cli takes forever

Question

I found that vue-cli (2.9.6, but 3.0.0 beta* has the same issue) \'s building process takes forever once the template\'s html gets relativelly deep.

For example, I j

Answer 1

I can reproduce the performance issue as you described (macOS High Sierra 10.13.4, Node 8.9.4 and 9.11.1). The issue also occurs with a newly created vue-cli 3.x project.

The hang is actually happening in prettier, called from vue-loader's template compiler. The nested

s are converted into JavaScript by vue-loader, and that becomes the following snippet:

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 passes this long string to prettier, which takes about 159 seconds to process. The cause of the bug is the deeply nested function calls that create the divs. I've reported this bug in prettier (Issue 4672).

In the meantime, I recommend refactoring your HTML to avoid deep nesting. If you need to stick with the old template, you could workaround the issue by building in production mode, as vue-loader skips prettier for production builds:

NODE_ENV=production npm run dev

UPDATE vue-loader v15.5.0 adds the prettify option to allow disabling prettier (update to the latest version of @vue/cli to ensure your vue-loader is current with the new option). You can use this option as follows:

1. Add vue.config.js (if it doesn't exist already) to the root of your project.

2. Edit the file to include:

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

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...