uniapp打包微信小程序，包过大解决

微信小程序每个分包的大小是2M，总体积一共不能超过20M。

字节小程序每个分包的大小是2M，总体积一共不能超过16M（字节小程序基础库 1.88.0 及以上版本开始支持，字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）。

1.采用分包 subPackages

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

//
"mp-weixin" : {
"appid" : "xxxx",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true,
"permission" : {
"" : {
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
}
},
"plugins" : {},
//分包的js文件将不会再打包到主包的中
"optimization":{"subPackages":true}
},

2.优化过大

HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码

一般通过上述2步基本可以通过微信小程序上传的限制，但同样的代码，编译成抖音小程序却不可以。

注：运行模式下不压缩代码且含有sourcemap，体积较大；若要正式发布，请点击发行菜单进行发布。

在字节跳动小程序开发者工具中打开：unpackage\dist\build\mp-toutiao，并点击上传

3.其他方法

HBuilderX打包的本质是调用npm，因此vue的优化方法可以搬到uniapp优化上

1.使用compression-webpack-plugin开启生产环境gzip

1)$ npm i -D compression-webpack-plugin@1
2)（在根目录下，没有直接创建），并写入以下内容：




const CompressionWebpackPlugin = require('compression-webpack-plugin')  



const productionGzipExtensions = ['js', 'css']  



 



configureWebpack: {  



    plugins: [  



          new CompressionWebpackPlugin({  



            filename: '[path].gz[query]',  



            algorithm: 'gzip',  



            test: new RegExp('\\.('   ('|')   ')$'),//匹配文件名  



            threshold: 10240,//对10K以上的数据进行压缩  



            minRatio: 0.8,  



            deleteOriginalAssets:false,//是否删除源文件  



          })  



        ]}  



}

2.使用 webpackBundleAnalyzer，可以帮助分析文件大小。

它可以帮助分析中都有哪些 js 模块，哪些模块比较大，以便我们进一步优化代码
地址:/webpack-contrib/webpack-bundle-analyzer

1)$ npm install --save-dev webpack-bundle-analyzer
2)（在根目录下，没有直接创建），并写入以下内容：




pluginOptions: {  



    webpackBundleAnalyzer: {  



      openAnalyzer: .NODE_ENV === 'production'  



    }  



  },

编译后，会同时带一份报告，可查看 stat, parsed, gzip 三种状态的文件大小。

4.内部数据优化

在项目中使用比较大的图片放到服务器进行加载。中等大小(公共)的图片--可以使用一个分包进行储存.，其他的图片根据需求放在不同的包...

import paint from '@/pagesE/static/home/';

一、处理JS和vue中的图片引用





// static全局属性



Vue.prototype.staticDir = '../../static';      // 改成自己的相对路径或者绝对路径




// #ifdef MP-WEIXIN



Vue.prototype.staticDir = '/h5/static';  




// #endif



Vue.prototype.getStaticFilePath = function (url) {  



    return Vue.prototype.staticDir + url;  



};





<view class="test">




    <image :src="getStaticFilePath('/images/index/')"></image>





</view>

二、处理css中的图片引用

1、定义scss全局变量





// 在的最后添加 有bug，并不支持条件编译，所以我们打包小程序得手动修改这个文件。




/* static资源路径 */




$uni-static-dir: "~@/static/";




/*  #ifdef MP-WEIXIN */




$uni-static-dir: "/h5/static/";




/*  #endif */

2、css文件改名成scss文件





<style lang="scss">




    @import "./";




</style>

3、替换css中的图片地址





.lefticon {



    width: 58rpx;



    height: 58rpx;



    background-image: url($uni-static-dir+"/imags/settings/");



    background-size: cover;



}

秒客网