本文詳細(xì)介紹了如何從零開(kāi)始搭建一個(gè) Typescript + React 開(kāi)發(fā)的腳手架偏瓤，包含如何添加 Redux 以及 React Router 的環(huán)境份乒。
本文代碼地址：ts-react-redux
建議將代碼拉下來(lái)之后恕汇，配合本文一起查看，效果更佳或辖。
代碼下載命令：git clone https://github.com/vettel-qin/ts-react-redux.git
相關(guān)文章目錄
從零開(kāi)始瘾英，一步一步搭建Typescript + React + Redux項(xiàng)目——?jiǎng)?chuàng)建項(xiàng)目結(jié)構(gòu)（一）
從零開(kāi)始，一步一步搭建Typescript + React + Redux項(xiàng)目——開(kāi)發(fā)環(huán)境配置（二）
從零開(kāi)始颂暇，一步一步搭建 Typescript + React + Redux項(xiàng)目——集成React（三）
從零開(kāi)始缺谴，一步一步搭建 Typescript + React + Redux項(xiàng)目——集成Redux（四）
從零開(kāi)始，一步一步搭建 Typescript + React + Redux項(xiàng)目——項(xiàng)目打包（五）
從零開(kāi)始耳鸯，一步一步搭建 Typescript + React + Redux項(xiàng)目——團(tuán)隊(duì)合作規(guī)范（六）
1湿蛔、打包命令
在package.json的script中添加打包命令build, 該命令引用我們的webpack.config.js配置文件
2、刪除打包文件
yarn add clean-webpack-plugin @types/clean-webpack-plugin -D
在tools/plugins.ts添加這個(gè)插件
3县爬、分離css文件
使用mini-css-extract-plugin進(jìn)行css代碼分離阳啥。首先安裝yarn add mini-css-extract-plugin @types/mini-css-extract-plugin -D
需要用mini-css-extract-plugin中的loader去替換掉style-loader
???4、使用optimization進(jìn)行第三方庫(kù)代碼分離
optimization是webpack4.x版本推出的配置項(xiàng)财喳，這個(gè)配置項(xiàng)的功能主要是進(jìn)行代碼壓縮察迟、優(yōu)化≌队現(xiàn)在用optimization對(duì)第三方庫(kù)進(jìn)行代碼分離，避免首屏加載的bundle文件或者按需加載的bundle文件體積過(guò)大扎瓶，從而導(dǎo)致加載時(shí)間過(guò)長(zhǎng)所踊。
??在webpack.config.ts中引用這個(gè)配置
5、對(duì)js\css代碼進(jìn)行壓縮和優(yōu)化
（1）概荷、使用uglifyjs-webpack-plugin對(duì)js壓縮優(yōu)化污筷，安裝yarn add uglifyjs-webpack-plugin @types/uglifyjs-webpack-plugin -D
??
（2）、使用optimize-css-assests-webpack-plugin進(jìn)行css代碼的壓縮乍赫，
安裝yarn add optimize-css-assets-webpack-plugin @types/optimize-css-assets-webpack-plugin -D
6瓣蛀、打包文件分析
使用webpack-bundle-analyzer可視化打包性能分析插件，安裝yarn add webpack-bundle-analyzer @types/webpack-bundle-analyzer -D
?然后在package.json中添加啟動(dòng)命令
"analyzer": "yarn run build --report"
文章及代碼中如有問(wèn)題雷厂，歡迎指正惋增，謝謝！
