이것은 가치있는 아이디어처럼 보입니다.

또한 최적화에서 chunkGroup 구성이라는 또 다른 문제와 연결되어 있습니다. 그것이 설정 되었다면 빈 문자열은 "shared", "framework"등이 될 것이기 때문입니다.

next.js를 보면 다음과 같은 chunkGroups 구성을 사용합니다.

이를 변경하면 이전 버전과도 호환되지 않지만 수행되어야합니다. 주요 릴리스가 필요한 몇 가지 큰 변경 사항이 있습니다.

하지만이 문제를 해결하는 몇 가지 코드를 자유롭게 생각해보세요 😀

next.js를 보면 다음과 같은 chunkGroups 구성을 사용합니다.

오 멋지다, 나는 다른 도구 / 프레임 워크가 이것에 접근하는 방법 / 어떻게 접근하지 못합니다. 링크 / 예제가 있습니까?

또한 최적화에서 chunkGroup 구성이라는 다른 문제와 관련이 있습니다.

공개 된 문제? 더 많은 컨텍스트를 얻을 수 있도록 어느 것을 알려 주시겠습니까?

이 문제를 해결하는 잠재적 인 한 가지 방법은 기존 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를 매우 좋아합니다. 그 이유는 여기 에서 설정해야하는 "플러그인"재정의를 많이 제거 할 수 있다는 것을 의미하기 때문입니다. 특히 타이프 스크립트에 대한 것입니다.

캐시 가능한 자산은 여기에 있습니다 .

모든 파일은 이제 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 만 포함해야하며 해시로 버전이 지정되지 않을 것이라고 생각합니다.

다른 모든 것은 웹팩에 의해 번들로 제공되어야합니다. 더 큰 파비콘은 번들로 제공되어야합니다.

하지만 기본 create-react-app 와 "플러그 앤 플레이"호환성을 유지하려는 경우에도 앱 매니페스트와 일부 아이콘 도 여기에 표시된다는 점을 고려할 가치가 있습니다.

나는 manifest.json / manifest.webmanifest 에 빌드 해시를 포함하지 않아야하는 이유가 있다는 것을 막연하게 기억합니다. 이는 번 들러에서 처리되지 않는 경우가 자주 발생하는 이유 중 하나입니다. 내가 틀렸거나 잘못 기억할 수 있지만 PWA 및 오프라인 모드와 관련이있을 수 있습니다.

razzle 예제 프로젝트에서 PWA (및 / 또는 서비스 워커) 지원을 구현합니까?

덜 관련성이 있지만 과거에 create-react-app을 사용할 때 public/ 폴더에 넣은 다른 것은 웹 사이트와 관련된 다운로드 가능한 파일이지만 영구 URL이 필요한 곳입니다. 이메일 등을 보낼 때 링크 할 수있는 pdf 문서가있는 것과 같습니다.

if / why / when 웹 매니페스트가 번 들러와 분리되어야하는 경우의 예를 찾으려고합니다.

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 개선에 대한 어떤 제안?

지금 카나리아가 출시 되었나요 :)

매니페스트 플러그인이 실제로 유지되지 않는 것으로 보입니다. 최선은 우리 스스로하는 것입니다. 그러나 나는 현재 아무도 알지 못하지만 (아마도) 저 또는 그렇게 할 수있는 웹팩 사람들입니다.

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;
          },
        })

하지만 자산에 대해 많이 배웠습니다.)

한동안 이것으로 많은 시간을 보내지 못해 미안하지만 깔끔해 보입니다. 내 물건을 최신 안정된 razzle 버전으로 업그레이드하고 사용자 정의 플러그인으로 제안을 시도해보십시오.

꽤 좋아 보이지만 이것에 대해 약간 혼란 스럽습니다.

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

razzle 카나리아에서만

깔끔한, 나는 카나리아 브랜치에서 작업하는 내 프로젝트에 브랜치를 가져 와서 약간의 진전을 이루었습니다. 제대로 작동하지 않습니다. 현재 제 문제는 주로 형제 패키지를 인식하도록 바벨 로더를 구성하는 것과 관련된 것 같습니다. 빌드 할 수 있지만 실행하려고 할 때 "모듈을 찾을 수 없음"문제가 발생합니다.

이것은 아마도 너무 흥미 롭거나 유용하지는 않지만 :

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 구성을 제공하여 대체 할 수 있어야합니다 🎉.

확인!

내 프로젝트에서 당분간 내 사용 사례에 충분히 잘 작동하는 사용자 정의 플러그인을 만들었습니다. 당신이 만든 코드는 그것을 시작점으로 삼는 데 매우 도움이되었습니다.

나는 그것을 공정한 비트를 변경했지만 참고로 나는 모든 것을 처리되는 생각 그것으로 문제가 있다고 생각 file-loader 이 사용을하기 때문에 Array.prototype.every() 대신 Array.prototype.some() : !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 폴더를 완전히 제외 할 수 있다는 것은 정말 멋져 보입니다.

네이티브 / 플랫폼 별 종속성과 함께 작동하는 방식을 사용 / 테스트 할 필요가 없다고 말했지만 (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를 설정하기 전에 솔직히 말하면 (특히 razzle 코어에있을 경우) 웹팩 문서에서 externals 에 대해 좀 더 깊이 읽어야 할 것입니다. 외부에 대한 다른 사용 사례 😅.

현재는 외부를 비워 두는 데만 사용하고 있으므로 런타임에 node_modules에 의존하지 않는 쉽게 이식 가능한 앱에 모든 것을 번들로 제공합니다.