vue-loader building performance

[qbaty]

I used vue-cli webpack template to build my project.
I build my project in production way cost 17411ms, before I optimized it the time is 42123ms.

I try improve build performance a little bit more.
And I found out the those script content in .vue files will met the vue-loader rather than babel-loader.
So I want assign a loader for those script like the doc said, and want to use cacheDirectory for better performance like this.

Turns out time costs the same.
I use HappyPack for vue-loader.

Any suggestion about improve my building performance will be helpful

[yyx990803]

Are you saying using HappyPack reduced the time from 42s to 17s?

[qbaty]

No, I did a few things.

• using dllPlugin & dllReferencePlugin
• turn off webpack devtool
• using HappyPack
• using babel-loader cache

But babel-loader not really effect the .vue file? right?
I think it is a good idea to add HappyPack to vue-cli which can help the loaders with handling resources
I just want to make the whole progress a little more faster

[qbaty]

I do not think 17s is fast enough..

[yyx990803]

Just curious, how many components are there in your app? And how many js dependencies do you have in the app?

[soliury]

I have met this problem, and I use dll + HappyPack, it reduce from 63s to 13s, hot reload reduced from 13s to 3s. We have 50+ pages.

[qbaty]

@soliury Does HappyPack effect the build performance ?
I find HappyPack is not very helpful with vue-loader, I am not sure...
What is your config?

[soliury]

HappyPack is helpful when the pages is large, it can effect the speed of babel. I think the dll is much more effective

[blake-newman]

IMO I have found the greatest benefits to reduce compile times, is removing lint based loaders. Using Babel directory cache.

Unfortunately as an application increases in size the greater the build times no matter the toolset in use. Vue-loader is very efficient, as it is essentially a mapping for other loaders.

So the more Babel/sass ect you use the slower the build times will be. This is out of vue-loader remit and if you didn't use vue-loader the difference is negligible.

For hot reloading, removing linters significantly helps this stat. 40s for a build is pretty good IMO as this is run once, hot reloading times are more worrying as they affect the dev experience.

[lanlin]

vue-loader not working with happypack. happaypack issues#83

[yyx990803]

@lanlin I've identified the parts that make it incompatible, will likely be fixed in the next release.

[soliury]

@yyx990803 good job.

[kazupon]

Close (fixed v11.0.0)
https://github.com/vuejs/vue-loader/releases/tag/v11.0.0

[soliury]

I have a try, but failed:

This is the error:

Module not found: Error: Can't resolve 'scss-loader' in 

My config is :

            {
                test: /\.vue$/,
                loader: 'happypack/loader?id=vue',
                exclude: [
                    /node_modules/,
                    /vendor/
                ]
            }

[limichange]

vue-loader and happypack is latest. I have installed scss-loader.If i don't use happypack, all thing is ok.Somebody know why ? I use vue-cli - webpack create the project.

ERROR in ./src/pages/payPage/payPage.vue
Module build failed: AssertionError: HappyPack: plugin for the loader '1' could not be found! Did you forget to add it to the plugin list?
    at Object.HappyLoader (/project/node_modules/happypack/lib/HappyLoader.js:29:3)
 @ ./src/pages/payPage/index.js 1:0-32
 @ ./src/pages/index.js
 @ ./src/router/index.js
 @ ./src/main.js

[soliury]

@limichange I also meet the same error

[limichange]

@kazupon Could you reopen this issue?

[yyx990803]

So - the issue is not really in vue-loader now, but because HappyPack does not support non-serializable loader options/query, and also has a bug in serializing Object queries.

A workaround that should work is using webpack.LoaderOptionsPlugin to provide vue-loader options, but HappyPack doesn't seem to work with that either.

So for now there's nothing we can do on vue-loader's side - I'll see if I can get a PR for HappyPack to improve this.

[smyth64]

@limichange and @soliury
I used to get over this error by just saying

new HappyPack({
  id: '1', // instead of id: 'vue'
  loaders: [ 'vue-loader' ],
  threads: 4
})

After that happy pack is found!
The only error I still get is this:

Object spread operator requires specified objectAssign option with 'Object.assign' or polyfill helper. (16:12)

I think this is because the vueConfig is not correctly assigned.. Gonna try to get over this..

[smyth64]

ok i managed it using this config here:

https://flyyang.github.io/2017/03/09/%E4%BD%BF%E7%94%A8happypack%E5%B0%86vuejs%E9%A1%B9%E7%9B%AEwebpack%E5%88%9D%E5%A7%8B%E5%8C%96%E6%9E%84%E5%BB%BA%E9%80%9F%E5%BA%A6%E6%8F%90%E5%8D%8750/

Unfortunately the build become slower instead of faster =/
This is maybe because I also use SSR.