Optimizing JavaScript Performance with Code Splitting and Tree Shaking

{
  "title": "Optimizing JavaScript Performance with Code Splitting and Tree Shaking",
  "description": "Techniques for improving JavaScript application performance by implementing code splitting and tree shaking to reduce bundle sizes.",
  "category": "JavaScript Cursor Rules",
  "rules": [
    {
      "id": "js-code-splitting",
      "description": "Implement code splitting to divide your JavaScript code into smaller chunks that can be loaded on demand, reducing initial load times and improving performance.",
      "recommendation": "Use dynamic `import()` statements to load modules asynchronously where appropriate. For example:\n\n```javascript\nimport('./module').then(module => {\n  // Use the module\n}).catch(err => {\n  console.error('Failed to load module:', err);\n});\n```",
      "references": [
        "https://webpack.js.org/guides/code-splitting/",
        "https://reactjs.org/docs/code-splitting.html"
      ]
    },
    {
      "id": "js-tree-shaking",
      "description": "Utilize tree shaking to eliminate unused code from your JavaScript bundles, reducing their size and improving load times.",
      "recommendation": "Ensure your project uses ES6 module syntax (`import` and `export`) and configure your bundler to enable tree shaking. For example, in Webpack:\n\n```javascript\nmodule.exports = {\n  mode: 'production',\n  optimization: {\n    usedExports: true,\n  },\n  // ...rest of your configuration\n};\n```",
      "references": [
        "https://webpack.js.org/guides/tree-shaking/",
        "https://rollupjs.org/guide/en/#tree-shaking"
      ]
    },
    {
      "id": "js-side-effects",
      "description": "Mark modules that have side effects to prevent them from being incorrectly removed during tree shaking.",
      "recommendation": "In your `package.json`, add a `sideEffects` field to specify which files have side effects. For example:\n\n```json\n{\n  \"sideEffects\": [\n    \"*.css\",\n    \"*.scss\",\n    \"./src/someModule.js\"\n  ]\n}\n```",
      "references": [
        "https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free"
      ]
    },
    {
      "id": "js-bundle-analysis",
      "description": "Regularly analyze your JavaScript bundles to identify and remove unnecessary code, ensuring optimal performance.",
      "recommendation": "Use tools like Webpack Bundle Analyzer to visualize your bundle and identify areas for optimization. Install and configure it as follows:\n\n```bash\nnpm install --save-dev webpack-bundle-analyzer\n```\n\nIn your `webpack.config.js`:\n\n```javascript\nconst { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');\n\nmodule.exports = {\n  plugins: [\n    new BundleAnalyzerPlugin(),\n  ],\n  // ...rest of your configuration\n};\n```",
      "references": [
        "https://github.com/webpack-contrib/webpack-bundle-analyzer"
      ]
    },
    {
      "id": "js-lazy-loading",
      "description": "Implement lazy loading to defer the loading of non-essential resources until they are needed, improving initial load times.",
      "recommendation": "Use React's `React.lazy` and `Suspense` to load components lazily. For example:\n\n```javascript\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={<div>Loading...</div>}>\n      <LazyComponent />\n    </Suspense>\n  );\n}\n```",
      "references": [
        "https://reactjs.org/docs/code-splitting.html#reactlazy"
      ]
    }
  ]
}