Comments (19)
@vpiskunov I followed your configuration but gave an error
from speed-measure-webpack-plugin.
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
from speed-measure-webpack-plugin.
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()
}
}
from speed-measure-webpack-plugin.
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
from speed-measure-webpack-plugin.
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({})
}
from speed-measure-webpack-plugin.
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
from speed-measure-webpack-plugin.
@cmcnicholas is that output from running on Windows?
from speed-measure-webpack-plugin.
@cmcnicholas is that output from running on Windows?
yep
from speed-measure-webpack-plugin.
@cmcnicholas same problem, has the problem been solved?
from speed-measure-webpack-plugin.
Any luck yet? really need to see the build times :)
from speed-measure-webpack-plugin.
@stephencookdev Maybe we can add this to Readme.md or to examples dir? Happy to contribute
from speed-measure-webpack-plugin.
Nice one @vpiskunov - yeah a entry in the examples dir would be amazing. Happy to accept PRs for that 🙂
from speed-measure-webpack-plugin.
@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.
from speed-measure-webpack-plugin.
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
from speed-measure-webpack-plugin.
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.
from speed-measure-webpack-plugin.
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)
}
from speed-measure-webpack-plugin.
...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.
from speed-measure-webpack-plugin.
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
from speed-measure-webpack-plugin.
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.
from speed-measure-webpack-plugin.
Related Issues (20)
- When can webpack 5 be perfectly supported? HOT 10
- This plugin breaks the Fast Refresh HOT 4
- "PUBLIC_URL" no parse HOT 4
- Using SMP causes build failures to stop showing on subsequent builds (webpack watchdog)
- same issue
- ize reporting
- vue-loader was used without the corresponding plugin and You forgot to add 'mini-css-extract-plugin' plugin problem HOT 1
- It doesn't work with CRA. But I found a tweak ! HOT 1
- How to use in weex project?
- Is this repo still under maintenance? HOT 2
- Laravel mix compatible HOT 1
- Module build error when using style-loader
- how to use this plugin in vue-cli5??? HOT 1
- How to use it in vuepress1.8
- How can I use it in next12?
- "slower" and "faster" are inverted in the generated output
- hey, how can i use in taro 3 ? thanks HOT 1
- How can I understand the output?
- Using Proxy of 'compilation' break plugins relies on other Plugin HOT 2
- vue-loader was used without the corresponding plugin. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from speed-measure-webpack-plugin.