方法一、UglifyJs壓縮?

webpack開發(fā)環(huán)境沒進行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 ，小程序開發(fā)者工具有 500k 限制，大于 500k 的包不進行轉碼和壓縮，此時就可能導致預覽失敗，文件體積超過 2M 限制

解決辦法：

1、減少不必要第三方庫的使用，或采用精簡版的庫，滿足功能即可
2、拆分 vendor ，使每個 js 文件體積小于 500K 開發(fā)者工具進行一次壓縮就可能低于 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)
 // 以下是拆分規(guī)則，返回true 則拆分，以下規(guī)則是將 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,說明已經拆分成功
此時試一下看是否能正常打包，我到這一步已經解決了我的問題，所以下面的兩步就沒做，如果你的沒解決可以繼續(xù)往下看

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. 如果執(zhí)行了第三步，請將 node_modules 中的 mpvue-loader 刪除，并刪除 package.json 中的 mpvue-loader，并添加 mpvue-loader 的運行依賴到當前項目 package.json 的開發(fā)依賴中，以下提供我的 mpvue-loader 的運行依賴")4. 如果執(zhí)行了第三步，請將 node_modules 中的 mpvue-loader 刪除，并刪除 package.json 中的 mpvue-loader，并添加 mpvue-loader 的運行依賴到當前項目 package.json 的開發(fā)依賴中，以下提供我的 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, 小程序開發(fā)者工具順利完成打包工作。此方法治標不治本，最好的方法還是刪庫，刪需求，小程序提倡簡潔，如果功能太多，拆成兩個小程序就好，肯德基的小程序就是這么做的。