A problem with packaging results that don't take full advantage of the browser cache（一个关于打包结果不能充分利用浏览器缓存的问题）

[meizilove258]

Related plugins

• plugin-vue

• plugin-vue-jsx

Description

Hello:

I need help. Someone can help me ?

There is a single-page application, packaged with the following results:

1. The synchronization module under the entry chunk is merged into an output file;
2. N asynchronous modules under the entry chunk, output N files;
3. According to the third-party dependency module of node_modules, the output file of vendor.js is also split out.

Above, Ben is pretty perfect. However, when one of the files under the route was modified, it was found that the change files of the repackaged output were not these files (the current modified asynchronous route page, router.js, main.js, index.hmtl), but basically the output in the whole application had changed. This does not make good use of the browser cache. I looked at the reason, which is that each asynchronous routing page introduces one or two variables exported under the entry chunk. Modifying any routing page causes changes in the incoming chunk, which in turn causes changes in the asynchronous routing page. How do I get rid of the one or two variables that are exported out. This, in my mind, is the perfect packing result. The entry export vars created by @vitejs/plugin-vue.

有一个单页应用，打包后的结果如下：
1、入口chunk下的同步模块，合并到一个输出文件中；
2、入口chunk下的N个异步模块，输入为N个文件；
3、node_modules下的第三方依赖模块根据，也拆分出来了vendor.js输出文件；

以上，本是挺完美了。但修改了路由下的其中某一个文件时，发现重新打包输出的变动文件，不是这几个文件（当前修改的异步路由页面、router.js、main.js、index.hmtl），而是基本上整个应用里面的输出都发生了变化。这样不能很好的利用浏览器缓存。我看了下原因，是每个异步路由页面中都引入了入口chunk下向外导出的一两个变量。修改任何一个路由页面都会引起入口chunk的变化，入口chunk变化又会引起异步路由页面变化。怎么才能把向外导出的那一两个变量拆出来呢。这样，才是我心目中完美的打包结果。入口向外导出的变量是@vitejs/plugin-vue这个插件帮助做的。

the cost.js is the asyn import。

Thanks!!

Suggested solution

No advice

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[meizilove258]

entry chunk export vars .eg:
const ie = (r, o) => {
const a = r.__vccOpts || r;
for (const [i, n] of o) a[i] = n;
return a;
}
Related to scoped。

[meizilove258]

chunkSplitPlugin({
strategy: 'default',
customSplitting: {
'_plugin-vue_export-helper': [/\0plugin-vue:export-helper/],
'serve': [/src/serve/],
},
}),
这样拆这个helperCode，倒是拆出来了。怕这个/\0plugin-vue:export-helper/以后会有变化。

[sapphi-red]

Duplicate of #79