Angular 5开发环境下如何排除部分模块参与重构建？

Hey there! Let’s figure out how to speed up your rebuilds by excluding those unused lazy-loaded modules. First, let’s clear up why your tsconfig.json exclude setting didn’t work:

exclude in tsconfig only tells the TypeScript compiler to ignore those files for type checking. Your bundler (like Webpack or Vite) still tracks and rebuilds these modules because they’re referenced via dynamic imports in your code.

So we need to tackle this at the bundler level instead. Here are solutions for the most common tools:

For Webpack Users #

• Use module.noParse: If your finished lazy modules don’t need further parsing (no unprocessed dependencies), tell Webpack to skip them entirely:

  module.exports = {
    module: {
      noParse: /path\/to\/lazy-module\/lazy\.module\.ts$/
    }
  };
  

• Leverage IgnorePlugin: This plugin tells Webpack to ignore specific import paths, so it won’t bundle or rebuild those modules:

  const webpack = require('webpack');
  
  module.exports = {
    plugins: [
      new webpack.IgnorePlugin({
        resourceRegExp: /path\/to\/lazy-module\/lazy\.module\.ts$/
      })
    ]
  };
  

• Conditional Dynamic Imports: Use environment variables to only load the modules you’re actively working on during development:

  // In your route/import code
  if (process.env.NODE_ENV === 'development') {
    // Only load your in-progress module
    import('./active-dev-module/active-dev.module.ts');
  } else {
    // Fallback to all modules for production
    import('./lazy-module/lazy.module.ts');
  }
  

For Vite Users #

• Optimize Deps Exclusion: Tell Vite to skip pre-building and rebuilding specific modules:

  export default defineConfig({
    optimizeDeps: {
      exclude: ['path/to/lazy-module/lazy.module.ts']
    }
  });
  

• Environment-Based Imports: Similar to Webpack, use Vite’s environment variables to control which modules load:

  import.meta.env.DEV 
    ? import('./active-dev-module/active-dev.module.ts')
    : import('./lazy-module/lazy.module.ts');
  

• Temporary Route Adjustment: If you’re using route-based lazy loading, swap out unused lazy imports for static imports of their already-built versions (e.g., copy the compiled chunk from your dist folder and import it directly):

  // Original lazy load (comment out temporarily)
  // const LazyModule = () => import('./lazy-module/lazy.module.ts');
  
  // Temporary static import of pre-built module
  import LazyModule from './lazy-module/dist/lazy-module.es.js';
  

Bonus Tips #

• Pre-Build Finished Modules: Bundle your completed lazy modules into standalone chunks once, then reference those pre-built files during development—this avoids rebuilding them every time.
• Verify Caching: Ensure your bundler’s cache is enabled (Webpack’s cache option, Vite’s default filesystem cache) to avoid rebuilding unchanged modules.

Just remember to revert these temporary changes once you’re done developing—you don’t want to accidentally ship incomplete code!

内容的提问来源于stack exchange，提问作者Alexander Shishov