javascript - Webpack 4 迁移 CommonsChunkPlugin

Question

我需要帮助将以下代码从 webpack 3 迁移到 4。

new webpack.optimize.CommonsChunkPlugin({
    minChunks: module => module.context && module.context.indexOf("node_modules") !== -1,
    name: "vendor",
    chunks: ["main"]
})

我有两个入口文件，并且只希望第一个入口文件的依赖项包含在 vendor block 中。第二个条目的依赖项应该全部保留在它自己的包中。

Answer 1

As of webpack v4 the CommonsChunkPlugin is deprecated.

We have deprecated and removed CommonsChunkPlugin, and have replaced it with a set of defaults and easily overridable API called optimization.splitChunks.

webpack.optimize.CommonsChunkPlugin has been removed, 
please use config.optimization.splitChunks instead.

---

已弃用

您不再需要使用这些插件:

DedupePlugin has been removed too in v4

NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors(在生产模式下默认开启)ModuleConcatenationPlugin -> optimization.concatenateModules(在生产模式下默认开启)NamedModulesPlugin -> optimization.namedModules(在开发模式下默认开启)

---

webpack 4 推荐

使用 mini-css-extract-plugin 而不是 text-extract-plugin。使用 webpack-bundle-analyzer以图形方式分析您的捆绑输出。

入口脚本是您应用程序的真正“入口脚本”，不要将 vendor 文件显式添加到 webpack.config.js 中的 entry:。SPA 应用程序只有一个入口点，而经典 ASP.NET MVC 应用程序等多页面应用程序则有多个入口点。 Webpack 将从您的入口脚本构建一个依赖关系图，并为您的应用程序生成优化的包。

如果你想从旧的 webpack 版本迁移，最好检查 migration guide

Tree shaking(死代码消除)仅在生产模式下启用。

---

Webpack 4，捆绑 Assets 的新方式

(你必须从头脑中移除你的 CommonsChunkPlugin 思维)

!!! Meanwhile the webpack doc has been updated,a section SplitChunks was added !!!

It follows a new philosophy :

Webpack 4 现在默认自动进行优化。它会根据以下条件分析您的依赖关系图并创建最佳 bundle (输出):

1. New chunk can be shared OR modules are from the node_modules folder
2. New chunk would be bigger than 30kb (before min+gz)
3. Maximum number of parallel request when loading chunks on demand <= 5
4. Maximum number of parallel request at initial page load <= 3

所有这些都可以使用 SplitChunksPlugin 进行调整! ( see SplitChunksPlugin documentation )

A more detailed explanation关于如何使用新的 optimization.splitChunks API。

---

CommonsChunkPlugin 被移除，因为它有很多问题:

• 这会导致下载的代码多于所需。
• 它在异步 block 上效率低下。
• 很难使用。
• 实现很难理解。

---

SplitChunksPlugin 也有一些很棒的属性:

• 它从不下载不需要的模块(只要你不通过名称强制合并 block )
• 它在异步 block 上也能高效工作
• 它默认为异步 block 打开
• 它处理多个 vendor block 的 vendor 拆分
• 使用起来更方便
• 它不依赖于 block 图黑客
• 大部分是自动的

--> Source

---

关于您的问题，您希望将 entry1 和 entry2 的所有部门拆分为单独的包。

      optimization: {
        splitChunks: {
          cacheGroups: {   
            "entry1-bundle": {
              test: /.../,   // <-- use the test property to specify which deps go here
              chunks: "all",
              name: "entry1-bundle",
 /** Ignore minimum size, minimum chunks and maximum requests and always create chunks for this cache group */
              enforce: true,
              priority: ..  // use the priority, to tell where a shared dep should go
            },
            "entry2-bundle": {
              test: /..../, // <-- use the test property to specify which deps go here
              chunks: "all",
              name: "entry2-bundle",
              enforce: true,
              priority: ..
            }
          }
        }
      },

---

如果您不添加优化:splitChunks 条目 default setting如下:

splitChunks: {
  chunks: 'async',
  minSize: 30000,
  minRemainingSize: 0,
  maxSize: 0,
  minChunks: 1,
  maxAsyncRequests: 6,
  maxInitialRequests: 4,
  automaticNameDelimiter: '~',
  automaticNameMaxLength: 30,
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10
    },
    default: {
      minChunks: 2,
      priority: -20,
      reuseExistingChunk: true
    }
  }
}

您可以将 optimization.splitChunks.cacheGroups.default 设置为 false 以禁用default 缓存组，同样适用于vendors 缓存组!

这里还有一些其他的SplitChunks configuration examples有解释。

---

可以找到 SplitChunksOptions、 CachGroupOptions 和 Optimization 的最新接口(interface)实现 here .

下面的接口(interface)定义可能不是 100% 准确，但可以作为一个简单的概述:

SplitChunksOptions 界面

