Code Splitting and Dynamic Imports

Code Splitting and Dynamic Imports

React applications often use code splitting to improve performance. This requires CSP policies that accommodate dynamically loaded scripts:

// webpack.config.js - Configure for code splitting with CSP
module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
    // Use 'strict-dynamic' compatible loading
    crossOriginLoading: 'anonymous'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10
        }
      }
    }
  }
};

// React component with dynamic import
const LazyComponent = React.lazy(() => 
  import(/* webpackChunkName: "lazy-component" */ './LazyComponent')
);

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

// CSP policy for dynamic imports
const cspPolicy = {
  'script-src': [
    "'self'",
    "'strict-dynamic'", // Allows dynamically loaded scripts
    `'nonce-${nonce}'`
  ]
};