从零开始，一步一步搭建Typescript+React+Redux项目——项目打包(五)

本文详细介绍了如何从零开始搭建一个 Typescript + React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。

本文代码地址：ts-react-redux

建议将代码拉下来之后，配合本文一起查看，效果更佳。

1、打包命令

在package.json的script中添加打包命令build, 该命令引用我们的webpack.config.js配置文件

2、删除打包文件

yarn add clean-webpack-plugin @types/clean-webpack-plugin -D

在tools/plugins.ts添加这个插件

3、分离css文件

使用mini-css-extract-plugin进行css代码分离。首先安装yarn add mini-css-extract-plugin @types/mini-css-extract-plugin -D

需要用mini-css-extract-plugin中的loader去替换掉style-loader

4、使用optimization进行第三方库代码分离

optimization是webpack4.x版本推出的配置项，这个配置项的功能主要是进行代码压缩、优化。现在用optimization对第三方库进行代码分离，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长。

在webpack.config.ts中引用这个配置

5、对js\css代码进行压缩和优化

（1）、使用uglifyjs-webpack-plugin对js压缩优化，安装yarn add uglifyjs-webpack-plugin @types/uglifyjs-webpack-plugin -D

（2）、使用optimize-css-assests-webpack-plugin进行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中添加启动命令

"analyzer": "yarn run build --report"

文章及代码中如有问题，欢迎指正，谢谢！

最后编辑于：2020.04.19 15:51:44