实操creart-react-app 内置webpack 优化篇实际操作creart-react-app webpac

creart-react-app webpack 优化（内置"webpack": "4.44.2"）

一，在cra创建的项目内首先用

npm run eject 把webpack配置都暴露出来

优化前速度（180.54s）如图

注：改变都在webpack.config.js内

1. Gzip

开启Gzip后，大大提高用户的页面加载速度compression-webpack-plugin

yarn add compression-webpack-plugin -D

踩坑记录

再次打包报错：

原因： compression-webpack-plugin版本过高导致，降级到6.0.0可用

配置目录：

配置

优化后打包速度为 87.13s

2. webpack-bundle-analyzer 直观查看各个模块的大小，为优化指向

yarn add webpack-bundle-analyzer -D

具体内容：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

同样在plugin内添加

new BundleAnalyzerPlugin(),

之后运行build后，会展示各个模块占用，（个人认为着重优化的时候可以看看，否则不需要安装）

3. 小图片更改为base64 好处为可以减少用户的http网络请求次数，提高用户的体验

在rules内配置

{
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
              loader: require.resolve('url-loader'),
              options: {
                limit: imageInlineSizeLimit,
                name: 'static/media/[name].[hash:8].[ext]'
              }
            },

结果在网站内为小图片展示为base64链接

4. tree-shaking 在webpakc5内已经自动开启

5.css-minimizer-webpack-plugin, CSS代码压缩使用`css-minimizer-webpack-plugin`，效果包括压缩、去重

yarn add css-minimizer-webpack-plugin -D

具体配置

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

在

内配置

new CssMinimizerPlugin()

踩坑：

直接安装还是报错，版本降级为：1.0.0

优化后的用时

6.cra貌似已经内置了thread-loader相关效果，优化后效果不明显

7，一些优化在creart-react-app 内的webpack内已经体现，感兴趣的可以去看，比如热更新，区分环境，js压缩代码terser-webpack-plugin，等等

如果项目是cra创建的，按照步骤试一试，惊喜等你咯

实操creart-react-app 内置webpack 优化篇

creart-react-app webpack 优化 （内置"webpack": "4.44.2"）