Closed chrisvfritz closed 6 years ago
@Akryum I think this feature is still probably necessary for CI artifacts, but I also wonder if it might be something that could be built into the UI. 😻
The plan for the first release of cli-ui is to have a custom view for serve
and build
with respectively the equivalent of webpack dashboard and webpack analyzer.
For the time being, we can customize webpack config in vue.config.js
and use webpack-bundle-analyzer
Make following changes to your vue.config.js
(make one parallel to package.json
if not already there)
// ...other requires here
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
// ...your other settings here
chainWebpack: config => {
// ...your other webpack config overrides here
if (process.env.NODE_ENV === "production")
config.plugin("webpack-report")
.use(BundleAnalyzerPlugin, [{
// ...webpack-bundle-analyzer options here
}]);
}
};
@pranavjindal999 This gives address in use
on all ports. Probably bacause of webpack configuration that interferes somehow.
I can only use it like this:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin(),
],
},
};
@manico you can use different port by configuring options
of webpack-bundle-analyzer
.use(BundleAnalyzerPlugin, [{
analyzerPort : 98989
}]);
or simply go for static file instead of server
.use(BundleAnalyzerPlugin, [{
analyzerMode: 'static'
}]);
No, I tried different ports. It seems that with mutating it does not work. My build command is for lib:
vue-cli-service build --target lib --name vizceral-vue src/index.js
Try the static
mode
It works, but it runs three times which is problem for server mode too because it tries listen three times (output for common, umd and umd.min). :D
Anyone knows how to use webpack-bundle-analyzer
in this case?
Repository: https://github.com/manico/vizceral-vue
Command: npm run build
Closed via 272ef5e2
"build": "vue-cli-service build --report"
✘ andy@andydeMacBook-Pro ~/Desktop/lenovo_rubiks_cube master ● yarn build
yarn run v1.7.0
$ vue-cli-service build --report
ERROR Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins= [
new BundleAnalyzerPlugin()
]
} else {
}
}
@zzlw did you upgrade the packages :D ? Also, you have to comment out that configureWebpack
with the bundle analyzer plugin.
I just tried it and it works
What problem does this feature solve?
There doesn't currently seem to be a way to generate a detailed build report, e.g. with webpack-bundle-analyzer.
What does the proposed API look like?
I think it'd be ideal if
vue-cli-service build --report
did that.