webpack的可视化资源分析工具webpack-bundle-analyzer的使用

2019年9月15日 181次阅读 来源: 停停儿

随着项目越来约庞大，导致构建包的时候速度缓慢！

首先推荐使用wepback的可视化资源分析工具。以下给出webpack-bundle-analyzer配置【vue-cli构建项目时会自动配置好】

  • 安装webpack-bundle-analyzer
    控制台输入npm/cnpm install –save-dev webpack-bundle-analyzer

  • config/index.js文件中

    module.exports = {
  build: {
  ...
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
  ...
}

  • webpack生产环境中 build/webpack.prod.conf.js文件中

    ...
if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
...
  • 开始使用webpack-bundle-analyzer
    控制台输入cnpm run build –report
    等待构建完成后，在浏览器中输入localhost:8888打开分析结果，就可以开始分析啦。拉拉拉拉拉！开心.png
    浏览器打开分析结果，大概长这个样子哟

    《webpack的可视化资源分析工具webpack-bundle-analyzer的使用》

分析结果出来了，接下来就可以开始优化啦

    原文作者：停停儿
    原文地址: https://segmentfault.com/a/1190000016180784
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