I’m new with webpack and I don’t understand at all why my webpack configuration is adding a delay mechanism at the end of the builded script, something like this:
var t = o.O(void 0, [4998], (() => o(5270)));
t = o.O(t)
In my html template called head-body.html injecting the generated script (only for development, since injecting it with html-inline-script breaks HMR.
<%
if (process.env.NODE_ENV === 'development') {
%>
<script src=<%= JSON.stringify(htmlWebpackPlugin.files.js.find(path => path.startsWith('/js/inlined_script.js'))) %>></script>
<%
}
%>
Something weird is if I add a script manually with the chunk-vendors.js before inlined_script.js seems it works perfectly and is loaded without delay.
In my entrypoints I have
{
...
javascript inlined_script: {
entry: `inlined/tier0.ts`,
template: 'public/head-body.html'
}
}
The chunks ordering is defined like this:
// Adding it with ordering manual to be always first loaded
'inlined_script',
// Default chunks added by Vue CLI are common, vendors, and the current page
'chunk-common',
'chunk-vendors',
Also for injecting the script inlined to my html template (only for production) I have:
// Only run in production mode, because inlining with `HtmlInlineScriptPlugin` breaks and causes errors with HMR.
if (process.env.NODE_ENV === 'production') {
// Inline the `inlined` entry point in production to run code eagerly in the `<head>`
// so that it's available to the whole page, and before deferred (async) JavaScript runs.
config.plugin('html-inline-script').use(HtmlInlineScriptPlugin, [
{
scriptMatchPattern: [/inlined_script.*.js$/]
}
])
}
And the config optimizations are defined as:
config.optimization
.splitChunks({
cacheGroups: {
vendors: {
name: 'chunk-vendors',
// Count all modules as vendor code except anything in @company, also include src-vendor
test: /[\/]node_modules[\/](?!@company[\/])|[\/]src-vendor[\/]/, //|(?!src[\/]pages[\/]_shared[\/]common[\/]inlined[\/])
// Using a high minChunks ensures we only include very common code.
// Otherwise, this will be huge with a lot of unused code.
minChunks: 10,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
// Using a high minChunks ensures we only include very common code.
// This may need to be increased if many similar, but niche entry points are created.
minChunks: 10,
priority: -20,
chunks: 'initial'
}
}
})
I’ll appreciate any help to understand better why this is happening, what documentation to read, any guess, I’ve been stuck with this for two days and didn’t find any docs that could help me, thanks!
Nelson Saloj is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.