search

vuejs-templates / browserify

A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
273 stars 85 forks source link

JS only #9

Closed thany closed 8 years ago

thany commented 8 years ago

I did exactly this:

npm install -g vue-cli
vue init browserify my-project
cd my-project
npm install
npm run dev

And then opened http://localhost:8080. Empty page (well, only a heading, that is), which seems fine, since it's supposed to be an empty project. But here the thing: it doesn't output any css. It manages to inject css inline in the DOM, but it doesn't create a proper css file and reference to that in the html. What it should do: output a html file with a new <link> tag in it, and output a css file as well with all compiled css.

Injecting css like this is absolutely horrible for performance.

yyx990803 commented 8 years ago

Use Webpack + vue-loader if you want CSS extraction.

thany commented 8 years ago

Not just vue-loader, you need a whole lot more than that. But still what did you mean by "if you want"? I mean, who seriously wants to bloat their DOM with CSS, and injected by javascript to make it worse?

yyx990803 commented 8 years ago

@thany it works pretty well in practice for small and medium sized projects. It only becomes problematic when you have hundreds of different components, in which case you should be using Webpack + vue-loader instead, which offers CSS extraction, dedupe, minification etc. Since you are using vue-cli already, it's really just switching to a different template where things are already set up for you. Or, if you are not lazy, you can contribute to add CSS extraction support to vueify.