Question 412978 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Would comments in ReactJS show in client browsers with Vite?

Currently, I am using Vite with ReactJS and have the following two types of comments inside my codes, for example:

export const Main = () => {

  useEffect(() => {
    // console.log("first type of comment.");
  }, [])
  
  return (
    <>
      {/* <div>Second type of comment.</div> */}
    </>
  );
}

Will these two types of comments be visible in client browsers, if I use vite and vite build, respectively?

For similar issues, How comment a JSP expression? talks about whether the comments will be visible in client browsers, but it is for JSP type of comments.

Tags:

2

Answers


  1. 0

    It depends on build process. When you run a prod build – vite build, it initiates a minification process and strips of both style of comments

    • JS //javascript comment, and
    • JSX {/* <div>JSX comment</div> */}
      So, rest assured, when you run vite build, both types of comments will be removed, and they won’t be visible to the users in their browsers.
    Login or Signup to reply.
  2. 0

    You can configure esbuild in vite to remove things like ‘console’, ‘debugger’ before putting it into production, here if you want to remove comment lines (including JavaScript comments and JSX comments) you can add terser plugin to vite config to remove that when building.

    import { terser } from 'rollup-plugin-terser';

export default defineConfig(({ mode }) => {
    return {
        build: {
            rollupOptions: {
                plugins: [
                    terser({
                        output: {
                            comments: false,
                        },
                    }),
                ],
            },
        },
    };
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search