vue分析打包文件大小工具

浅沫记忆

目的
通过vue打包的应用，有的时候前端访问比较慢，查看网络情况，好几秒的请求时间，影响体验，可以通过webpack-bundle-analyzer来生产html，直观看到哪些依赖占用较大
步骤

1. 安装包

install webpack-bundle-analyzer

2. package.json修改下build脚本,添加--report

"scripts": {
  "serve": "node_modules/.bin/vue-cli-service.cmd serve ",
  "build": "vue-cli-service.cmd build --report",

3. webpack.config.js（项目根路径下）引入

BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
module.exports = {
    plugins: [
    new BundleAnalyzerPlugin()
    ]
}

4. build生成

run build

5. 查看dist/report.html

</div>
    
    <div id="asideoffset"></div>