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/

 

 

你可能感兴趣的:(vue,vendor.js)