Webpack Bundle Analyzer包分析器
当我们需要分析打包文件dist里哪些资源可以进一步优化时,就可以使用包分析器插件webpack-bundle-analyzer。NPM上的介绍是 使用交互式可缩放树图可视化 webpack 输出文件的大小
前提环境
- vue 3.0.0
- @vue/cli 4.5.15
webpack-bundle-analyzer插件的安装
$ npm install --save-dev webpack-bundle-analyzer
查看bundle分析的几种方式
1. 第一种,运行完并开启本地服务查看
-
在 webpack.config.js 中找到 chainWebpack,加入以下配置,无需改动 package.json
module.exports = { chainWebpack: config => { // 配置包分析器 config.plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) } }
-
npm run serve
重新运行项目(运行指令具体看项目配置) -
浏览器会自动打开127.0.0.1:8888(我们手动输入localhost:8888也是可以的)
这种方式快速便捷,不会生成 stats.json 文件,但是只能看到每一个文件的 Stat size,而且运行完浏览器自动打开的不是项目本身
2. 第二种,构建完并开启本地服务查看
- 在 webpack.config.js 中找到 chainWebpack,加入以下配置
module.exports = { chainWebpack: config => { // 配置包分析器 config.plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) } }
- 在 package.json 中,找到 scripts,添加
"analyz": "NODE_ENV=production vue-cli-service build --mode production", 或 "analyz": "NODE_ENV=production npm run build",
npm run analyz
开始构建打包 发现报错了(此时npm run build
却是正常且浏览器也会自动打开127.0.0.1:8888),这是因为windows系统不能识别设置环境变量的指令,需要使用一个插件cross-envcross-env 是运行跨平台设置和使用环境变量的脚本,能够提供一个设置环境变量的 scripts,让你能够以 unix 方式设置环境变量,然后在 windows 上也能兼容运行** 3.1 安装 cross-env 插件
3.2 回到 package.json 中,找到 scripts,将刚才的 analyz 加上 cross-env 即可$ npm install cross-env --save-dev
3.3 继续执行"analyz": "cross-env NODE_ENV=production vue-cli-service build --mode production", 或 "analyz": "cross-env NODE_ENV=production npm run build",
npm run analyz
,浏览器会自动打开127.0.0.1:8888(我们手动输入localhost:8888也是可以的) 这种方式同样也不会生成 stats.json 文件,除此之外,还能看到每一个文件的 Stat size、Parsed size、Gzipped size三种格式的文件大小
3. 第三种,生成html文件
- 在 webpack.config.js 中引入BundleAnalyzerPlugin,并找到 configureWebpack,加入以下配置
// vue.config.js const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { configureWebpack: { plugins: [ // 配置包分析器 new BundleAnalyzerPlugin({ analyzerMode: 'static', // analyzerMode: 'server', // analyzerMode: 'disabled', // analyzerHost: '127.0.0.1', // analyzerPort: 8888, reportFilename: 'report.html', defaultSizes: 'gzip', generateStatsFile: true, // 如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成 openAnalyzer: false, // 默认在浏览器中自动打开报告 statsFilename: 'stats.json', // 如果generateStatsFile为true,将会生成Webpack Stats JSON文件的名字 statsOptions: { source: false } }) ] } }
- 在 package.json 中,找到 scripts,添加
"analyz": "cross-env NODE_ENV=production vue-cli-service build --mode production", 或 "analyz": "cross-env NODE_ENV=production npm run build",
npm run analyz
开始构建打包,完成后,我们发现在 dist 文件夹里生成了一个 report.html 文件与stats.json 文件- 双击打开 report.html 文件
这种方式会生成 stats.json 文件(很大,部署时需要移除),除此之外,还能看到每一个文件的 Stat size、Parsed size、Gzipped size三种格式的文件大小
优化
上述方式,要不自动打开浏览器,要不就自动在dist包里生成一个很大的stats.json 文件,怎么样才能使用包分析器的同时还不影响我们使用npm run serve
与npm run build
呢?
答案是创建一个环境文件
总结
通过使用这个webpack-bundle-analyzer包分析器可以看到项目各模块的大小,我们就可以按需优化了
转载自:https://juejin.cn/post/7028768162355085326