speed-measure-webpack-plugin
speed-measure-webpack-plugin copied to clipboard
How to use with vue project create by vue-cli 3.0
How to use with vue project create by vue-cli 3.0
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
@cmcnicholas is that output from running on Windows?
@cmcnicholas is that output from running on Windows?
yep
@cmcnicholas same problem, has the problem been solved?
Any luck yet? really need to see the build times :)
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
@stephencookdev Maybe we can add this to Readme.md or to examples dir? Happy to contribute
Nice one @vpiskunov - yeah a entry in the examples dir would be amazing. Happy to accept PRs for that :slightly_smiling_face:
@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: https://github.com/jantimon/html-webpack-plugin/issues/875 https://github.com/GoogleChromeLabs/preload-webpack-plugin/issues/86
Let me know what you think.
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
@vpiskunov I followed your configuration but gave an error
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.
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) }
...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.
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({})
}
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()
}
}
If you use
vue-cli3
, usechainWebpack
invue.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
If you use
vue-cli3
, usechainWebpack
invue.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
If you use
vue-cli3
, usechainWebpack
invue.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.
https://github.com/vuejs/vue-cli/issues/6091#issuecomment-738536334