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

MpVue打包vendor过大问题解决办法问题描述：mpvue 打包的小程序会自动将重复引用打包到 static -> js -> vendor, 当引用的第三方库过多时，vendor 就会超出 500K ，小程序开发者工具有 500k 限制，大于 500k 的包不进行转码和压缩，此时就可能导致预览失败，文件体积超过 2M 限制解决办法：1、减少不必要第三方库的使用..

义薄云天王延棋

2897人浏览 · 2018-12-28 11:25:20

义薄云天王延棋 · 2018-12-28 11:25:20 发布

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
修改如下配置

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

*以上是前人的配置但是我把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/

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^