为什么我的NextJS公共脚本不会被捆绑?

xmjla07d  于 2023-05-06  发布在  其他
关注(0)|答案(2)|浏览(150)

我有三件事相互作用,我不知道如何让他们正确捆绑。
1.内联脚本中页面上的一些动态配置
1.公用文件夹中的静态脚本,它使用动态配置为第三方脚本生成全局对象
1.第三方脚本
代码如下:

const { config: pageConfig } = pageProps;
<Script
    dangerouslySetInnerHTML={{
    __html: `window.config = ${JSON.stringify(pageConfig)};`,
    }}
/>
<Script src="/scripts/mypublicfile.js" />
<Script src={pageConfig.identity.script_url} />

执行上述操作会在<body>标记的末尾生成以下内容。

<script>window.config = { values: "iexpected"}</script>
<script src="/scripts/mypublicfile.js" />
<script src="https://www.thirdparty.com"></script>

我需要实际<head>中的前两个脚本标记,其中内联脚本是第一个,mypublicfile.js最终只是_next/static/中捆绑包的一部分,而第三方脚本可以在它们之后或<body>标记的末尾。
我基本上想要这个(没有提到我的公共脚本独立):

<script>window.config = { values: "iexpected"}</script>
<script src="/_next/static/bundle1.js" />
<script src="/_next/static/bundle2.js" />
<script src="https://www.thirdparty.com"></script>

我只是想让我的CDN知道只缓存回_next/static,而不必在scripts中配置默认情况下给予0提供max-age的东西。
我尝试了几种不同的排列组合,似乎都找不到答案。我可能误解了Static Optimization。我使用getInitialProps,但我认为这意味着我不能生成.html页面。这是否也会影响捆绑销售?

lx0bsm1f

lx0bsm1f1#

不知道这是否会有帮助,因为我自己没有测试过,但你可以看看https://nextjs.org/docs/api-reference/next/head在头部加载脚本,你也可以看看https://nextjs.org/docs/basic-features/script在脚本上使用beforeInteractive标志。这可能会影响它的捆绑/加载方式。

import Script from 'next/script'

<Script
  src='https://example.com/public/script.js'
  strategy="beforeInteractive"
/>

如果不起作用,您也可以尝试使用headasync

import Head from 'next/head'

<Head>
  <script async src='https://example.com/public/script.js'/>
</Head>
ua4mk5z4

ua4mk5z42#

我花了半天时间才弄明白这一点,但是如果你只是从页面的实现中导入你的mypublicfile.js,它会神奇地被放在服务于前端并加载到浏览器中的bundle中。您可能只是想在import周围添加一个条件,以避免它加载到服务器端。换句话说:

// pages/mypage.tsx

// Your normal imports, e.g.
import Image from "next/image";

// What you want to load on the front-end
if (typeof window !== "undefined") {
  import(
    "../scripts/mypublicfile.js"
  );
}

// Your page's implementation
export default function MyPage() {
  return (
    <Image ... />
  );
}

相关问题