How to use with vue project create by vue-cli 3.0

[chs97]

How to use with vue project create by vue-cli 3.0

[cmcnicholas]

Same issue, I have setup like so:

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin({
  outputTarget: './smp.dat',
});
var StylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  configureWebpack: smp.wrap({
    entry: './src/entry.ts',
    plugins: [
      new StylelintPlugin({
        files: ['src/**/*.less', 'src/**/*.css'],
        emitErrors: false
      })
    ]
  }),
  chainWebpack: (config) => {
    config.devtool('source-map');
  },
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
  },
  parallel: true,
};

However I get output like this on incremental builds:

 SMP  ⏱  
General output time took 29.69 secs

 SMP  ⏱  Plugins
Object took 2.98 secs

 SMP  ⏱  Loaders
D:\Development\alloy-web\node_modules\cache-loader\dist\cjs.js, and 
D:\Development\alloy-web\node_modules\vue-loader\lib\index.js took 0.685 secs
  module count = 1
D:\Development\alloy-web\node_modules\css-loader\index.js, and 
D:\Development\alloy-web\node_modules\vue-loader\lib\loaders\stylePostLoader.js, and 
D:\Development\alloy-web\node_modules\postcss-loader\src\index.js, and 
D:\Development\alloy-web\node_modules\cache-loader\dist\cjs.js, and 
D:\Development\alloy-web\node_modules\vue-loader\lib\index.js took 0.07 secs
  module count = 1
D:\Development\alloy-web\node_modules\cache-loader\dist\cjs.js, and 
D:\Development\alloy-web\node_modules\vue-loader\lib\loaders\templateLoader.js, and 
D:\Development\alloy-web\node_modules\cache-loader\dist\cjs.js, and 
D:\Development\alloy-web\node_modules\vue-loader\lib\index.js took 0.042 secs
  module count = 1
D:\Development\alloy-web\node_modules\cache-loader\dist\cjs.js, and 
D:\Development\alloy-web\node_modules\ts-loader\index.js, and 
D:\Development\alloy-web\node_modules\cache-loader\dist\cjs.js, and 
D:\Development\alloy-web\node_modules\vue-loader\lib\index.js took 0.039 secs
  module count = 1

Which gives no information about what happens in General output time

[stephencookdev]

@cmcnicholas is that output from running on Windows?

[cmcnicholas]

@cmcnicholas is that output from running on Windows?

yep

[xubaoshi]

@cmcnicholas same problem, has the problem been solved?

[vpiskunov]

Any luck yet? really need to see the build times :)

[vpiskunov]

Alright, I made it work: in your vue.config.js, do the following:

module.exports = {
  configureWebpack: (config) => {
    smp.wrap(config);
  },
};

If you have anything in your configureWebpack, ensure configureWebpack is a function, not an object/array.

Then add smp.wrap(config) to the last line inside your configureWebpack

Producing following output for me:

 SMP  ⏱  
General output time took 23.49 secs

 SMP  ⏱  Plugins
WatchStateLoggerPlugin took 0.056 secs
Object took 0.044 secs
VueLoaderPlugin took 0.026 secs
HotModuleReplacementPlugin took 0.024 secs
GenerateBundleStarterPlugin took 0.001 secs
DefinePlugin took 0 secs
NativeScriptWorkerPlugin took 0 secs

 SMP  ⏱  Loaders
babel-loader took 12.49 secs
  module count = 205
nativescript-dev-webpack, and 
nativescript-dev-webpack, and 
string-replace-loader, and 
css-loader, and 
vue-loader, and 
postcss-loader, and 
sass-loader, and 
vue-loader, and 
string-replace-loader took 8.067 secs
  module count = 4
nativescript-dev-webpack, and 
babel-loader, and 
eslint-loader took 2.086 secs
  module count = 1
nativescript-dev-webpack, and 
nativescript-dev-webpack, and 
string-replace-loader, and 
css-loader, and 
vue-loader, and 
postcss-loader, and 
vue-loader, and 
string-replace-loader took 0.844 secs
  module count = 1
