create-react-app 打包代碼優化

最近在寫react，遇到打包的問題，來總結一下，踩的坑(create-react-app），且已經已經運行npn run eject命令。

1.項目使用的版本

1. react:：16.8.6
2. react-dom：16.8.6
3. react-redux：7.1.0
4. webpack：4.29.6

2.此版本項目打包(build)時，開啓了soure-map,使總體的的項目變得很大，在config文件夾的webpack.config.js裏的第33行，去掉打包後文件夾裏的source-map文件

3.將第三方的庫、公共的庫打包到一塊，作緩存。配置以下

splitChunks: {
	chunks: "all",
	name: "vender",
	cacheGroups: {
		vender: {
		name: "vendor",
		test: /[\\/]node_modules[\\/]/,
		chunks: "all",
		priority: 10,
		enforce: true
	},
	react: {
		name: "react",
		test: (module) => /react|redux/.test(module.context),
		chunks: "initial",
		priority: 11,
		enforce: true
	},
	antd: {
		name: "antd",
		test: (module) => {
			return /ant/.test(module.context);
		},
		chunks: "initial",
		priority: 11,
		enforce: true
		},
		moment: {
			name: "moment",
			test: (module) => {
				return /moment/.test(module.context);
			},
			chunks: "initial",
			priority: 13,
			enforce: true
		}
	}

4.在nginx上開啓gzip

server{
 # 開啓gzip壓縮
  gzip on;
  gzip_buffers 32 4k;
  gzip_comp_level 6;
  gzip_min_length 200;
  gzip_types text/css text/xml application/javascript;
  gzip_vary on;
}

5.測試結果，在火狐上驗證結果，不得不說第三方庫真的太大了，不過在加載速度上大大提高，沒有配置以前，打出來的包2M多，經過gzip只有800kb多

以上是個人配置，歡迎來吐槽，相互學習啊，以爲不錯給個關注唄，大佬。