使用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的分析结果

相关推荐
文心快码BaiduComate1 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
CHB4 小时前
uni-ai:让你的App快速接入AI
uni-app·deepseek
光影少年1 天前
webpack打包优化
webpack·掘金·金石计划·前端工程化
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview