在webpack上，如何在不评估脚本的情况下导入脚本？

Question

我最近正在从事一些网站优化工作，并且通过使用如下的import语句开始在webpack中使用代码拆分：

import(/* webpackChunkName: 'pageB-chunk' */ './pageB')

正确创建pageB-chunk.js，现在假设我要prefetch pageA中的此块，我可以通过在pageA中添加此语句来做到这一点：

import(/* webpackChunkName: 'pageB-chunk' */ /* webpackPrefetch: true */ './pageB')

这将导致一个>]

<link rel="prefetch" href="pageB-chunk.js">

附加到html的头部，然后浏览器将预取它，到目前为止效果很好。

问题是import

语句，我在这里使用的不仅是预取js文件，而且还评估js文件，这意味着该js文件的代码已解析并编译为字节码，即该js的顶级代码被执行。

这是在移动设备上非常耗时的操作，我想对其进行优化，我只想要prefetch

部分，而不想要evaluate＆execute部分，因为稍后当某些用户发生互动时，我将触发parsing＆评估我自己

↑↑↑↑↑↑↑↑我只想触发前两个步骤，图片来自：https://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/↑↑↑↑↑↑↑↑↑>

当然，我可以通过自己添加预取链接来做到这一点，但这意味着我需要知道应该在预取链接中放入哪个URL，Webpack绝对知道此URL，如何从Webpack中获取它？

webpack有没有简单的方法可以实现这一目标？

我最近正在从事一些网站优化工作，我开始通过使用如下这样的导入语句在webpack中使用代码拆分：import（/ * webpackChunkName：'pageB-chunk'* /'./pageB'）...

Answer 1

这是当前标准：

<link href="/js/script-to-preload.js" rel="preload" as="script">
...

Answer 2

首先，当我们指定script标签或link标签加载脚本时，浏览器的行为