指南
实践
配置
插件
案例
博客
指南
实践
配置
插件
案例
博客
简体中文

预设

共享依赖

默认情况下，某些 Next.js 内部结构会自动共享以优化你的应用程序。 请务必注意，手动共享这些内部结构可能会导致错误，因为它们已经为你处理了。

  • next/dynamic
  • next/head
  • next/link
  • next/router
  • next/script
  • react
  • react/
  • react-dom
  • react-dom/
  • styled-jsx
  • styled-jsx/style
点击展开 DEFAULT_SHARE_SCOPE:
export const DEFAULT_SHARE_SCOPE: SharedObject = {
  'next/dynamic': {
    eager: false,
    requiredVersion: false,
    singleton: true,
    import: undefined,
  },
  'next/head': {
    eager: false,
    requiredVersion: false,
    singleton: true,
    import: undefined,
  },
  'next/link': {
    eager: true,
    requiredVersion: false,
    singleton: true,
    import: undefined,
  },
  'next/router': {
    requiredVersion: false,
    singleton: true,
    import: false,
    eager: false,
  },
  'next/script': {
    requiredVersion: false,
    singleton: true,
    import: undefined,
    eager: false,
  },
  react: {
    singleton: true,
    requiredVersion: false,
    eager: false,
    import: false,
  },
  'react-dom': {
    singleton: true,
    requiredVersion: false,
    eager: false,
    import: false,
  },
  'react/jsx-dev-runtime': {
    singleton: true,
    requiredVersion: false,
    import: undefined,
    eager: false,
  },
  'react/jsx-runtime': {
    singleton: true,
    requiredVersion: false,
    eager: false,
    import: false,
  },
  'styled-jsx': {
    requiredVersion: false,
    singleton: true,
    import: undefined,
    eager: false,
  },
  'styled-jsx/style': {
    requiredVersion: false,
    singleton: true,
    import: undefined,
    eager: false,
  },
};

导出页面

你可以通过插件自动公开所有页面

new NextFederationPlugin({
  name: 'remoteApp',
  filename: '',
  remotes: {},
  exposes: {},
  shared: {},
  extraOptions: {
    exposePages: true
  },
});

这将使页面可以导入，例如：

  • import Page from 'remoteApp/pages/index'
  • import Page from 'remoteApp/pages/shop/product'

构建配置 Options

Public Path

publicPath 设置为 "auto"

config.output.publicPath: "auto"

Target

Webpack output target is set to async-node from node

config.target = "async-node"