uni-app开发小程序主包大小优化终极解决方案

原创已于 2024-02-06 23:08:27 修改 · 置顶 · 1.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #webpack #前端框架

于 2024-02-06 22:12:01 首次发布

本文介绍了如何通过subpackage-optimize插件对uni-app项目中的小程序主包进行体积优化，包括在vue.config.js中配置打包规则，使用UniPackageOptimization构造函数，以及在manifest.json中启用分包。同时提到了注意事项，如slot插槽处理和组件目录选择的要求。

简介

小程序主包体积优化终极解决方案，可将 uni-app 导出的小程序一级目录下的文件打入分包，从而减小主包体积。

使用

安装

在项目根目录下执行命令即可，安装 npm 包，

npm i subpackage-optimize

配置

1.在项目根目录下创建 vue.config.js 文件，已有此文件跳过即可

2.配置如下：

下方配置会把 components 目录下的子目录分别打包成分包

const UniPackageOptimization = require('subpackage-optimize');
const pro = process.env.NODE_ENV === 'production'; // 判断生产环境
module.exports = {
	configureWebpack: config => {
	    // 微信小程序打包优化
	    // 需要其他平台小程序打包优化增加判断就可以了
	    if(process.env.UNI_PLATFORM === "mp-weixin" && pro) {
	    	config.plugins.push(new UniPackageOptimization(['components'], []))
	    }
	}
}

UniPackageOptimization 构造函数说明

UniPackageOptimization 接收两个参数
第一个参数是打入分包的一级目录数组
第二个参数是不打入分包的一级目录下的目录数组，第二个参数可以为空数组

UniPackageOptimization 说明中指的目录都是编译后文件的目录

3.配置 manifest.json 文件

在对应平台的配置下添加"optimization":{“subPackages”:true}开启分包优化
目前只支持mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-kuaishou的分包优化
例如下列配置：

  "mp-weixin": {
    "appid": "",
    "usingComponents": true,
    "optimization": {
      // 开启分包优化
      "subPackages": true
    }
  },

官方文档

注意事项

1.如果被打入分包的组件中有 slot 插槽，请使用第二个参数将该组件目录从分包中剔除，否则可能会导致样式错乱，比如弹窗组件就不建议打入分包中
2.打入分包的目录下必须有 .vue 文件

npm地址
 github地址