fix: tree shake stringified JSON imports

packages/vite/src/node/__tests__/plugins/json.spec.ts

@@ -62,7 +62,7 @@ describe('transform', () => {
       false,
     )
     expect(actualSmall).toMatchInlineSnapshot(
-      `"export default JSON.parse("[{\\"a\\":1,\\"b\\":2}]")"`,
+      `"export default /* #__PURE__ */ JSON.parse("[{\\"a\\":1,\\"b\\":2}]")"`,
     )
   })
 
@@ -122,7 +122,7 @@ describe('transform', () => {
       false,
     )
     expect(actualDev).toMatchInlineSnapshot(
-      `"export default JSON.parse("{\\"a\\":1,\\n\\"🫠\\": \\"\\",\\n\\"const\\": false}")"`,
+      `"export default /* #__PURE__ */ JSON.parse("{\\"a\\":1,\\n\\"🫠\\": \\"\\",\\n\\"const\\": false}")"`,
     )
 
     const actualBuild = transform(
@@ -131,7 +131,7 @@ describe('transform', () => {
       true,
     )
     expect(actualBuild).toMatchInlineSnapshot(
-      `"export default JSON.parse("{\\"a\\":1,\\"🫠\\":\\"\\",\\"const\\":false}")"`,
+      `"export default /* #__PURE__ */ JSON.parse("{\\"a\\":1,\\"🫠\\":\\"\\",\\"const\\":false}")"`,
     )
   })
 

packages/vite/src/node/plugins/json.ts

@@ -87,7 +87,7 @@ export function jsonPlugin(
             }
 
             return {
-              code: `export default JSON.parse(${JSON.stringify(json)})`,
+              code: `export default /* #__PURE__ */ JSON.parse(${JSON.stringify(json)})`,
               map: { mappings: '' },
             }
           }

playground/json-stringify/__tests__/csr/json-csr.spec.ts

@@ -0,0 +1,62 @@
+import { readFileSync } from 'node:fs'
+import { expect, test } from 'vitest'
+import deepJson from 'vue/package.json'
+import testJson from '../../test.json'
+import hmrJson from '../../hmr.json'
+import { editFile, isBuild, isServe, page, untilUpdated } from '~utils'
+
+const stringified = JSON.stringify(testJson)
+const deepStringified = JSON.stringify(deepJson)
+const hmrStringified = JSON.stringify(hmrJson)
+
+test('default import', async () => {
+  expect(await page.textContent('.full')).toBe(stringified)
+})
+
+test('named import', async () => {
+  expect(await page.textContent('.named')).toBe(testJson.hello)
+})
+
+test('deep import', async () => {
+  expect(await page.textContent('.deep-full')).toBe(deepStringified)
+})
+
+test('named deep import', async () => {
+  expect(await page.textContent('.deep-named')).toBe(deepJson.name)
+})
+
+test('dynamic import', async () => {
+  expect(await page.textContent('.dynamic')).toBe(stringified)
+})
+
+test('dynamic import, named', async () => {
+  expect(await page.textContent('.dynamic-named')).toBe(testJson.hello)
+})
+
+test('fetch', async () => {
+  expect(await page.textContent('.fetch')).toBe(stringified)
+})
+
+test('?url', async () => {
+  expect(await page.textContent('.url')).toMatch(
+    isBuild ? 'data:application/json' : '/test.json',
+  )
+})
+
+test('?raw', async () => {
+  expect(await page.textContent('.raw')).toBe(
+    readFileSync(require.resolve('../../test.json'), 'utf-8'),
+  )
+})
+
+test.runIf(isServe)('should full reload', async () => {
+  expect(await page.textContent('.hmr')).toBe(hmrStringified)
+
+  editFile('hmr.json', (code) =>
+    code.replace('"this is hmr json"', '"this is hmr update json"'),
+  )
+  await untilUpdated(
+    () => page.textContent('.hmr'),
+    '"this is hmr update json"',
+  )
+})

playground/json-stringify/__tests__/minify.spec.ts

@@ -0,0 +1,14 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { expect, test } from 'vitest'
+import { isBuild, readFile, testDir } from '~utils'
+
+test.runIf(isBuild)('tree shake json', () => {
+  const assetsDir = path.resolve(testDir, 'dist/assets')
+  const files = fs.readdirSync(assetsDir)
+
+  const jsFile = files.find((f) => f.endsWith('.js'))
+  const jsContent = readFile(path.resolve(assetsDir, jsFile))
+
+  expect(jsContent).not.toContain('DEV_ONLY_JSON')
+})

playground/json-stringify/dev.json

