通过 Webpack Encore “拆分” 共享代码，防止重复

假设您有多个入口文件，并且每个文件都需要 jquery。在这种情况下，每个输出文件都将包含 jQuery，这会使您的文件比必要的更大。为了解决这个问题，您可以要求 webpack 分析您的文件并将其拆分为额外的文件，这些文件将包含“共享”代码。

要启用此功能，请调用 splitEntryChunks()

1
2
3
4
5
6
7
8
9
10
11

// webpack.config.js
  Encore
      // ...

      // multiple entry files, which probably import the same code
      .addEntry('app', './assets/app.js')
      .addEntry('homepage', './assets/homepage.js')
      .addEntry('blog', './assets/blog.js')
      .addEntry('store', './assets/store.js')

+     .splitEntryChunks()

现在，每个输出文件（例如 homepage.js）可能会被拆分成多个文件（例如 homepage.js 和 vendors-node_modules_jquery_dist_jquery_js.js - 当您为生产环境构建时，第二个文件的文件名将不太明显）。这意味着您可能需要在模板中包含多个 script 标签（或 CSS 的 link 标签）。Encore 创建了一个 entrypoints.json 文件，其中列出了每个入口点所需的 CSS 和 JavaScript 文件。

如果您正在使用 WebpackEncoreBundle 中的 encore_entry_link_tags() 和 encore_entry_script_tags() Twig 函数，则无需执行任何其他操作！这些函数会自动读取此文件并根据需要渲染尽可能多的 script 或 link 标签

1
2
3
4
5
6
7

{#
    May now render multiple script tags:
        <script src="/build/runtime.js" defer></script>
        <script src="/build/vendors-node_modules_jquery_dist_jquery_js.js" defer></script>
        <script src="/build/homepage.js" defer></script>
#}
{{ encore_entry_script_tags('homepage') }}

1
2
3
4
5
6
7
8
9

// webpack.config.js
  Encore
      // ...

      .splitEntryChunks()
+     .configureSplitChunks(function(splitChunks) {
+         // change the configuration
+         splitChunks.minSize = 0;
+     })