webpack+react+antd脚手架性能优化实战

"这篇文章主要探讨了如何优化基于webpack、react和antd的脚手架，旨在提升项目的构建效率和性能。作者分享了一些实用的优化策略，包括样式分离、第三方库分离、环境配置、热更新和公共代码提取等关键点。" 在优化webpack+react+antd的脚手架时，我们可以关注以下几个方面： 1. 样式分离： 为了提高页面加载速度，可以使用`extract-text-webpack-plugin`将CSS、LESS和SASS文件从JS文件中分离出来，单独打包成静态资源。这样可以在不阻塞JavaScript执行的情况下加载样式。在`webpack.config.js`中配置相应的规则，如针对不同类型的样式文件设置不同的加载器，并通过`exclude`排除`node_modules`中的文件，避免处理第三方库的样式。 2. 第三方资源分离： 将第三方库单独打包，以减少主应用包的大小。这可以通过设置`externals`属性实现，让它们从CDN加载，或者通过`splitChunks`插件来分离出一个单独的chunk，只在初次加载时请求。 3. 区分开发环境与生产环境： 配置不同的环境变量，例如通过`webpack.DefinePlugin`设置`process.env.NODE_ENV`，使得在开发环境中启用热更新和source map，而在生产环境中进行压缩和优化。 4. 热更新(Hot Module Replacement, HMR)： 启用HMR可以实现在不刷新整个页面的情况下更新模块，提升开发效率。通过设置`hot: true`在开发服务器配置中，以及在入口文件中引入`webpack/hot/dev-server`和`webpack-hot-middleware/client`，可以实现HMR功能。 5. 提取公共代码： 使用`optimization.splitChunks`配置，可以提取多个entry之间的共享模块，形成公共chunk，减少重复加载，提升首屏加载速度。例如，可以设置`maxInitialRequests`限制初始加载的chunk数量，`minSize`定义合并到公共chunk的最小大小。 6. 其他优化策略： - 利用`UglifyJsPlugin`或`TerserPlugin`进行代码压缩，减少文件体积。 - 使用`HtmlWebpackPlugin`自动注入打包后的JS和CSS到HTML模板中。 - 开启tree shaking，通过设置`module.rules`中的`sideEffects`属性，告知webpack哪些模块是纯函数，可以安全删除未使用的代码。 - 利用`mini-css-extract-plugin`替代`extract-text-webpack-plugin`，以支持CSS Modules和更好的兼容性。 以上就是对webpack+react+antd脚手架进行优化的一些常见方法，通过这些策略，可以显著提高项目构建的速度和运行时的性能，同时提供更好的开发体验。在实际应用中，应根据项目需求和特点选择合适的优化方案。