ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

webpack-bundle-analyzer 可视化分析包插件

2021-09-22 11:35:43  阅读:25  来源: 互联网

标签:npm 插件 BundleAnalyzerPlugin bundle webpack analyzer null


安装

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

配置

webpack.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()  // 使用默认配置
    // 默认配置的具体配置项
    // new BundleAnalyzerPlugin({
    //   analyzerMode: 'server',
    //   analyzerHost: '127.0.0.1',
    //   analyzerPort: '8888',
    //   reportFilename: 'report.html',
    //   defaultSizes: 'parsed',
    //   openAnalyzer: true,
    //   generateStatsFile: false,
    //   statsFilename: 'stats.json',
    //   statsOptions: null,
    //   excludeAssets: null,
    //   logLevel: info
    // })
  ]
}

package.json中的script中补上:

    "analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"

运行

npm run analyze

效果:

 

标签:npm,插件,BundleAnalyzerPlugin,bundle,webpack,analyzer,null
来源: https://www.cnblogs.com/liangtao999/p/15319211.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有