webpack——通过webpack-bundle-analyzer分析项目包占比情况

前言

npm: webpack-bundle-analyzer github:webpack-bundle-analyzer

内容

安装

代码语言：javascript复制

npm i -D webpack-bundle-analyzer

配置

主要涉及两个文件webpack.config.js和package.json

webpack.config.js

代码语言：javascript复制

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
 plugins: [
        new BundleAnalyzerPlugin({
            analyzerMode: 'disabled',
            generateStatsFile: true,
        }),
    ],
}

package.json

代码语言：javascript复制

{
 "scripts": {
    "analyz": "webpack --profile --json > stats.json && webpack-bundle-analyzer --port 9090 ./dist/stats.json"
  },
}

测试

运行命令

代码语言：javascript复制

npm run analyz

查看结果

配置 analyzer webpack bundle 测试

1 人点赞