vue-loader, and 
string-replace-loader, and 
eslint-loader took 0.685 secs
  module count = 11
vue-loader, and 
vue-loader, and 
string-replace-loader took 0.31 secs
  module count = 6
modules with no loaders took 0.219 secs
  module count = 2
babel-loader, and 
eslint-loader took 0.211 secs
  module count = 2
babel-loader, and 
vue-loader, and 
string-replace-loader took 0.088 secs
  module count = 4
vue-loader, and 
nativescript-dev-webpack, and 
nativescript-dev-webpack, and 
string-replace-loader, and 
css-loader, and 
postcss-loader, and 
sass-loader, and 
vue-loader, and 
string-replace-loader, and 
eslint-loader took 0.004 secs
  module count = 4
vue-loader, and 
babel-loader, and 
vue-loader, and 
string-replace-loader, and 
eslint-loader, and 
eslint-loader took 0.003 secs
  module count = 4
vue-loader, and 
nativescript-dev-webpack, and 
nativescript-dev-webpack, and 
string-replace-loader, and 
css-loader, and 
postcss-loader, and 
vue-loader, and 
string-replace-loader, and 
eslint-loader took 0.001 secs
  module count = 1

[vpiskunov]

@stephencookdev Maybe we can add this to Readme.md or to examples dir? Happy to contribute

[stephencookdev]

Nice one @vpiskunov - yeah a entry in the examples dir would be amazing. Happy to accept PRs for that 🙂

[vpiskunov]

