MpVue打包vendor过大问题解决办法_软件运维

webpack开发环境没进行UglifyJs压缩,所以解决的方法来了,引入UglifyJs插件

修改build目录下的webpack.dev.conf.js配置文件，前面添加插件的引入，

在插件列表最后加上一句话，即可完美解决

原文链接： https://blog.csdn.net/julywind1/article/details/92786236

通过测试，这个方法确实压缩了vendor的大小，但是可能会导致某些功能不可用，比如我的压缩后云信功能受了影响，所以具体用的时候大家需要慎重；如果这个方法不可以，建议用下面第二种方法

mpvue 打包的小程序会自动将重复引用打包到 static -> js -> vendor , 当引用的第三方库过多时， vendor 就会超出 500K ，小程序开发者工具有 500k 限制，大于 500k 的包不进行转码和压缩，此时就可能导致预览失败，文件体积超过 2M 限制

1、减少不必要第三方库的使用，或采用精简版的库，满足功能即可

2、拆分 vendor ，使每个 js 文件体积小于 500K 开发者工具进行一次压缩就可能低于 2M 了

本篇文章主要描述如何采用第二种方法

修改为：

需要注意的是拆分顺序不能乱， vendor 拆出来的模块才会到 webim , 如果 vendor 对所有模块的返回值都是 false，则 webim 也为空,经过摸索，我的理解是 webim 是对 vendor 进行了再拆分，所以需要拆分的模块一定要先经过 vendor 的筛选。

经过以上配置，你的 dist -> static -> js 下应该多了 webim.js ,说明已经拆分成功

此时试一下看是否能正常打包，我到这一步已经解决了我的问题，所以下面的两步就没做，如果你的没解决可以继续往下看

打包后的文件 dist -> pages 里的页面文件， .js 中默认引入以下模块

并没有刚才拆分出来的 webim 的引用，此时程序虽然打包成功，但是缺少模块无法运行

需要修改 node_modules 中 mpvue-loader -> lib -> mp-compiler -> templates.js

修改为：

注意：模板的引用顺序不能乱需要按照 webpack.dev.conf.js 中的配置从后往前引入。

使用 resolveLoader.modules 配置，webpack 将会从这些目录中搜索这些 loaders。不添加配置默认会在 node_modules 中查找，添加配置之后，会按照配置逐级查询，我的 mpvue-loader 就放在 src 下的 lib 中,详情可参考 webpack3.0之loader配置及编写

至此 vendor 的拆解工作完成， vendor 体积小于500K, 小程序开发者工具顺利完成打包工作。此方法治标不治本，最好的方法还是删库，删需求，小程序提倡简洁，如果功能太多，拆成两个小程序就好，肯德基的小程序就是这么做的。

这是因为tips未定义就调用，应该是少了某个文件。

出错提示已经指出vendor文件内的错误，可以点开看看具体出错的地方。这是第三方js文件，可能与小程序不兼容或者缺少引用。如果没有兼容版本，可以在前面定义一个tips看看。如果缺少引用的文件，应该都要包含进来。

第一步先把文件夹的那两个图片配置成一样的路径除了域名要改其他保持一致。

第二步把 Weixinpay 这个文件夹放在 \ThinkPHP\Library\Vendor 将Weixinpay文件夹放置到这个Vendor文件夹中

第三步把 WxJsAPIController.class.php 这个php文件 \Home\Controller 这里面

第四步把 WxJsAPI这个文件夹放置在 \Home\View 这个里面

第五步成功调用微信公众号支付功能

jsApiCall.html

<!DOCTYPE html>

<html>

<head>

<title>微信安全支付</title>

//调用微信JS api 支付

function jsApiCall()

