通过将共享代码“分割”到单独的文件来防止复制

假设您有多个输入文件和每一个需要jquery．在这种情况下，每一个输出文件将包含jQuery，使您的文件比必要的大得多。要解决这个问题，你可以让webpack分析你的文件和分裂它们被放入额外的文件中，这些文件将包含“共享”代码。

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

1 2 3 4 5 6 7 8 9 10 11

// webpack.config.js Encore //…//多个入口文件，它们可能导入相同的代码。addentry ('app'， './assets/app.js') . addentry('首页'，'./assets/home .js') . addentry ('blog'， './assets/blog.js') . addentry ('store'， './assets/store.js')+ .splitEntryChunks ()

现在，每个输出文件(例如。homepage.js）五月被分成多个文件(例如:homepage.js＆vendors-node_modules_jquery_dist_jquery_js.js第二个文件的文件名在你生产版本的时候会不太明显)。这意味着你五月需要包括多个脚本标签(或链接标签CSS)在你的模板。Encore创建entrypoints.json文件，该文件列出了每个条目所需的CSS和JavaScript文件。

如果你在用encore_entry_link_tags ()而且encore_entry_script_tags ()WebpackEncoreBundle中的枝条函数，你不需要做任何其他事情!这些函数自动读取该文件并呈现尽可能多的文件脚本或链接标签根据需要:

1 2 3 4 5 6 7

{#现在可以呈现多个脚本标签:   #}{{encore_entry_script_tags('主页')}}

1 2 3 4 5 6 7 8 9

// webpack.config.js Encore // ... .splitEntryChunks()+ .configureSplitChunks(函数(splitChunks) {+ //改变配置+ splitChunks。minSize = 0;+})