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

xmjla07d 于 2023-05-06 发布在其他

关注(0)|答案(2)|浏览(142)

我有三件事相互作用，我不知道如何让他们正确捆绑。
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页面。这是否也会影响捆绑销售？

next.js

来源：https://stackoverflow.com/questions/68638339/how-come-my-nextjs-public-script-wont-get-bundled

2条答案

按热度按时间

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"
/>

如果不起作用，您也可以尝试使用head和async。

import Head from 'next/head'

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

赞(0）回复(0）举报 2023-05-06

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 ... />
  );
}

赞(0）回复(0）举报 2023-05-06

我来回答

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

2条答案

相关问题

热门标签

最新问答