{

WeixinJSBridge.invoke(

'getBrandWCPayRequest',

<?php echo $jsApiParameters?>,

function(res){

WeixinJSBridge.log(res.err_msg)

if(res.err_msg == "get_brand_wcpay_request:ok"){

//alert(res.err_code+res.err_desc+res.err_msg)

/*这里写如果支付成功的话执行什么 *** 作*/

}else{

//返回跳转到订单详情页面

alert(支付失败)

}

)

}

function callpay()

{

if (typeof WeixinJSBridge == "undefined"){

if( document.addEventListener ){

document.addEventListener('WeixinJSBridgeReady', jsApiCall, false)

}else if (document.attachEvent){

document.attachEvent('WeixinJSBridgeReady', jsApiCall)

document.attachEvent('onWeixinJSBridgeReady', jsApiCall)

}

}else{

jsApiCall()

}

</script>

</head>

<body>

</p>

</body>

</html>

WxJsAPIController.class.php

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

<?php

namespace Home\Controller

use Think\Controller

class WxJsAPIController extends Controller{

public function _initialize()

{

//引入WxPayPubHelper

vendor('Weixinpay.WxPayPubHelper')

}

public function jsApiCall()

{

//使用jsapi接口

$jsApi = new \JsApi_pub()

//=========步骤1：网页授权获取用户openid============

//通过code获得openid

if (!isset($_GET['code']))

{

//触发微信返回code码

$rUrl=urlencode(C('WxConfig.JS_API_CALL_URL').'/id/'.$_GET[id])

/*注意一下这个 id 是为了可以成功的传个 id值才这样写如果你不需要的话也可以直接写成

$rUrl=urlencode(C('WxConfig.JS_API_CALL_URL'))

$this->redirect('WxJsAPI/jsApiCall',array('id' =>55),0, '页面跳转中...')

我是这样穿这个id过来的值得你们也可以自己改成其他的来传这个id 或是删除他不要

$url = $jsApi->createOauthUrlForCode($rUrl)

// echo $urlexit()

Header("Location: $url")

}else

{

//获取code码，以获取openid

$code = $_GET['code']

$jsApi->setCode($code)

$openid = $jsApi->getOpenId()//openid 这里是为了获取用户当前的openid 如果你有做微信登陆的话就可以无视他。

}

//=========步骤2：使用统一支付接口，获取prepay_id============

//使用统一支付接口

$unifiedOrder = new \UnifiedOrder_pub()

/*此处做数据库的查询这里 *** 作数据库把产品信息显示出来*/

//设置统一支付接口参数

//设置必填参数

//appid已填,商户无需重复填写

//mch_id已填,商户无需重复填写

//noncestr已填,商户无需重复填写

//spbill_create_ip已填,商户无需重复填写

//sign已填,商户无需重复填写

$NOTIFY_URL="你的域名/index.php/Home/WxJsAPI/notify"

$unifiedOrder->setParameter("openid",$openid)//openid

$unifiedOrder->setParameter("body",'商品的名字')//商品描述

$unifiedOrder->setParameter("out_trade_no",'123456789')//商户订单号

$unifiedOrder->setParameter("total_fee",1*100)//总金额微信的钱1*100等于1

$unifiedOrder->setParameter("notify_url",$NOTIFY_URL)//通知地址

$unifiedOrder->setParameter("trade_type","JSAPI")//交易类型

//非必填参数，商户可根据实际情况选填

//$unifiedOrder->setParameter("sub_mch_id","XXXX")//子商户号

//$unifiedOrder->setParameter("device_info","XXXX")//设备号

//$unifiedOrder->setParameter("attach","XXXX")//附加数据

//$unifiedOrder->setParameter("time_start","XXXX")//交易起始时间

//$unifiedOrder->setParameter("time_expire","XXXX")//交易结束时间

//$unifiedOrder->setParameter("goods_tag","XXXX")//商品标记

//$unifiedOrder->setParameter("openid","XXXX")//用户标识

//$unifiedOrder->setParameter("product_id","XXXX")//商品ID

$prepay_id = $unifiedOrder->getPrepayId()

// echo $prepay_idexit()

//=========步骤3：使用jsapi调起支付============

$jsApi->setPrepayId($prepay_id)

$jsApiParameters = $jsApi->getParameters()

$WEB_HOST='你的域名'//填写的话如 <a rel="nofollow" href="http://nicaicai.imwork.net" target="_blank">http://nicaicai.imwork.net</a>最后面不用加 /

$this->assign('HOSTS',$WEB_HOST)

$this->assign('jsApiParameters',$jsApiParameters)

$this->display()

//echo $jsApiParameters

}

public function notify()

{

//使用通用通知接口

$notify = new \Notify_pub()

//存储微信的回调

$xml = $GLOBALS['HTTP_RAW_POST_DATA']

$notify->saveData($xml)

//验证签名，并回应微信。

//对后台通知交互时，如果微信收到商户的应答不是成功或超时，微信认为通知失败，

//微信会通过一定的策略（如30分钟共8次）定期重新发起通知，

//尽可能提高通知的成功率，但微信不保证通知最终能成功。

if($notify->checkSign() == FALSE){

$notify->setReturnParameter("return_code","FAIL")//返回状态码

$notify->setReturnParameter("return_msg","签名失败了啊")//返回信息

}else{

$notify->setReturnParameter("return_code","SUCCESS")//设置返回码

}

$returnXml = $notify->returnXml()

echo $returnXml

//==商户根据实际情况设置相应的处理流程，此处仅作举例=======

//以log文件形式记录回调信息

// $log_ = new Log_()

$log_name= ROOT."/Public/notify_url.log"//log文件路径

if($notify->checkSign() == TRUE)

{

if ($notify->data["return_code"] == "FAIL") {

//此处应该更新一下订单状态，商户自行增删 *** 作

log_result($log_name,"【通信出错】:\n".$xml."\n")

}

elseif($notify->data["result_code"] == "FAIL"){

//此处应该更新一下订单状态，商户自行增删 *** 作

log_result($log_name,"【业务出错】:\n".$xml."\n")

}

else{

/*查看支付成功的返回值请去 <a rel="nofollow" href="https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1" target="_blank">https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1</a>*/

$xmlss=$notify->data["out_trade_no"]//订单号

$total_fee=$notify->data['total_fee']//订单总金额，单位为分，详见支付金额

/*更新订单状态这里写数据库的 *** 作*/

//此处应该更新一下订单状态，商户自行增删 *** 作

log_result($log_name,"【支付成功】:\n".$xml."\n")

}

//商户自行增加处理流程,

//例如：更新订单状态

//例如：数据库 *** 作

//例如：推送支付完成信息

}

// 打印log

public function log_result($file,$word)

{

$fp = fopen($file,"a")

flock($fp, LOCK_EX)

fwrite($fp,"执行日期：".strftime("%Y-%m-%d-%H：%M：%S",time())."\n".$word."\n\n")

flock($fp, LOCK_UN)

fclose($fp)

}

希望我的回答可以帮到您哦

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/12147437.html

MpVue打包vendor过大问题解决办法

发表评论

评论列表（0条）