webpack打包流程 面试vue和react（umi）⼯程中使⽤webpack-bundle-analyzer分析打包⽂件vue⼯程
1. 下载依赖
npm install webpack-bundle-analyzer -D
2.配置⽂件fig.js，根⽬录下创建和src同级
// fig.js
const{ BundleAnalyzerPlugin }=require('webpack-bundle-analyzer');
......
......
......
configureWebpack:{
plugins:[
new BundleAnalyzerPlugin()
]
}
}
3.执⾏打包命令，后⾯添加–report指令（见vue-cli官⽹）
yarn build --report
react(umi)⼯程
1.下载依赖
yarn add umi-webpack-bundle-analyzer
2.配置⽂件在config/config.ts或者umirc.ts下
import{ defineConfig }from'umi';
export default defineConfig({
.......
.......
.......
analyze:{
analyzerMode:'server',
analyzerPort:8888,
openAnalyzer:true,
generateStatsFile:false,
statsFilename:'stats.json',
logLevel:'info',
defaultSizes:'parsed',
}
})
3.配置打包命令(见官⽹)
"analyze":"cross-env ANALYZE=1 umi build"
yarn analyze

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。