防止由“分裂”共享代码复制到单独的文件中

假设你有文件和多个条目每一个需要jquery。在这种情况下,每一个输出文件将包含jQuery,使你的文件比必要的。为了解决这个问题,你可以问webpack来分析您的文件和分裂附加文件,它将包含“共享”的代码。

为此,电话splitEntryChunks ():

1 2 3 4 5 6 7 8 9 10 11

/ / webpack.config。js安可/ /……/ /多个输入文件,可能进口相同的代码.addEntry(“应用程序”,“。/资产/ app.js”) .addEntry(“首页”,“。/资产/ homepage.js”) .addEntry(“博客”,“。/资产/ blog.js”) .addEntry(“储存”,“。/资产/ store.js”)+ .splitEntryChunks ()

现在,每个输出文件(如。homepage.js)可能被分成多个文件(如。homepage.js&vendors-node_modules_jquery_dist_jquery_js.js——第二的文件名会不那么明显当你构建生产)。这意味着你可能需要包括多个脚本标签(或链接标签的CSS)在你的模板。安可创建一个entrypoints.json文件列出哪些CSS和JavaScript文件,需要为每一个条目。

如果你使用encore_entry_link_tags ()和encore_entry_script_tags ()树枝从WebpackEncoreBundle功能,你不需要做什么!这些函数自动读取这个文件,使尽可能多的脚本或链接根据需要标签:

1 2 3 4 5 6 7

{#现在可能呈现多个脚本标记:< script src = " /构建/运行时。js "推迟> < /脚本> < script src = " /构建/ vendors-node_modules_jquery_dist_jquery_js。js "推迟> < /脚本> < script src = " /构建/主页。js "推迟> < /脚本> #}{{encore_entry_script_tags(主页)}}

1 2 3 4 5 6 7 8 9

/ / webpack.config。js安可/ /……。splitEntryChunks ()+ .configureSplitChunks(函数(splitChunks) {+ / /更改配置+ splitChunks。minSize = 0;+})