C/C++教程

webpack-bundle-analyzer

本文主要是介绍webpack-bundle-analyzer，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

  webpack-bundle-analyzer 是一个打包文件分析工具，主要作用是可以直观分析打包出的文件包含哪些，大小占比如何，压缩后的大小等等。

一、安装插件
  npm install webpack-bundle-analyzer --D
二、配置 vue.config.js 文件
  const { resolve } = require('path');

  module.exports = {
    ....其它的配置
    chainWebpack: (config) => {
      if (process.env.NODE_ENV === 'production') {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
      }
    },
  }
  • 如果想在运行项目时就出现，则可以把 环境变量 的判断注释掉
  • 打开的默认端口号是：8888
效果
这篇关于webpack-bundle-analyzer的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航