Disable Previews in production?

Developing with Prismic
1

How can I go about removing Previews in production?
My site is set up using the guide on the website.

However I would like to disable previews on production.
I already exclude the plugin in gatsby.config (this only removes the 3rd party script):

// Only load Prismic previews in development/staging environments
if (process.env.ENVIRONMENT !== "production") {
  plugins.push({
    resolve: "gatsby-plugin-prismic-previews",
    options: {
      repositoryName: process.env.GATSBY_PRISMIC_REPO,
      accessToken: process.env.PRISMIC_ACCESS_TOKEN,
    },
  })
}

I would like to go one step further and prevent each page to be wrapped in the HOC withPrismicPreview from the "gatsby-plugin-prismic-previews" or prevent using the "gatsby-plugin-prismic-previews" package at all in production.

3

Hey @tyron.wytrykowski, here's some input from the DevX team:

You can exclude previews in production using a similar approach to what you are doing in the gatsby-config.js file. The HOCs can be conditionally added based on process.env.ENVIRONMENT like this:

import { withPrismicPreview } from "gatsby-plugin-prismic-previews";

 function Page() { 
   // .. 
} 
export default process.env.ENVIRONMENT === "production" 
? Page
: withPrismicPreview(Page);

The process.env.ENVIRONMENT === "production" strategy should be used anytime withPrismicPreview, withPrismicUnpublishedPreview, or withPrismicPreviewResolver wraps a page component. The same approach should be used for <PrismicPreviewProvider> in gatsby-browser.js.

5

Hey @tyron.wytrykowski - did this help you with removing the Preview package from your production bundle size? From looking at it, even if I conditionally render higher order component, at the end of the day, I'm still importing it into the file.

It's a big task for me so before I start work, I'd be great to know that you've had a success.

1 Like
6

@kris This is true, I have left it for now to look for other optimizations perhaps @Pau has a solution for this? Probably using loadable components?

1 Like
8

It sounds like a practical tool, if it allows you to lazy load components then that's probably useful

10

Has a solution for this been found? The preview bundle is added to all requests regardless if a preview or not. I attempted to use include instead of import, but it did not complete the preview.