@@ -0,0 +1,3 @@
+{
+  "dev": "DEV_ONLY_JSON"
+}

playground/json-stringify/hmr.json

@@ -0,0 +1,3 @@
+{
+  "hmr": "this is hmr json"
+}

playground/json-stringify/index.html

@@ -0,0 +1,75 @@
+<h2>Normal Import</h2>
+<pre class="full"></pre>
+<pre class="named"></pre>
+
+<h2>Deep Import</h2>
+<pre class="deep-full"></pre>
+<pre class="deep-named"></pre>
+
+<h2>Dynamic Import</h2>
+<pre class="dynamic"></pre>
+<pre class="dynamic-named"></pre>
+
+<h2>fetch</h2>
+<pre class="fetch"></pre>
+
+<h2>Importing as URL</h2>
+<pre class="url"></pre>
+
+<h2>Raw Import</h2>
+<pre class="raw"></pre>
+
+<h2>JSON Module</h2>
+<pre class="module"></pre>
+
+<h2>Has BOM Tag</h2>
+<pre class="bom"></pre>
+
+<h2>HMR</h2>
+<pre class="hmr"></pre>
+
+<script type="module">
+  import json, { hello } from './test.json'
+  import deepJson, { name } from 'vue/package.json'
+  import dev from './dev.json'
+
+  if (import.meta.env.MODE === 'dev') {
+    text('.dev', dev)
+  }
+
+  text('.full', JSON.stringify(json))
+  text('.named', hello)
+
+  text('.deep-full', JSON.stringify(deepJson))
+  text('.deep-named', name)
+
+  import('/test.json').then((mod) => {
+    text('.dynamic', JSON.stringify(mod.default))
+    text('.dynamic-named', mod.hello)
+  })
+
+  fetch(import.meta.env.DEV ? '/test.json' : '/public.json')
+    .then((r) => r.json())
+    .then((data) => {
+      text('.fetch', JSON.stringify(data))
+    })
+
+  import url from './test.json?url'
+  text('.url', url)
+
+  import raw from './test.json?raw'
+  text('.raw', raw)
+
+  import moduleJSON from '@vitejs/test-json-module'
+  text('.module', JSON.stringify(moduleJSON))
+
+  import hasBomJson from './json-bom/has-bom.json'
+  text('.bom', JSON.stringify(hasBomJson))
+
+  import hmrJSON from './hmr.json'
+  text('.hmr', JSON.stringify(hmrJSON))
+
+  function text(sel, text) {
+    document.querySelector(sel).textContent = text
+  }
+</script>

playground/json-stringify/json-bom/has-bom.json

@@ -0,0 +1,4 @@
+{
+  "description": "This file is marked with BOM.",
+  "message": "If the parsing is successful, the BOM tag has been removed."
+}

playground/json-stringify/json-module/index.json

@@ -0,0 +1,3 @@
+{
+  "hello": "hi"
+}

playground/json-stringify/json-module/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@vitejs/test-json-module",
+  "version": "0.0.0"
+}

playground/json-stringify/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vitejs/test-json",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@vitejs/test-json-module": "file:./json-module",
+    "express": "^5.0.1",
+    "vue": "^3.5.13"
+  }
+}

playground/json-stringify/public/public.json

@@ -0,0 +1,3 @@
+{
+  "hello": "this is json"
+}

playground/json-stringify/test.json

@@ -0,0 +1,3 @@
+{
+  "hello": "this is json"
+}

playground/json-stringify/vite.config.js

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({ json: { stringify: true } })

playground/json/__tests__/minify.spec.ts

@@ -0,0 +1,14 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { expect, test } from 'vitest'
+import { isBuild, readFile, testDir } from '~utils'
+
+test.runIf(isBuild)('tree shake json', () => {
+  const assetsDir = path.resolve(testDir, 'dist/assets')
+  const files = fs.readdirSync(assetsDir)
+
+  const jsFile = files.find((f) => f.endsWith('.js'))
+  const jsContent = readFile(path.resolve(assetsDir, jsFile))
+
+  expect(jsContent).not.toContain('DEV_ONLY_JSON')
+})

playground/json/dev.json

@@ -0,0 +1,3 @@
+{
+  "dev": "DEV_ONLY_JSON"
+}

playground/json/index.html

@@ -31,6 +31,11 @@ <h2>HMR</h2>
 <script type="module">
   import json, { hello } from './test.json'
   import deepJson, { name } from 'vue/package.json'
+  import dev from './dev.json'
+
+  if (import.meta.env.MODE === 'dev') {
+    text('.dev', dev)
+  }
 
   text('.full', JSON.stringify(json))
   text('.named', hello)