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

相关推荐
软工的小白4 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
2501_916008896 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921436 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
NewChapter °7 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
vipbic7 小时前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack
SY_FC9 小时前
uniapp阿里云验证码使用
阿里云·uni-app·notepad++
—Qeyser10 小时前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_9160088910 小时前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
妮妮喔妮11 小时前
Webpack 有哪些特性?构建速度?如何优化?
前端·webpack·node.js
ST.J11 小时前
webpack笔记
前端·笔记·webpack