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, 小程序开发者工具顺利完成打包工作。此方法治标不治本，最好的方法还是删库，删需求，小程序提倡简洁，如果功能太多，拆成两个小程序就好，肯德基的小程序就是这么做的。

mpvue是一个类vue的小程序框架，帮助开发者提高效率，增加开发体验，开发者只需要熟悉vue的api语法使用即可上手。官方还提供了了基于@vue/cli脚手架的快速开发方式。执行

*** 作以上步骤即可初始化一个mpvue的初始化项目。这样mpvue的入门就完成了。

mpvue除了支持vue的生命周期钩子函数，还闹雹亩支持小程序的肆行生命周期钩子函数，官方建议 除特殊情况外，不建议使用小程序的生命周期钩子。

1. 如何获取小程序在 page onLoad 时候传递的 options

在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。

2. 如何获取小程序在液森 app onLaunch/onShow 时候传递的 options

在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。

3. 如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：

以下使用mpvue创建一个小程序

执行npm run dev 后可以看到生成 dist/wx的路径，将生成的文件目录导入小程序开发工具即可。

这样就搭建好了一个基本的mpvue小程序, 可以基于以上创建我们自己的项目。具体内容查看 github ，附上一张首页图

---