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

方法一、UglifyJs压缩�

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

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

var UglifyJsPlugin = require('uglifyjs-webpack-plugin')

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

new UglifyJsPlugin({ sourceMap: true })

原文链接：https://blog.csdn.net/julywind1/article/details/92786236
通过测试，这个方法确实压缩了vendor的大小，但是可能会导致某些功能不可用，比如我的压缩后云信功能受了影响，所以具体用的时候大家需要慎重；如果这个方法不可以，建议用下面第二种方法

方法二、拆分vendor

划重点：方法引用自MpVue打包vendor过大问题解决办法

问题描述：

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

解决办法：

1、减少不必要第三方库的使用，或采用精简版的库，满足功能即可
2、拆分 vendor ，使每个 js 文件体积小于 500K 开发者工具进行一次压缩就可能低于 2M 了

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

拆分 vendor 具体步骤")拆分 `vendor` 具体步骤

1.对 `vendor` 进行拆包

找到 build -> webpack.dev.conf.js, mpvue 的 npm run dev 使用的就是这份打包配置
找到 CommonsChunkPlugin, 这是 webpack 提供的拆包工具详解CommonsChunkPlugin
修改如下配置

//原配置
new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 minChunks: function (module, count) {
 // console.log(module.resource)
 // any required modules inside node_modules are extracted to vendor
 return (
 module.resource &&
 /\.js$/.test(module.resource) &&
 module.resource.indexOf('node_modules') >= 0
 )|| count > 1
 }
 }),
new webpack.optimize.CommonsChunkPlugin({
 name: 'manifest',
 chunks: ['vendor']
 }),
</pre>

修改为：

new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 minChunks: function (module, count) {
 // console.log(module.resource)
 // any required modules inside node_modules are extracted to vendor
 return (
 module.resource &&
 /\.js$/.test(module.resource) &&
 module.resource.indexOf('node_modules') >= 0
 )|| count > 1
 }
 }),

 //新增打包文件
 new webpack.optimize.CommonsChunkPlugin({
 name: 'webim', //新打包文件名
 chunks: ['vendor'], //拆分模块名
 minChunks: function (module, count) {
 console.log(module.resource + count)
 // 以下是拆分规则，返回true 则拆分，以下规则是将 libs 下的文件单独打包
 return (
 module.resource &&
 /\.js$/.test(module.resource) &&
 module.resource.indexOf('libs') >= 0 && 
 module.resource.indexOf('node_modules') === -1
 )
 }
 }),

//修改入口
new webpack.optimize.CommonsChunkPlugin({
 name: 'manifest',
 chunks: ['webim']
 }),
</pre>

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

经过以上配置，你的 dist -> static -> js 下应该多了 webim.js,说明已经拆分成功
此时试一下看是否能正常打包，我到这一步已经解决了我的问题，所以下面的两步就没做，如果你的没解决可以继续往下看

2. 修改 mpvue-loader 模板

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

require('../../../static/js/manifest')
require('../../../static/js/vendor')
require('../../../static/js/pages/caseAdvice/main')
</pre>

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

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

//源码
require('${prefix}static/js/manifest')
require('${prefix}static/js/vendor')
require('${prefix}static/js/${name}')
</pre>

修改为：

//修改后
require('${prefix}static/js/manifest')
require('${prefix}static/js/webim')
require('${prefix}static/js/vendor')
require('${prefix}static/js/${name}')
</pre>

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

3.修改了 node_modules 中的包，会导致团队 npm install 出来的结果不一致，所以需要把 mpvue-loader 单独拿出来迁移到项目里。为了 webpack 任然能使用 mpvue-loader 需要在 build -> webpack.base.conf.js 中添加 loader 查询路径配置")3.修改了 `node_modules` 中的包，会导致团队 npm install 出来的结果不一致，所以需要把 `mpvue-loader` 单独拿出来迁移到项目里。为了 webpack 任然能使用 mpvue-loader 需要在 `build` -> `webpack.base.conf.js` 中添加 loader 查询路径配置

resolveLoader: {
 modules: [
 'node_modules', //默认路径
 path.resolve("./src/lib") //添加的配置路径
 ]
},
module: {
 rules: [...此内容不变，故省略]
}
</pre>

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

4. 如果执行了第三步，请将 node_modules 中的 mpvue-loader 删除，并删除 package.json 中的 mpvue-loader，并添加 mpvue-loader 的运行依赖到当前项目 package.json 的开发依赖中，以下提供我的 mpvue-loader 的运行依赖")4. 如果执行了第三步，请将 `node_modules` 中的 `mpvue-loader` 删除，并删除 `package.json` 中的 `mpvue-loader`，并添加 `mpvue-loader` 的运行依赖到当前项目 `package.json` 的开发依赖中，以下提供我的 `mpvue-loader` 的运行依赖

"babelon": "^1.0.5",
"consolidate": "^0.14.0",
"hash-sum": "^1.0.2",
"js-beautify": "^1.6.14",
"loader-utils": "^1.1.0",
"lru-cache": "^4.1.1",
"postcss": "^6.0.6",
"postcss-load-config": "^1.1.0",
"postcss-selector-parser": "^2.0.0",
"resolve": "^1.3.3",
"source-map": "^0.5.6",
"vue-hot-reload-api": "^2.1.0",
"vue-loader": "^13.0.4",
"vue-style-loader": "^3.0.0",
"vue-template-es2015-compiler": "^1.5.3"
</pre>

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