3 Ways to Optimize Your React Bundle With Webpack | by Jesse Langford | Feb, 2022

Webpack bundle analyzer, code-splitting, and extra

Webpack asset assortment
npm set up webpack-bundle-analyzer --save-devoryarn add webpack-bundle-analyzer -D
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
plugins: [
new BundleAnalyzerPlugin()
]
yarn add compression-webpack-plugin -Dornpm set up compression-webpack-plugin --save-dev
const CompressionPlugin = require("compression-webpack-plugin")plugins: 
[
...other plugins,
new
CompressionPlugin(
test: /.js(?.*)?$/i,
filename: "[path][query]",
algorithm: "gzip",
deleteOriginalAssets: false,
),
],

Wrapping Up

More Posts