Build optimization: what did it consist of? What other approaches do you know for optimizing bundle size?

Build optimization (bundling) involves reducing the size of the final file with code and resources, which speeds up loading and improves application performance.

The main approaches I used:

• Code splitting: dividing code into parts that load as needed.
• Minification and compression: removing spaces, comments, shortening variable names, and gzip compression on the server.
• Removing unused code (tree shaking): excluding imported but unused modules from the bundle.
• Using CDN: for loading popular libraries to avoid including them in the bundle.
• Image and resource optimization: compression and using modern formats.

Example of Webpack configuration for code splitting:

module.exports = {
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

It is also important to analyze the bundle using tools (e.g., webpack-bundle-analyzer) to identify "heavy" modules and optimize their usage.