Twilio reduce Flex Bundle Size

Develop a Symfony App Using Svelte and Webpack Encore to Manage Your Twilio Message History

• Talked about using webpack split chunk
• tools:
  • depcheck
  • npx unimported
    • Stack overflow post
  • webpack-bundle-analyzer
    • For Twilio, add the plugin addition to webpack.config.js as follows:

      config.module.rules = [
          ...config.module.rules,
          {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: "file-loader?name=assets/[name].[hash].[ext]",
          },
          {
            test: /\.mjs$/,
            type: "javascript/auto",
          },
        ];
        config.plugins = [
          ...config.plugins,
          new BundleAnalyzerPlugin()
        ]
      

      then run twilio flex:plugins:start. You will see the graph on a separate tab 127.0.0.1:8888 it may take a little bit of time for it to show.

    • How to use webpack-bundle-analyzer
  • Material UI minimize bundle size
  • Webpack Tree Shaking
    • Use TerserPlugin:

      const TerserPlugin = require('terser-webpack-plugin');
      
      module.exports = {
        // ...
        optimization: {
          minimize: true,
          minimizer: [
            new TerserPlugin({
              terserOptions: {
                compress: {
                  unused: true,
                  dead_code: true,
                },
              },
            }),
          ],
        },
      };
      

  • webpack-deadcode-plugin
  • Getting Started with Tree-shaking in webpack