方法一、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']
}),
修改为：
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']
}),
需要注意的是拆分顺序不能乱， 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')
并没有刚才拆分出来的 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}')
修改为：
//修改后
require('${prefix}static/js/manifest')
require('${prefix}static/js/webim')
require('${prefix}static/js/vendor')
require('${prefix}static/js/${name}')
注意：模板的引用顺序不能乱需要按照 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: [...此内容不变，故省略]
}
使用 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"
至此 vendor 的拆解工作完成，vendor 体积小于500K, 小程序开发者工具顺利完成打包工作。此方法治标不治本，最好的方法还是删库，删需求，小程序提倡简洁，如果功能太多，拆成两个小程序就好，肯德基的小程序就是这么做的。