Mpvue小程序开发用webpack 编译后文件超过2M解决方法

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

问题描述：

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

解决办法：

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

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

拆分 vendor 具体步骤

1.对 vendor 进行拆包

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//原配置 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'] }),

修改为：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

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,说明已经拆分成功

*以上是前人的配置   但是我把name:"common/webim"  chunkss:"common/webim"  他已经在打包后的文件引入了打包文件webim

所以就没有往下进行了   

 

把原文贴出来  

https://fe-home.github.io/2018/08/24/MpVue%E6%89%93%E5%8C%85vendor%E8%BF%87%E5%A4%A7%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95/