interface SplitChunksOptions {
    /** Select chunks for determining shared modules (defaults to \"async\", \"initial\" and \"all\" requires adding these chunks to the HTML) */
    chunks?: "initial" | "async" | "all" | ((chunk: compilation.Chunk) => boolean);
    /** Minimal size for the created chunk */
    minSize?: number;
    /** Minimum number of times a module has to be duplicated until it's considered for splitting */
    minChunks?: number;
    /** Maximum number of requests which are accepted for on-demand loading */
    maxAsyncRequests?: number;
    /** Maximum number of initial chunks which are accepted for an entry point */
    maxInitialRequests?: number;
    /** Give chunks created a name (chunks with equal name are merged) */
    name?: boolean | string | ((...args: any[]) => any);
    /** Assign modules to a cache group (modules from different cache groups are tried to keep in separate chunks) */
    cacheGroups?: false | string | ((...args: any[]) => any) | RegExp | { [key: string]: CacheGroupsOptions };
}

CacheGroupsOptions 接口(interface):

interface CacheGroupsOptions {
    /** Assign modules to a cache group */
    test?: ((...args: any[]) => boolean) | string | RegExp;
    /** Select chunks for determining cache group content (defaults to \"initial\", \"initial\" and \"all\" requires adding these chunks to the HTML) */
    chunks?: "initial" | "async" | "all" | ((chunk: compilation.Chunk) => boolean);
    /** Ignore minimum size, minimum chunks and maximum requests and always create chunks for this cache group */
    enforce?: boolean;
    /** Priority of this cache group */
    priority?: number;
    /** Minimal size for the created chunk */
    minSize?: number;
    /** Minimum number of times a module has to be duplicated until it's considered for splitting */
    minChunks?: number;
    /** Maximum number of requests which are accepted for on-demand loading */
    maxAsyncRequests?: number;
    /** Maximum number of initial chunks which are accepted for an entry point */
    maxInitialRequests?: number;
    /** Try to reuse existing chunk (with name) when it has matching modules */
    reuseExistingChunk?: boolean;
    /** Give chunks created a name (chunks with equal name are merged) */
    name?: boolean | string | ((...args: any[]) => any);
}

优化界面

interface Optimization {
    /**
     *  Modules are removed from chunks when they are already available in all parent chunk groups.
     *  This reduces asset size. Smaller assets also result in faster builds since less code generation has to be performed.
     */
    removeAvailableModules?: boolean;
    /** Empty chunks are removed. This reduces load in filesystem and results in faster builds. */
    removeEmptyChunks?: boolean;
    /** Equal chunks are merged. This results in less code generation and faster builds. */
    mergeDuplicateChunks?: boolean;
    /** Chunks which are subsets of other chunks are determined and flagged in a way that subsets don’t have to be loaded when the bigger chunk has been loaded. */
    flagIncludedChunks?: boolean;
    /** Give more often used ids smaller (shorter) values. */
    occurrenceOrder?: boolean;
    /** Determine exports for each module when possible. This information is used by other optimizations or code generation. I. e. to generate more efficient code for export * from. */
    providedExports?: boolean;
    /**
     *  Determine used exports for each module. This depends on optimization.providedExports. This information is used by other optimizations or code generation.
     *  I. e. exports are not generated for unused exports, export names are mangled to single char identifiers when all usages are compatible.
     *  DCE in minimizers will benefit from this and can remove unused exports.
     */
    usedExports?: boolean;
    /**
     *  Recognise the sideEffects flag in package.json or rules to eliminate modules. This depends on optimization.providedExports and optimization.usedExports.
     *  These dependencies have a cost, but eliminating modules has positive impact on performance because of less code generation. It depends on your codebase.
     *  Try it for possible performance wins.
     */
    sideEffects?: boolean;
    /** Tries to find segments of the module graph which can be safely concatenated into a single module. Depends on optimization.providedExports and optimization.usedExports. */
    concatenateModules?: boolean;
    /** Finds modules which are shared between chunk and splits them into separate chunks to reduce duplication or separate vendor modules from application modules. */
    splitChunks?: SplitChunksOptions | false;
    /** Create a separate chunk for the webpack runtime code and chunk hash maps. This chunk should be inlined into the HTML */
    runtimeChunk?: boolean | "single" | "multiple" | RuntimeChunkOptions;
    /** Avoid emitting assets when errors occur. */
    noEmitOnErrors?: boolean;
    /** Instead of numeric ids, give modules readable names for better debugging. */
    namedModules?: boolean;
    /** Instead of numeric ids, give chunks readable names for better debugging. */
    namedChunks?: boolean;
    /** Defines the process.env.NODE_ENV constant to a compile-time-constant value. This allows to remove development only code from code. */
    nodeEnv?: string | false;
    /** Use the minimizer (optimization.minimizer, by default uglify-js) to minimize output assets. */
    minimize?: boolean;
    /** Minimizer(s) to use for minimizing the output */
    minimizer?: Array<Plugin | Tapable.Plugin>;
    /** Generate records with relative paths to be able to move the context folder". */
    portableRecords?: boolean;
}
}