webpack打包文件压缩处理 （三种模式）

## 打包文件1  方法1

使用方法：将所有node_modules里的东西放到venders~main.js的文件中，（react与antd分别配置缓存）尝试分离venders包

终端打包结果：压缩为1.92MiB；文件夹占用空间11.4MB，大小：11.0MB，包含文件205个， 打包后系统可以使用

 

 

 ## 打包文件2： 方法2

使用方法： 把所有node_modules里的东西都放到vendors~main.js的文件中去（通过拆分来减少venders文件的大小）

终端打包结果：压缩为2.19MiB；文件夹占用空间11.2MB，大小：10.8MB，包含文件204个， 打包后系统可以使用

 

 

 

 

### 打包文件3： 方法3

使用方法： 把所有node_modules里的东西都放到vendors~main.js的文件中去（原来的方法）

终端打包结果：压缩为2.25MiB；文件夹占用空间11.2MB，大小：10.8MB，包含文件204个， 打包后系统可以使用

 

 performance:{hints:false}, // 去掉文件太大警告提示

 

 

 

文件打包压缩处理1：

代码处理：optimization

'react-vendor': {
          test: module => {
            return (
              /react/.test(module.context) ||
              /redux/.test(module.context) ||
              /classnames/.test(module.context) ||
              /prop-types/.test(module.context)
            );
          },
          priority: -10,
          reuseExistingChunk: true,
          name: 'react',
        },
        'antd-vendor': {
          test: module => /antd?/.test(module.context),
          priority: -10,
          reuseExistingChunk: true,
          name: 'antd',
        },

文件打包压缩处理2：

代码处理：optimization

vendors: {
          name: 'vendors',
          test: /^.*node_modules[\\/](?!ag-grid-|lodash|wangeditor|react-virtualized|rc-select|rc-drawer|rc-time-picker|rc-tree|rc-table|rc-calendar|antd).*$/,
          priority: -10,
          chunks: 'all',
        },