1, install
NPM install -- save-dev webpack-bundle-analyzer
2, configure
vue.config.js
// 引入分析包文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 开发生产共同配置
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerHost: '127.0.0.1',
analyzerPort: 8888,
reportFilename: 'report.html',
defaultSizes: 'parsed',
openAnalyzer: true,
generateStatsFile: false,
statsFilename: 'stats.json',
statsOptions: null,
logLevel: 'info'
})
)
3, add
to scripts in package.json file
"analyz": "NODE_ENV=production npm_config_report=true npm run build"
4, just run, he will automatically open the analysis page
Read More:
- Xcode Error: Embedded binary’s bundle identifier is not prefixed with the parent app’s bundle identifier
- Webpack Upgrade Error: webpack.NamedModulesPlugin is not a constructor
- Vue init webpack command error Vue cli / node_ modules/_ [email protected]@rimraf/rimraf.js :313
- Solution to Vue cli · failed to download repo vuejs templates/webpack: connect etimeout followed by an IP digital error message
- When starting Vue project: cannot find module ‘webpack cli/bin/config yargs’ error [How to Fix]
- VUE Error: Cannot find module ‘webpack/bin/config-yargs’
- Has HTML webpack plugin been installed, or error: cannot find module ‘HTML webpack plugin’
- NPX webpack cannot find module’html webpack plugin’a bug causes headache
- Vue picture path, webpack error resolution after packaging
- Python uses cxfree to package script files into executable programs
- Run webpack error: Error: Cannot find module’webpack/lib/node/NodeTemplatePlugin’
- Use jstack to output the stack information in Java process to the specified file and analyze it
- Android can’t transfer value when using extras, bundle and intent
- Vue cli · failed to download repo vuejs templates / webpack: read econnreset
- Failed to download package files error after re installing Ubuntu
- Idea Maven project uses package to package and report error (package does not exist)
- Vue3 uses element plus package to solve the problem of occasionally disordered code on the icon after it goes online
- How to analyze and solve Android anr
- Webpack encountered a variety of problems to solve
- Failed to load bundle…Unable to resolve module `xxx` from xxx: Module `xx` does not exist