vim-vue
vim-vue copied to clipboard
posva
I can't fix the slowness.
When I was using <style lang="stylus"></style>, it was fairly zippy. However, when I modified it to lang="less" or lang="css", it became extremely slow!
I tried to do let g:vue_disable_pre_processors=1, and this time it became alright, but not zippy like with lang="stylus". But this doesn't work. No matter what lang I put, the syntax is highlighted like CSS it seems. And I have lang="pug" for the template, and now that's not highlighted.
Basically, it seems like let g:vue_disable_pre_processors=1 makes it work alright, at the expense of not working ideally. It effectively means I can just set the .vue file type to ft=html to achieve basically the same thing, without installing this plugin.
If that's the case, there's no point of using vim-vue with let g:vue_disable_pre_processors=1 because I can just use ft=html.
vim-vue doesn't get slower because you set a different lang, it gets slower because some preprocessors are slow. It isn't slow on my end when using plain css or less
I have a TON of plugins. I'm on a Chromebook Pro. Adding this plugin caused extreme slowness, and removing it made neovim zippy again. It could possibly be a conflict with another plugin?
Anyway, not sure yet. I'll post back later if/when I try it out again, as for now I'm using ft=html with no specials langs.
I use "slm" and "scss" in my Vue components. I also had to disable the pre-processors because it was too slow. However, I just tried deleting all the preprocessors I don't use in the syntax file and it seems to be fast enough again. Admittedly my test is not very scientific, the most obvious issue was pressing O in SCSS and having it take maybe 500 ms to add a new line.
Perhaps the pre-processors could be enabled/disable via an array of names?
Deleting the register_language lines didn't help that much for me, I ended up turning all of them off with let g:vue_disable_pre_processors=1, but even with that it's hard to bear how slow the cursor is.
It doesn't look like neovim is going to start working on a new syntax engine any time soon. I read the entire discussion referenced in the issue @trusktr made in neovim, and some people have made asynchronous highlighting work with c/c++/objc mainly by using vim's matchaddpos() and another process to get the AST.
I wonder if that's the solution for multi-syntax files? I may take a shot at it.
Chiming in here - I have a fairly barebones vimrc file. The only time vim is slow for me, when using my vimrc file, is if i'm ssh'd into a server and my wifi is bad. Confirming I have good wifi right now, having added this plugin also makes my .vue files load up in vim with about a 10 second delay. To add to that, I'm just learning vue so while I have SCSS in my particular App.vue file it is no more than 20 lines.
The plugin works great when it loads and I definitely appreciate your work on this! Just wanted to add my experience to the relevant thread.
One way to work around this: Separate your vue components into MyComponent.vue, MyComponent.vue.js and MyComponent.vue.scss (replacing .scss with the appropriate extension for your style preprocessor). The .vue file only has your <template> and imports your other files with
<script src="./MyComponent.vue.js"></script>
<style lang="scss" src="./MyComponent.vue.scss"></style>
<template>
<!-- just do this part like a normal single file component vue template -->
</template>
It's not ideal, but I think it's the best way to accommodate 3 filetypes' worth of plugins/syntax highlighting right now. It also gives other devs on your team more leeway in what tools they use, especially if you're working on a project with large component files.
That said, single-file components are pretty great, and I think it's worth the effort to make them work smoothly in this plugin. I'll see what I can do to optimize this plugin a bit more and hopefully get a pull request in sometime soon. In the meantime, hopefully the workaround I described can help some people out :)
thx for the feedback @rjmill appreciate it! for now, disabling the preprocessors in my vimrc file has resulted in a sufficient enough speed up :)
I suppose we can add an option for only including the languages that are actually found in the file. And if you then add a section you run :e to get syntax highlighting for that section too.
@adriaanzon - just tested, performance-enhancement is tangibly faster for me
I reinstall the plugin by using branch performance-enhancement. But I don't get the performance gains. It still take > 20% CPU more cost than without this plugin.
| CPU cost | file type | with the plugin |
|---|---|---|
| <8% | vue(behavior like plain text without syntax highlight) | no |
| 6-12% | html | no |
| 30%-45% | vue | yes |
@maple-leaf - maybe post your vimrc and steps that created these tests? That doesn't sound right at all, and I can't replicate a CPU usage of 40% even with the performance master gives.
It turns out that performance relative another plugin yajs.vim and relativenumber setting. Here's test result:
| CPU cost | file type | plugin used | relativenumber |
|---|---|---|---|
| 5%-10% | vue | vim-vue | on |
| 25%-30% | vue | vim-vue + yajs | on |
| <3% | vue | vim-vue + yajs | off |
Machine: Mac Pro, cpu 2.9 I5, mem 8g OS: MacOS 10.13.3 nvim version output:
NVIM v0.2.2
Build type: Release
LuaJIT 2.0.5
Compilation: /usr/local/Homebrew/Library/Homebrew/shims/super/clang -Wconversion -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=1 -DNVIM_MSGPACK_HAS_FLOAT32 -DNVIM_UNIBI_HAS_VAR_FROM -DNDEBUG -DMIN_LOG_LEVEL=3 -Wall -Wextra -pedantic -Wno-unused-par
ameter -Wstrict-prototypes -std=gnu99 -Wimplicit-fallthrough -Wvla -fstack-protector-strong -fdiagnostics-color=auto -DINCLUDE_GENERATED_DECLARATIONS -I/tmp/neovim-20180209-92407-udkzoo/neovim-0.2.2/build/config -I/tmp/neovim-20180209-924
07-udkzoo/neovim-0.2.2/src -I/usr/local/include -I/usr/local/include -I/usr/local/include -I/usr/local/include -I/usr/local/include -I/usr/local/include -I/usr/local/opt/gettext/include -I/usr/include -I/tmp/neovim-20180209-92407-udkzoo/n
eovim-0.2.2/build/src/nvim/auto -I/tmp/neovim-20180209-92407-udkzoo/neovim-0.2.2/build/include
plugin version: both are lastest version, vim-vue use branch performance-enhancement
minimal nvim config:
if empty($XDG_DATA_HOME)
let $XDG_DATA_HOME = $HOME . '/.config'
endif
let mapleader = "\<Space>"
" curl -fLo ~/.config/nvim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
call plug#begin('~/.config/nvim/plugged')
" vue support
Plug 'posva/vim-vue', { 'branch': 'performance-enhancement' }
" JS syntax, supports ES6
Plug 'othree/yajs.vim', {
\ 'for': ['javascript', 'vue']
\ }
" Add plugins to &runtimepath
call plug#end()
"turn on that syntax highlighting
syntax on
set relativenumber
I just gave it a shot without relativenumber (which I always have on), but no luck, still slow for me. I do have a bunch of other plugins enabled, and my vimrc is 2000 LoC. Maybe the next time I work on a Vue project I can find time to see what may be conflicting...
@trusktr I had the same issue and I found the conflicting plugin is othree/yajs.vim. Disabling it makes vim-vue perform really well.
I'm on a Republic Of Gamers Asus gaming machine, and I just tried disabling all JavaScript syntax plugins, but no luck, it's super slow!
Vim just needs a better syntax API. Here's thoughts on the future of such API in Neovim: https://github.com/neovim/neovim/issues/719
Not sure if it helps, but here's the result of syntime on, moving cursor around, then syntim report:
TOTAL COUNT MATCH SLOWEST AVERAGE NAME PATTERN
0.011414 1914 561 0.000035 0.000006 typescriptOpSymbols =\{1,3}\|!==\|!=\|<\|>\|>=\|<=\|++\|+=\|--\|-=
0.007004 1749 396 0.000095 0.000004 typescriptLogicSymbols \(&&\)\|\(||\)
0.004682 1452 66 0.000020 0.000003 typescriptFloat \<-\=\%(\d[0-9_]*\.\d[0-9_]*\|\d[0-9_]*\.\|\.\d[0-9]*\)\%([eE][+-]\=\d[0-9_]*\)\=\>
0.003694 2904 1716 0.000018 0.000001 typescriptParens [()]
0.003365 1683 363 0.000020 0.000002 typescriptNumber -\=\<\d[0-9_]*L\=\>
0.003340 1386 0 0.000024 0.000002 typescriptNumber -\=\<0[oO]\o[0-7_]*\>
0.003056 1386 0 0.000018 0.000002 typescriptNumber -\=\<0[xX][0-9a-fA-F][0-9a-fA-F_]*\>
0.002971 1386 0 0.000019 0.000002 typescriptNumber -\=\<0[bB][01][01_]*\>
0.002913 1914 594 0.000021 0.000002 typescriptEndColons [;,]
0.002526 1749 660 0.000022 0.000001 typescriptBraces [{}\[\]]
0.001900 235 0 0.000028 0.000008 htmlTagName \<\(b\|i\|u\|h[1-6]\|em\|strong\|head\|body\|title\)\>
0.001671 235 0 0.000021 0.000007 htmlTagName \<\(b\|i\|u\|h[1-6]\|em\|strong\|head\|body\|title\)\>
0.001591 1386 0 0.000016 0.000001 typescriptCommentSkip ^[ \t]*\*\($\|[ \t]\+\)
0.001299 400 33 0.000030 0.000003 vue_typescript <script \_[^>]*\%(lang=\("\|'\)[^\1]*\(ts\|typescript\)[^\1]*\1\|ts\)\_[^>]*>
0.001187 400 0 0.000021 0.000003 vue_scss <style \_[^>]*lang=\("\|'\)[^\1]*scss[^\1]*\1\_[^>]*>
0.001139 231 99 0.000018 0.000005 htmlArg [@v:][-:.0-9_a-z]*\>
0.001040 132 0 0.000030 0.000008 htmlArg \<\(accept-charset\|label\)\>
0.000999 235 0 0.000033 0.000004 htmlTagError [^>]<
0.000967 400 0 0.000020 0.000002 vue_pug <template \_[^>]*lang=\("\|'\)[^\1]*\%(pug\|jade\)[^\1]*\1\_[^>]*>
0.000942 235 0 0.000015 0.000004 htmlTagError [^>]<
0.000912 132 0 0.000022 0.000007 htmlArg \<\(http-equiv\|href\|title\)=
0.000902 235 0 0.000021 0.000004 htmlTagError [^>]<
0.000882 400 0 0.000017 0.000002 vue_coffee <script \_[^>]*lang=\("\|'\)[^\1]*coffee[^\1]*\1\_[^>]*>
0.000837 132 0 0.000016 0.000006 htmlArg \<\(accept-charset\|label\)\>
0.000833 400 0 0.000027 0.000002 coffeeScript <script [^>]*type=['"]\?text/coffeescript['"]\?[^>]*>
0.000823 235 235 0.000016 0.000004 htmlTagName \<[a-zA-Z0-9:-]*\>
0.000816 400 0 0.000015 0.000002 vue_less <style \_[^>]*lang=\("\|'\)[^\1]*less[^\1]*\1\_[^>]*>
0.000810 132 0 0.000017 0.000006 htmlArg \<\(http-equiv\|href\|title\)=
0.000800 132 0 0.000022 0.000006 htmlArg \<\(accept-charset\|label\)\>
0.000789 400 0 0.000014 0.000002 javaScript <script \_[^>]*language *=\_[^>]*vbscript\_[^>]*>
0.000779 132 0 0.000014 0.000006 htmlArg \<\(http-equiv\|href\|title\)=
0.000777 400 0 0.000019 0.000002 vue_sass <style \_[^>]*lang=\("\|'\)[^\1]*sass[^\1]*\1\_[^>]*>
0.000739 400 0 0.000015 0.000002 lessStyle <style [^>]*type *=[^>]*text/less[^>]*>
0.000686 400 0 0.000010 0.000002 vue_haml <template \_[^>]*lang=\("\|'\)[^\1]*haml[^\1]*\1\_[^>]*>
0.000672 400 0 0.000013 0.000002 vue_stylus <style \_[^>]*lang=\("\|'\)[^\1]*stylus[^\1]*\1\_[^>]*>
0.000607 2145 957 0.000016 0.000000 foldBraces {
0.000591 400 268 0.000017 0.000001 htmlError [<>&]
0.000559 367 132 0.000006 0.000002 htmlTagN <\s*[-a-zA-Z0-9]\+
0.000514 367 132 0.000009 0.000001 htmlTagN <\s*[-a-zA-Z0-9]\+
0.000491 336 103 0.000010 0.000001 htmlTagN </\s*[-a-zA-Z0-9]\+
0.000455 400 33 0.000014 0.000001 javaScript <script\_[^>]*>
0.000454 367 132 0.000007 0.000001 htmlTagN <\s*[-a-zA-Z0-9]\+
0.000391 336 103 0.000019 0.000001 htmlTagN </\s*[-a-zA-Z0-9]\+
0.000383 1683 198 0.000014 0.000000 foldBraces }
0.000348 336 103 0.000006 0.000001 htmlTagN </\s*[-a-zA-Z0-9]\+
0.000344 1386 33 0.000006 0.000000 vueSurroundingTag <\(script\|style\|template\)
0.000342 2244 891 0.000001 0.000000 typescriptDotNotation \.
0.000328 400 165 0.000004 0.000001 htmlTag <[^/]
0.000323 1386 0 0.000002 0.000000 typescriptRefComment \/\/\/<\(reference\|amd-\(dependency\|module\)\)\s\+.*\/>$
0.000317 1518 132 0.000016 0.000000 typescriptRegexpString /[^/*]
0.000302 400 0 0.000017 0.000001 htmlLink <a\>\_[^>]*\<href\>
0.000297 1386 0 0.000002 0.000000 typescriptDotNotation \.style\.
0.000292 400 0 0.000004 0.000001 htmlTitle <title\>
0.000284 400 0 0.000005 0.000001 htmlH1 <h1\>
0.000284 1386 0 0.000001 0.000000 typescriptDocComment /\*\*\s*$
0.000278 400 0 0.000015 0.000001 htmlH6 <h6\>
0.000278 400 0 0.000017 0.000001 htmlBold <strong\>
0.000270 198 198 0.000014 0.000001 typescriptStringS '\|$
0.000267 400 0 0.000016 0.000001 htmlHead <head\>
0.000266 1782 429 0.000001 0.000000 typescriptStringS '
0.000266 400 0 0.000003 0.000001 htmlItalic <i\>
0.000244 1386 0 0.000001 0.000000 typescriptLineComment \/\/.*
0.000244 400 0 0.000003 0.000001 htmlH3 <h3\>
0.000241 1386 0 0.000016 0.000000 typescriptDecorators @\([_$a-zA-Z][_$a-zA-Z0-9]*\.\)*[_$a-zA-Z][_$a-zA-Z0-9]*\>
0.000239 1386 0 0.000001 0.000000 shebang ^#!.*/bin/env\s\+node\>
0.000239 400 0 0.000016 0.000001 htmlUnderline <u\>
0.000233 400 0 0.000017 0.000001 htmlItalic <em\>
0.000233 1452 99 0.000001 0.000000 typescriptStringB `
0.000231 433 33 0.000027 0.000001 htmlCssDefinition style="
0.000231 1551 198 0.000001 0.000000 typescriptRefS '
0.000228 1386 33 0.000016 0.000000 typescriptStringD "
0.000227 132 0 0.000005 0.000002 htmlValue =[\t ]*[^'" \t>][^ \t>]*
0.000227 1386 0 0.000013 0.000000 typescriptSpecial \\\d\d\d\|\\.
0.000220 1386 33 0.000001 0.000000 typescriptComment /\*
0.000219 400 0 0.000003 0.000001 htmlH4 <h4\>
0.000217 1386 33 0.000013 0.000000 typescriptRefD "
0.000216 400 0 0.000004 0.000001 htmlH5 <h5\>
0.000210 400 0 0.000002 0.000001 htmlBold <b\>
0.000206 400 0 0.000003 0.000001 htmlH2 <h2\>
0.000198 429 429 0.000001 0.000000 htmlTag >
0.000181 132 0 0.000004 0.000001 htmlValue =[\t ]*[^'" \t>][^ \t>]*
0.000178 132 0 0.000004 0.000001 htmlValue =[\t ]*[^'" \t>][^ \t>]*
0.000170 400 0 0.000001 0.000000 cssStyle <style
0.000165 400 0 0.000017 0.000000 htmlPreProc <!--#
0.000152 400 0 0.000016 0.000000 htmlSpecialChar &#\=[0-9A-Za-z]\{1,8};
0.000148 400 33 0.000021 0.000000 htmlComment <!
0.000144 528 396 0.000001 0.000000 htmlString "
0.000140 400 0 0.000001 0.000000 htmlComment <!DOCTYPE
0.000134 400 103 0.000001 0.000000 htmlEndTag </
0.000120 334 37 0.000003 0.000000 vue_typescript </script>
0.000100 132 0 0.000002 0.000001 htmlEvent \<on\a\+\s*=[\t ]*"
0.000099 66 33 0.000004 0.000002 htmlCommentError [^><!]
0.000092 132 33 0.000002 0.000001 htmlCssDefinition style="
0.000088 363 231 0.000001 0.000000 htmlString "
0.000087 363 231 0.000001 0.000000 htmlString "
0.000085 132 0 0.000002 0.000001 htmlEvent \<on\a\+\s*=[\t ]*"
0.000083 132 0 0.000002 0.000001 htmlEvent \<on\a\+\s*=[\t ]*"
0.000079 132 33 0.000001 0.000001 htmlCssDefinition style="
0.000075 66 33 0.000014 0.000001 htmlCommentError [^><!]
0.000073 198 66 0.000001 0.000000 htmlString '
0.000071 132 0 0.000001 0.000001 htmlEvent \<on\a\+\s*=[\t ]*'
0.000066 132 0 0.000002 0.000000 htmlArg \<z-index\>
0.000065 132 0 0.000001 0.000000 htmlEvent \<on\a\+\s*=[\t ]*'
0.000065 132 0 0.000001 0.000000 htmlEvent \<on\a\+\s*=[\t ]*'
0.000063 231 231 0.000001 0.000000 htmlString "
0.000062 33 33 0.000005 0.000002 htmlCommentPart --\s*
0.000062 132 0 0.000001 0.000000 htmlArg \<z-index\>
0.000062 66 33 0.000002 0.000001 htmlCommentError [^><!]
0.000058 165 33 0.000001 0.000000 htmlString '
0.000058 204 204 0.000001 0.000000 htmlEndTag >
0.000057 132 0 0.000001 0.000000 htmlArg \<z-index\>
0.000056 165 33 0.000001 0.000000 htmlString '
0.000054 99 0 0.000001 0.000001 pugClassChar \.
0.000048 132 132 0.000002 0.000000 vueSurroundingTag >
0.000046 99 0 0.000001 0.000000 javaScriptExpression &{
0.000044 99 0 0.000001 0.000000 javaScriptExpression &{
0.000043 99 0 0.000001 0.000000 htmlSpecialChar &#\=[0-9A-Za-z]\{1,8};
0.000039 99 0 0.000001 0.000000 javaScriptExpression &{
0.000037 99 0 0.000001 0.000000 htmlSpecialChar &#\=[0-9A-Za-z]\{1,8};
0.000031 198 0 0.000001 0.000000 typescriptStringS \\\\\|\\'
0.000027 198 0 0.000000 0.000000 foldBraces \(\/\/.*\)\|\(\/.*\/\)
0.000025 66 66 0.000001 0.000000 htmlComment >
0.000023 66 33 0.000001 0.000000 htmlCommentPart --
0.000022 66 33 0.000001 0.000000 htmlCommentPart --
0.000017 99 99 0.000000 0.000000 typescriptStringB `
0.000016 66 33 0.000001 0.000000 htmlCommentPart --
0.000016 99 0 0.000001 0.000000 typescriptStringB \\\\\|\\`
0.000016 132 132 0.000000 0.000000 typescriptInterpolation }
0.000014 99 66 0.000000 0.000000 typescriptInterpolation ${
0.000013 66 0 0.000001 0.000000 typescriptRegexpString /[gi]\{0,2\}\s*[;.,)\]}]
0.000008 66 0 0.000000 0.000000 typescriptRegexpString /[gi]\{0,2\}\s*$
0.000007 33 33 0.000000 0.000000 typescriptComment \*/
0.087282 72342
In this case I'm using <script lang="ts">, and obviously I don't want to disable the only syntax plugin I have for that language. In another template without a <script> tag and only some HTML and a <style lang="stylus"> tag it is working at a workable speed.
Seems that when Vim is told to work with three syntaxes in the same file, it just poops! :hankey:
This plugin still slows down vim - a lot. What solved the issue is the let g:vue_disable_pre_processors=1 directive but on the other hand my .vue files are barely highlighted.
Turning off relativenumber remove the slowness I've on both Mac OS and Ubuntu for me.
@justin-lau thank you but relativenumber is crucial for me. There must be solution in terms of fixing the plugin.
@posva if you want I can send you whole ~/.vim dir inc .vimrc file so you can reproduce that.
If it's any help for anyone, couple of things that appear to have made a difference:
- If you're using sheerun/vim-polyglot: it looks like that's adding (duplicate?) Vue syntax definitions, I found some (anecdotal) improvement in navigation and editing speed with:
let g:polyglot_disabled = ['vue']
- The biggest improvements I found appeared to actually be because of linting. I moved entirely from using ALE to coc.nvim, and found huge improvements in navigation and editing speed. In the end I turned off the
coc-veturextension as it was overridingcoc-eslintautofixes, but so far so much better.
@harryjubb I made the edits that you suggested here as well as adding let g:vue_pre_processors='detect_on_enter' and my editor feels like an editor again. Thank you.
@harryjubb 's suggestion of disabling Vue in polyglot with
let g:polyglot_disabled = ['vue']
worked perfectly for me, removing all the lag I had (it was really bad)
