これは価値のあるアイデアのようです。

また、最適化におけるchunkGroup構成である別の問題にも関連しています。 それが設定されている場合、空の文字列は「共有」、「フレームワーク」などになるためです。

next.jsを見ると、次のようなchunkGroups構成が使用されています。

これを変更すると、下位互換性もなくなりますが、実行する必要があります。 メジャーリリースが必要な、さらに大きな変更が行われています。

しかし、これを解決するコードを自由に考えてください😀

next.jsを見ると、次のようなchunkGroups構成が使用されています。

かっこいい、他のツール/フレームワークがこれにアプローチするかどうか/どのようにアプローチするかはわかりませんが、リンク/例はありますか？

また、最適化におけるchunkGroup構成である別の問題にも関連しています

未解決のラズル問題？ より多くのコンテキストを取得できるように、どれを指定してもらえますか😄

これを解決するための潜在的な1つの方法は、既存のchunks.jsonとassets.jsonの形状/スキーマをより強力に定義することだと思います。 おそらく慎重に検討する必要があります（そしてメジャーバージョンのバンプがあります）が、他のフレームワークなどが問題をどのように解決したかの例がある場合は、同様の方向に従うことが理にかなっているかもしれません

1361＃1370

そして

https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L378

彼らがマニフェストをどのように行うかについてはよくわかりません。

今すぐhttps://github.com/jaredpalmer/razzle/issues/1377を見て、新しい例を追加しました:)

@fivethreeo特にこの問題にこれ以上時間を費やすことができませんでした😅、私は間違いなくv4プレリリースを試してみることに時間を費やします。 準備ができているとお考えの場合は、今後数日で試してみたいと思います。

興味があるかどうかはわかりませんが、現在取り組んでいることをここで公開し

私はv4にかなり熱心です。それは、特にtypescriptの場合、ここで設定する必要のある「プラグイン」オーバーライドをできるだけ多く削除できることを意味するからです。

キャッシュ可能なアセットのものはここにあり

現在、すべてのファイルでcontenthashが使用されています。 私が言うコピーされたファイルは、私たちがバンドラーを持っているときは悪い習慣です。

「バンドラーがある場合、コピーされたファイルは悪い習慣です」とはどういう意味かわかりません。

現在の動作は、razzleプロジェクトの最上位のpublic/フォルダーにファイルを配置した場合です。

build/
public/
  robots.txt
  manifest.json
package.json

razzle build実行すると、静的アセットに対応します。

build/
  public/
    robots.txt
    manifest.json
    static/
      ...
public/
  robots.txt
  manifest.json
package.json

私はコピーされ-にしてビルド時に、彼らは別々にキャッシュ制御を適用するための、具体的ターゲット表しているように、すべての資産のリストを維持するために望ましいかもしれない考えていました。

それに対する議論（私が考えることができる）は、ユーザーがビルド中にrazzleがコピーインしたファイルと、 razzle build外に手動で挿入されたファイルを区別する必要がないかもしれないということだと思います。

publicにはrobots.txtとfavicon.icoのみを含める必要があり、ハッシュによってバージョン管理されることはないと思います。

それ以外はwebpackにバンドルする必要があります。 より大きなファビコンはバンドルする必要があります。

たぶん、しかし、デフォルトのcreate-react-appとの「プラグアンドプレイ」互換性を維持したい場合でも、アプリマニフェストといくつかのアイコンもそこに存在することを考慮する価値があるかもしれません。

manifest.json / manifest.webmanifestビルドハッシュを含めるべきではない理由があることを大いに覚えています。これは、バンドラーによる処理からかなり頻繁に除外される理由の1つです。 私は間違っている/覚えていないかもしれませんが、おそらくPWAとオフラインモードに関係しています

魅力的なサンプルプロジェクトのいずれかがPWA（および/またはサービスワーカー）サポートを実装していますか？

関連性は低いかもしれませんが、create-react-appを使用するときに過去にpublic/フォルダーに置いた他のいくつかのものは、Webサイトに関連するダウンロード可能なファイルですが、永続的なURLが必要です。 メールなどを送信するときにリンクできるPDFドキュメントを持っているようなものです🤷

