Это действительно кажется стоящей идеей.

Это также связано с другой проблемой - конфигурацией chunkGroup при оптимизации. Потому что, если бы это было настроено, пустая строка была бы «разделяемой», «структурой» и т.

Если вы посмотрите на next.js, они используют такую ​​конфигурацию chunkGroups.

Когда мы изменим это, это также станет обратно несовместимым, но это необходимо сделать. У меня есть еще несколько больших изменений, которые также нуждаются в крупном выпуске.

Но не стесняйтесь придумывать код, который решает эту проблему 😀

Если вы посмотрите на next.js, они используют такую ​​конфигурацию chunkGroups.

О, круто, я не понимаю, если / как другие инструменты / фреймворки подходят к этому, у вас есть ссылка / примеры?

Это также связано с другой проблемой - конфигурацией chunkGroup при оптимизации.

Открытая проблема с razzle? не могли бы вы указать мне, какой из них, чтобы я мог получить больше контекста 😄

Я действительно думаю, что одним из возможных способов решения этой проблемы является более строгое определение формы / схемы существующих 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. Я бы сказал, что скопированные файлы - плохая практика, когда у нас есть сборщик.

Я не уверен, что понимаю, что вы имеете в виду, говоря «Скопированные файлы, я бы сказал, плохая практика, когда у нас есть сборщик».

В настоящее время поведение таково, что если вы поместите какие-либо файлы в папку верхнего уровня public/ в вашем проекте razzle.

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. Любые значки большего размера должны быть объединены.

Возможно, но даже если вы хотите поддерживать совместимость «plug and play» со значением по умолчанию create-react-app возможно, стоит учесть, что манифест приложения и некоторые значки также будут присутствовать там .

Я часто помню, что были причины, по которым manifest.json / manifest.webmanifest не должен содержать хэш сборки, что является одной из причин, по которым он довольно часто исключается из обработки сборщиком. Я могу ошибаться / забывать, но, возможно, что-то связано с PWA и автономным режимом

Реализует ли какой-либо из примеров проектов razzle поддержку PWA (и / или сервис-воркеров)?

Возможно, менее актуально, но некоторые другие вещи, которые я помещал в папку public/ в прошлом при использовании приложения create-response-app, являются загружаемыми файлами, связанными с веб-сайтом, но для которых требуются постоянные URL-адреса. Например, иметь PDF-документ, на который можно ссылаться при отправке электронных писем и т. Д. 🤷

Попытка найти примеры того, если / почему / когда веб-манифесты должны быть отделены от сборщика:

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#exnding -webpack

Только в канарейке razzle

Аккуратно, сейчас я добился некоторого прогресса в создании ветки в моем проекте, работающей над веткой канарейки. Это не совсем работает, на данный момент мои проблемы, в основном, связаны с настройкой загрузчика 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 вы связали, и заменить ее 🎉.

ОК!

Я создал специальный плагин в своем проекте, который на данный момент работает достаточно хорошо для моего варианта использования. Код, который вы придумали, был очень полезным, взяв его за отправную точку.

Я немного изменил его, но, к вашему сведению, я думаю, что есть проблема, когда он думает, что все обрабатывается 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

Ах да, спасибо. Я все еще привыкаю к ​​новым хукам плагинов, мне это нравится 🎉!

Я думаю, что единственная основная проблема, которую я до сих пор не могу решить, заключается в том, что по какой-то причине плагин / загрузчик 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), мне, вероятно, придется прочитать документацию webpack для externals немного подробнее о различные варианты использования внешних элементов 😅.

На данный момент я действительно использую его только для сброса внешних элементов, чтобы они были пустыми, чтобы я получил все в комплекте в легко переносимое приложение, которое не полагается на node_modules во время выполнения