前端性能分析优化

发表于

webpack-bundle-analyzer 分析SPA应用

安装

1
npm install --save-dev webpack-bundle-analyzer

使用

webpack

1
在webpack的plugins中配置： new BundleAnalyzerPlugin()

在package.json 中增加： “analyz”: “NODE_ENV=production npm_config_report=true npm run build”

npm run analyz 后会自动打开 http://127.0.0.1:8888/ 查监控监控

vue cli

在vue.config.js中添加

1
2
3
4
5
6
7
8
module.exports = {
  ....
  chainWebpack: (config) => {
    config.plugin('webpack-bundle-analyzer')
              .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
  }
.....
}

直接运行 vue-cli-service serve 后会直接打开 http://127.0.0.1:8888/ 查监控监控

观察各个部分的大小进行优化，或者找小体积的替代方案

tree-shaking