Webマニフェストをバンドラーに分離する必要がある場合/理由/時期の例を探してみます。

https://stackoverflow.com/questions/54145027/what-happens-when-you-add-a-version-hash-to-your-service-worker-file

その投稿には、 https： //github.com/w3c/manifest/issues/446#issuecomment-351368893にリンクしているコメントがあり

はい、ダウンロード可能なファイルはそこに行く必要があります。 うーん、でもこれらのファイルをassets.jsonに追加するにはどうすればよいですか？ 何か案は？ 😀webpackにそれらを見つけてそのままバンドルさせる必要がありますか？ Assets.jsonを変更するのはハックのようです。

PWAの例はないと思います。 ただし、一貫した名前が必要な場合。 それはwebpackで処理する必要があります。

https://webpack.js.org/plugins/copy-webpack-plugin/

https://github.com/jaredpalmer/razzle/commit/c5f4bc3f7ed41caf2fd4fcc307d1ba40ab6e52de

アセットプラグインをマニフェストプラグインに置き換えて、出力を調整できるようにします。

新しいアセットを追加しました-すべてのファイルを含むマニフェストhttps://github.com/jaredpalmer/razzle/commit/1c6e9169e9d8eee256d0f118f8a88da8de85989f改善に関する提案はありますか？

今カナリアをリリースしました:)

マニフェストプラグインが実際に維持されていないようです。 最善は私たち自身で行うことです。 しかし、私は現在誰も知りませんが、（多分）私かそれができるwebpackの人々です。

https://github.com/jaredpalmer/razzle/issues/1438

カナリアブランチに追加されました。 今のところハックのようなものです。 しかし、それは機能し、改善できるスタートです。

いくつか検討した後、これをコアに追加しません。