@stephencookdev actually my solution above worked but only during npm run ios (it's a vue+nativescript project), but failed on web-build running into #63

Seems like this could be related:
jantimon/html-webpack-plugin#875
GoogleChromeLabs/preload-webpack-plugin#86

Let me know what you think.

[mmusket]

I got my build working by using
configureWebpack: smp.wrap({ plugins: [] }),

(I don't have any custom plugins)

but not sure show to interpret the results

C:\Brandollo\Code\brdl-website\node_modules\mini-css-extract-plugin\dist\loader.js, and
C:\Brandollo\Code\brdl-website\node_modules\css-loader\index.js, and
C:\Brandollo\Code\brdl-website\node_modules\vue-loader\lib\loaders\stylePostLoader.js, and
C:\Brandollo\Code\brdl-website\node_modules\postcss-loader\src\index.js, and
C:\Brandollo\Code\brdl-website\node_modules\sass-loader\lib\loader.js, and
C:\Brandollo\Code\brdl-website\node_modules\cache-loader\dist\cjs.js, and
C:\Brandollo\Code\brdl-website\node_modules\vue-loader\lib\index.js took 12.44 secs
  module count = 104
C:\Brandollo\Code\brdl-website\node_modules\css-loader\index.js, and
C:\Brandollo\Code\brdl-website\node_modules\vue-loader\lib\loaders\stylePostLoader.js, and
C:\Brandollo\Code\brdl-website\node_modules\postcss-loader\src\index.js, and
C:\Brandollo\Code\brdl-website\node_modules\sass-loader\lib\loader.js, and
C:\Brandollo\Code\brdl-website\node_modules\cache-loader\dist\cjs.js, and
C:\Brandollo\Code\brdl-website\node_modules\vue-loader\lib\index.js took 12.26 secs
  module count = 104

[pengfeir]

@vpiskunov I followed your configuration but gave an error

[klesun]

Same for me, getting the Cannot read property 'tap' of undefined error when trying using smp.wrap(config); in configureWebpack function.

"@vue/cli-service": "^4.1.2",
"speed-measure-webpack-plugin": "^1.3.1",

Defining configureWebpack as an object, not as function does not cause the failure, though.

[gottayan]

I need apply it with vux loader but it doesn't work.

if I try this like you it is ok.

configureWebpack: smp.wrap({
plugins: [
new BundleAnalyzerPlugin
]
})

but it does not work like this.at the same time the vim has no errors.

configureWebpack: config => {
const mergeConfig = require('vux-loader').merge(config, {
plugins: [
{
name: 'vux-ui'
}, {
name: 'duplicate-style'
}, {
name: 'less-theme',
path: 'src/theme.less'
}
]
})
smp.wrap(mergeConfig)
}

[destroytoday]

...has anyone figured out the fix for Cannot read property 'tap' of undefined? I'd love to use this lib to get my build time down.

[afelipez]

If you have this error : TypeError: Cannot read property 'tap' of undefined.

VueJS doc (https://cli.vuejs.org/config/#configurewebpack) says that we can pass Object or Function as parameter of configureWebpack attribute.

Try the following code on vue.config.js :

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = {
  configureWebpack: smp.wrap({})
}

[yangger6]

If you use vue-cli3, use chainWebpack in vue.config.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")

module.exports = {
// ...
  chainWebpack: config => {
    // ...
  config
    .plugin('speed-measure-webpack-plugin')
    .use(SpeedMeasurePlugin)
    .end()
  }
}

[yangtianfu01]

If you use vue-cli3, use chainWebpack in vue.config.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")

module.exports = {
// ...
  chainWebpack: config => {
    // ...
  config
    .plugin('speed-measure-webpack-plugin')
    .use(SpeedMeasurePlugin)
    .end()
  }
}

I configure like you, but I can't measure the time of plugins

[wheelebin]

If you use vue-cli3, use chainWebpack in vue.config.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")

module.exports = {
// ...
  chainWebpack: config => {
    // ...
  config
    .plugin('speed-measure-webpack-plugin')
    .use(SpeedMeasurePlugin)
    .end()
  }
}

I tried configuring my chainWebpack like this but it doesn't measure a bunch of plugins. This is the output I got.

SMP ⏱
General output time took 32 mins, 43.8 secs

SMP ⏱ Loaders
cache-loader, and
thread-loader, and
babel-loader took 2 mins, 37.65 secs
module count = 435
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
sass-loader took 2 mins, 4.49 secs
module count = 98
css-loader, and
postcss-loader, and
sass-loader took 2 mins, 4.43 secs
module count = 98
modules with no loaders took 2 mins, 0.363 secs
module count = 572
vue-loader, and
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
sass-loader, and
cache-loader, and
vue-loader took 1 min, 43.13 secs
module count = 148
css-loader, and
vue-loader, and
postcss-loader, and
sass-loader, and
cache-loader, and
vue-loader took 1 min, 42.75 secs
module count = 74
vue-loader, and
cache-loader, and

[wheelebin]

If you use vue-cli3, use chainWebpack in vue.config.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")

module.exports = {
// ...
  chainWebpack: config => {
    // ...
  config
    .plugin('speed-measure-webpack-plugin')
    .use(SpeedMeasurePlugin)
    .end()
  }
}

I tried configuring my chainWebpack like this but it doesn't measure a bunch of plugins. This is the output I got.

SMP ⏱ General output time took 32 mins, 43.8 secs

SMP ⏱ Loaders cache-loader, and thread-loader, and babel-loader took 2 mins, 37.65 secs module count = 435 mini-css-extract-plugin, and css-loader, and postcss-loader, and sass-loader took 2 mins, 4.49 secs module count = 98 css-loader, and postcss-loader, and sass-loader took 2 mins, 4.43 secs module count = 98 modules with no loaders took 2 mins, 0.363 secs module count = 572 vue-loader, and mini-css-extract-plugin, and css-loader, and postcss-loader, and sass-loader, and cache-loader, and vue-loader took 1 min, 43.13 secs module count = 148 css-loader, and vue-loader, and postcss-loader, and sass-loader, and cache-loader, and vue-loader took 1 min, 42.75 secs module count = 74 vue-loader, and cache-loader, and

For anyone facing the same problem, I found a comment on an issue from vue-cli's repo with a workaround and managed to get it working by following his second option.

vuejs/vue-cli#6091 (comment)