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

相关推荐
難釋懷12 小时前
TypeScript-webpack
javascript·webpack·typescript
ModyQyW15 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
ᥬ 小月亮17 小时前
webpack基础
前端·webpack
abigale031 天前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
耶啵奶膘1 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳1 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1211 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序