しかし、これが私が思いついたコードです：

        new ManifestPlugin({
          fileName: path.join(paths.appBuild, 'assets.json'),
          writeToFileEmit: true,
          generate: (seed, files) => {
            const entrypoints = new Set();
            const noChunkFiles = new Set();
            const longTermCacheFiles = new Set();
            files.forEach(file => {
              if (file.isChunk) {
                const groups = (
                  (file.chunk || {})._groups || []
                ).forEach(group => entrypoints.add(group));
              } else {
                noChunkFiles.add(file);
              }
              if (!webpackOptions.fileLoaderExclude.some(re=>re.test(file.path))) {
                let fileHasHash = /\[(build|content)?hash/.test(
                  typeof webpackOptions.fileLoaderOutputName == 'function' ?
                  webpackOptions.fileLoaderOutputName(file) : webpackOptions.fileLoaderOutputName);
                if (fileHasHash) longTermCacheFiles.add(file);
              } else if (webpackOptions.urlLoaderTest.some(re=>re.test(file.path))) {
                let urlHasHash = /\[(build|content)?hash/.test(
                  typeof webpackOptions.urlLoaderOutputName == 'function' ?
                  webpackOptions.urlLoaderOutputName(file) : webpackOptions.urlLoaderOutputName);
                if (urlHasHash) longTermCacheFiles.add(file);
              } else if (webpackOptions.cssTest.some(re=>re.test(file.path))) {
                let cssHasHash = /\[(build|content)?hash/.test(
                  typeof webpackOptions.cssOutputFilename == 'function' ?
                  webpackOptions.cssOutputFilename(file) : webpackOptions.cssOutputFilename);
                if (cssHasHash) longTermCacheFiles.add(file);
              } else if (webpackOptions.jsTest.some(re=>re.test(file.path))) {
                let jsHasHash = /\[(build|content)?hash/.test(
                  typeof webpackOptions.jsOutputFilename == 'function' ?
                  webpackOptions.jsOutputFilename(file) : webpackOptions.jsOutputFilename);
                if (jsHasHash) longTermCacheFiles.add(file);
              }
            });
            const entries = [...entrypoints];
            const entryArrayManifest = entries.reduce((acc, entry) => {
              const name =
                (entry.options || {}).name ||
                (entry.runtimeChunk || {}).name ||
                entry.id;
              const allFiles = []
                .concat(
                  ...(entry.chunks || []).map(chunk =>
                    chunk.files.map(path => config.output.publicPath + path)
                  )
                )
                .filter(Boolean);

              const filesByType = allFiles.reduce((types, file) => {
                const fileType = file.slice(file.lastIndexOf('.') + 1);
                types[fileType] = types[fileType] || [];
                types[fileType].push(file);
                return types;
              }, {});

              const chunkIds = [].concat(
                ...(entry.chunks || []).map(chunk => chunk.ids)
              );

              return name
                ? {
                    ...acc,
                    [name]:  { ...filesByType, chunks: chunkIds },
                  }
                : acc;
            }, seed);
            entryArrayManifest['noentry'] = [...noChunkFiles]
              .map(file => file.path)
              .reduce((types, file) => {
                const fileType = file.slice(file.lastIndexOf('.') + 1);
                types[fileType] = types[fileType] || [];
                types[fileType].push(file);
                return types;
              }, {});
              entryArrayManifest['cacheable'] = [...longTermCacheFiles]
                .map(file => file.path);
            return entryArrayManifest;
          },
        })

しかし、私は資産について多くを学びました;）

申し訳ありませんが、しばらくの間これで多くの時間を過ごすことができませんでしたが、それはきれいに見えます。 私のものを最新の安定したラズルバージョンにアップグレードし、カスタムプラグインとしてあなたの提案を試してみてください。

それはかなり良さそうに見えますが、私はこれについて少し混乱しています：

let fileHasHash = /\[(build|content)?hash/.test(
  typeof webpackOptions.fileLoaderOutputName == 'function'
    ? webpackOptions.fileLoaderOutputName(file)
    : webpackOptions.fileLoaderOutputName);

if (fileHasHash) longTermCacheFiles.add(file);

webpackOptions.fileLoaderOutputNameとはどういう意味ですか？ 私にとって、それは常に未定義のようです。

https://github.com/jaredpalmer/razzle/blob/canary/packages/razzle/config/createConfigAsync.js#L214

https://razzle-git-canary.jared.vercel.app/docs/customization#extending -webpack

ラズルカナリアのみ

きちんと、私は今、私のプロジェクトのブランチをカナリアブランチで動作させることでいくらかの進歩を遂げました。 現時点では、私の問題は主に兄弟パッケージを認識するようにbabelローダーを構成することに関係しているようです。 ビルドはできますが、実行しようとすると「モジュールが見つかりません」という問題が発生します。

これはおそらくあまり面白くなく、便利ではありませんが、次のようになります。

https://github.com/bootleg-rust/sites/pull/2/files

メモリから私はもともとhttps://github.com/jaredpalmer/razzle/issues/664から設定を借りました

/Users/jstableford/Desktop/@bootleg-rust/sites/packages/web-rust-lang/build/webpack:/lib-ssr-runtime sync:2
        var e = new Error("Cannot find module '" + req + "'");
         ^
Error: Cannot find module 'undefined'
    at require (/Users/jstableford/Desktop/@bootleg-rust/sites/packages/web-rust-lang/build/webpack:/lib-ssr-runtime sync:2:10)
    at razzleCacheableFiles (/Users/jstableford/Desktop/@bootleg-rust/sites/packages/web-rust-lang/build/webpack:/lib-ssr-runtime/server.tsx:106:18)
    at createKoaApp (/Users/jstableford/Desktop/@bootleg-rust/sites/packages/web-rust-lang/build/webpack:/lib-ssr-runtime/server.tsx:61:26)
    at Module.call (/Users/jstableford/Desktop/@bootleg-rust/sites/packages/web-rust-lang/build/webpack:/src/server.tsx:42:13)
    at a (/Users/jstableford/Desktop/@bootleg-rust/sites/packages/web-rust-lang/build/webpack:/webpack/bootstrap:19:22)
    at Object.call (/Users/jstableford/Desktop/@bootleg-rust/sites/packages/web-rust-lang/build/server.js:1:31123)
    at __webpack_require__ (/Users/jstableford/Desktop/@bootleg-rust/sites/packages/web-rust-lang/build/webpack:/webpack/bootstrap:19:22)
    at /Users/jstableford/Desktop/@bootleg-rust/sites/packages/web-rust-lang/build/webpack:/webpack/bootstrap:83:10
    at Object.<anonymous> (/Users/jstableford/Desktop/@bootleg-rust/sites/packages/web-rust-lang/build/server.js:1:935)

https://github.com/jaredpalmer/razzle/issues/1459

NODE_PATH = ../などを設定します

https://github.com/jaredpalmer/razzle/blob/canary/packages/razzle/config/paths.js#L46

たぶん、ここでいくつか変更する必要があります。

https://github.com/jaredpalmer/razzle/blob/canary/packages/razzle/config/modules.js

さて、少し掘り下げてみると、問題の原因は実際にはprocess.env.RAZZLE_CHUNKS_MANIFESTが定義されていないことに気づきました😅。

私がそれを使用していたのは、キャッシュ可能なアセットを検出することだけだったので、リンクした新しいManifestPlugin今すぐ実行して置き換えることができるはずです🎉。

OK！

私は自分のプロジェクトでカスタムプラグインを作成しましたが、当面は私のユースケースで十分に機能するようです。 あなたが思いついたコードは、それを出発点として非常に役に立ちました。

私はそれをかなり変更しましたが、参考までに、これはArray.prototype.every()代わりにArray.prototype.some() Array.prototype.every()使用するため、すべてがfile-loaderによって処理されると見なされるという問題があると思います： !webpackOptions.fileLoaderExclude.every(re=>re.test(file.path))

ここで共有すると便利な場合：

function modifyWebpackConfig({
  env: { target, dev },
  webpackConfig,
  webpackObject,
  options: { pluginOptions, razzleOptions, webpackOptions },
  paths,
}) {
  // TODO: allow passing in extra file categorizers with `pluginOptions`
  const fileCategorizers = [
    {
      test: webpackOptions.urlLoaderTest,
      outputName: webpackOptions.urlLoaderOutputName,
    },
    {
      test: webpackOptions.cssTest,
      outputName: webpackOptions.cssOutputFilename,
    },
    {
      test: webpackOptions.jsTest,
      outputName: webpackOptions.jsOutputFilename,
    },
    {
      exclude: webpackOptions.fileLoaderExclude,
      outputName: webpackOptions.fileLoaderOutputName,
    },
  ];

  const fileName = path.join(paths.appBuild, "cacheable-assets.json");
  const assetPlugin = new WebpackManifestPlugin({
    fileName,
    writeToFileEmit: true,
    generate: (seed, files) => {
      const notHashedFiles = new Set();
      const hashedFiles = new Set();

      const setFileAs = (file, { containsHash }) => {
        if (containsHash) {
          hashedFiles.add(file);
        } else {
          notHashedFiles.add(file);
        }
      };

      files.forEach((file) => {
        if (file.name.startsWith("..")) {
          // Files that start with ".." will live outside of the public/
          // folder and therefore can't/shouldn't be accessed.
          return;
        }

        const fileCategorized = fileCategorizers.some(
          ({ test, exclude, outputName }) => {
            const passesTest =
              test != null ? fileMatchesAnyRegexp(file, test) : true;

            const passesExclude =
              exclude != null ? !fileMatchesAnyRegexp(file, exclude) : true;

            const fileMatches =
              passesTest &&
              passesExclude &&
              fileMatchesTemplate(file.path, outputName);

            if (fileMatches) {
              const containsHash = webpackLoaderOutputContainsHash(
                outputName,
                file,
              );

              setFileAs(file, { containsHash });
            }

            return fileMatches;
          },
        );

        if (!fileCategorized) {
          // TODO: allow "strict" vs "lazy" mode here where we can only use
          // regex on the filename to guess if a file contains a hash in it.
          setFileAs(file, { containsHash: false });
        }
      });

      const mutable = [...notHashedFiles].map((file) => file.path);
      const immutable = [...hashedFiles].map((file) => file.path);
      return {
        mutable,
        immutable,
      };
    },
  });

  if (target === "web") {
    webpackConfig.plugins.push(assetPlugin);
  }

  if (target === "node") {
    // NOTE: adding multiple DefinePlugin's causes issues
    // so we have to find and edit the existing one.
    const definePlugin = webpackConfig.plugins.find(
      (p) => p.constructor.name === "DefinePlugin",
    );
    definePlugin.definitions[
      "process.env.RAZZLE_PLUGIN_CACHEABLE_ASSETS"
    ] = JSON.stringify(fileName);
  }

  return webpackConfig;
}

const cacheableAssetsPlugin = {
  modifyWebpackConfig,
};

または、こちらで確認できますhttps://github.com/bootleg-rust/sites/pull/2/files#diff -59ee436c0396a1f925f067b7e7cbcdee354003236a279e0a87cf8831c7f587e3

ニース:)

ほんの少しのヒント

https://github.com/jaredpalmer/razzle/blob/canary/packages/razzle/config/createConfigAsync.js#L338
https://github.com/jaredpalmer/razzle/blob/canary/packages/razzle/config/createConfigAsync.js#L243

そうそう、ありがとう。 私はまだ新しいプラグインフックに慣れています、私はそれが好きです🎉！

私がまだ解決できていない唯一の主な問題は、 razzle startを使用して開発モードで実行しているときに何らかの理由でscssプラグイン/ローダーが機能しないことだと思いますrazzle startが、 razzle buildをすべて実行すると、すべて問題ないようです。

それが何であるかについて何か考えはありますか？ それとも、これを別のgithubの問題に置く価値がありますか？

また、カスタムパスにもmodifyPathsを使用して、構成できるようにします。

どのように動作しませんか？

新しい問題かもしれません.. :)

気にしないでください、sassローダーが機能しないことはrazzleに特有のものではありませんでした。 バージョンの不一致と関係があるか、 react-scriptsバージョンおよび/またはdepsを持ち上げていた兄弟パッケージに含まれていたストーリーブックと関係があります。

資産処理のためのフックを追加し、終了します😀

外部プラグインを追加したようです。 私はまだクライアント/サーバー/サーバーレスのためにそれを修正する必要があります。 カナリアでそのためのアイデアはありますか？ 少し立ち往生。

あなたが今使っているフックはそうです。

外部プラグインを追加したようです。 私はまだクライアント/サーバー/サーバーレスのためにそれを修正する必要があります。 カナリアでそのためのアイデアはありますか？ 少し立ち往生。

すべてのnode_modulesをデフォルトでbuild/server.jsにバンドルすることは、（主にサーバー上で）非常に便利であることが間違いなくわかりました。 node_modulesフォルダーをプロダクションDockerイメージから完全に除外できるのは、とても素晴らしいことのようです。

ネイティブ/プラットフォーム固有の依存関係でどのように機能するかを使用/テストする必要はないと言っていました（imagemagickのようなものに問題があると感じています）

私が作成した「externals」プラグインを使用した私の一般的な思考プロセスは次のとおりです。

const externalsPluginOptions = {
  // By default the NodeJS process uses the externals function razzle has and relies on `node_modules` to still be available
  // after performing a razzle build. Setting this to `true` would mean that all dependencies attempt to get bundled into
  // the build/ output unless explicitly specified as an external
  resetNodeExternals: false,
  // This probably wouldn't actually be required because the browser runtime
  // doesn't have externals by default (i'm assuming)
  resetWebExternals: true,

  webExternals: [
    // add externals for the web runtime here
  ],
  nodeExternals: [
    // add externals for the node runtime here
  ],
};

このための「適切な」構成APIを決定する前に正直に言うと（特にそれがラズルコアになる場合）、 externalsのwebpackドキュメントをもう少し詳しく読む必要があります。外部のさまざまなユースケース😅。

現時点では、実際には外部を空にリセットするためにのみ使用しているため、実行時にnode_modulesに依存しない簡単にポータブルなアプリにすべてをバンドルできます