JavaScript多文件打包场景下重复导入第三方库是否会重复加载及优化方案咨询

Great question—this depends entirely on how your bundler is configured, so let’s break it down step by step:

1. Will animejs be loaded twice by default? #

In most cases, yes—if you’re bundling each functionality file as a separate entry without configuring shared dependency extraction, your bundler (like Webpack, Rollup, etc.) will package the full animejs code into both functionality1.js and functionality2.js.

When you include both files on the same page, the browser will download both bundles, and animejs’s code will execute twice. While animejs might attach itself to the global scope, this is inefficient (wastes bandwidth) and could lead to unexpected behavior if the library isn’t designed to handle multiple initializations.

The only exception here is if you’re using native ES modules directly in the browser (without bundling animejs into your files). Browsers automatically cache module requests by URL, so if both files import animejs from the same path, the browser will only fetch it once.

2. How to avoid duplicate loading of animejs? #

Here are practical solutions for common bundlers:

For Webpack #

Use Webpack’s splitChunks optimization to extract shared dependencies into a separate bundle. Add this to your webpack.config.js:

module.exports = {
  // ... your existing entry/output config
  optimization: {
    splitChunks: {
      chunks: 'all', // Extracts shared code from all entry points
      name: 'vendors' // Name for the shared bundle (e.g., vendors.js)
    }
  }
};

Webpack will automatically create a vendors.js file containing animejs (and any other shared dependencies). You’ll need to include this bundle on your page before functionality1.js and functionality2.js—now animejs will only load once.

For Rollup #

You have two solid options:

• Option 1: Extract a shared vendor bundle
  First, create a separate config to bundle animejs into a standalone file:

  // rollup.vendor.config.js
  import resolve from '@rollup/plugin-node-resolve';
  import commonjs from '@rollup/plugin-commonjs';
  
  export default {
    input: 'node_modules/animejs/lib/anime.es.js',
    output: {
      file: 'dist/vendor/anime.js',
      format: 'umd',
      name: 'anime' // Expose anime as a global variable
    },
    plugins: [resolve(), commonjs()]
  };
  

  Then, mark animejs as an external dependency in your functionality bundles:

  // rollup.features.config.js
  import resolve from '@rollup/plugin-node-resolve';
  import commonjs from '@rollup/plugin-commonjs';
  
  export default [
    {
      input: 'src/functionality1.js',
      output: {
        file: 'dist/functionality1.js',
        format: 'umd',
        globals: { animejs: 'anime' } // Map import to global variable
      },
      external: ['animejs'], // Don't bundle animejs into this file
      plugins: [resolve(), commonjs()]
    },
    {
      input: 'src/functionality2.js',
      output: {
        file: 'dist/functionality2.js',
        format: 'umd',
        globals: { animejs: 'anime' }
      },
      external: ['animejs'],
      plugins: [resolve(), commonjs()]
    }
  ];
  

  Include anime.js on your page first, then the two functionality files—animejs will only load once.

• Option 2: Use Rollup’s code-splitting
  If you’re targeting modern browsers that support ES modules, you can use Rollup’s dynamic imports or manual chunking to split shared code into a separate bundle automatically.

For Browser Native ES Modules #

If you’re not bundling animejs into your files (e.g., importing it directly), just ensure both functionality files use the same import path:

// functionality1.js
import anime from './node_modules/animejs/lib/anime.es.js';
// ... rest of your code

// functionality2.js
import anime from './node_modules/animejs/lib/anime.es.js';
// ... rest of your code

The browser will cache the module after the first request, so it won’t re-download it for the second import.

内容的提问来源于stack exchange，提问作者Damien Letellier