使用webpack-bundle-analyzer分析uni-app 的微信小程序包大小(HbuilderX运行)

1、找到vue.config.js 文件。如果找不到,则在项目根目录下(跟pages.json同一个目录下)创建一个JS文件,命名为vue.config.js

2、安装webpack-bundle-analyzer,官方网站:https://github.com/webpack-contrib/webpack-bundle-analyzer

(1)cd到项目根目录,运行命令行

ruby 复制代码
npm install --save-dev webpack-bundle-analyzer 

3、配置vue.config.js文件,添加如下配置代码到文件,保存。

代码如下:【注意】:直接使用copy官网到代码运行HbuilderX 会报错,需要再加一层 configureWebpack

python 复制代码
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: { //直接使用copy官网到代码运行HbuilderX 会报错,在这里加了一层 
                      //configureWebpack
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }
}

4、HbuilderX 运行程序(运行------运行到小程序模拟器------微信开发者工具)

运行后,浏览器会自动打开一个网页,该网页就是webpack-bundle-analyzer的分析结果

相关推荐
浩星11 小时前
uniapp运行鸿蒙报错整理
uni-app
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
xkxnq15 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷15 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯15 小时前
小程序自定义组件学习笔记
微信小程序
2501_9159184119 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
初出茅庐的21 小时前
uniapp - AI 聊天中的md组件
前端·vue.js·uni-app
Komorebi_999921 小时前
webpack相关
前端·webpack·node.js
xmdoor1 天前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
于慨1 天前
uniapp用webview导入本地网页,ios端打开页面空白问题
uni-app