mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
feat: allow client-side sourcemaps in production (#7313)
This commit is contained in:
parent
ec210190d1
commit
eab4706614
@ -9,7 +9,7 @@ import { TreeShakeTemplatePlugin } from './tree-shake'
|
|||||||
|
|
||||||
const isPureObjectOrString = (val: any) => (!Array.isArray(val) && typeof val === 'object') || typeof val === 'string'
|
const isPureObjectOrString = (val: any) => (!Array.isArray(val) && typeof val === 'object') || typeof val === 'string'
|
||||||
const isDirectory = (p: string) => { try { return statSync(p).isDirectory() } catch (_e) { return false } }
|
const isDirectory = (p: string) => { try { return statSync(p).isDirectory() } catch (_e) { return false } }
|
||||||
function compareDirByPathLength ({ path: pathA }: { path: string}, { path: pathB }: { path: string}) {
|
function compareDirByPathLength ({ path: pathA }: { path: string }, { path: pathB }: { path: string }) {
|
||||||
return pathB.split(/[\\/]/).filter(Boolean).length - pathA.split(/[\\/]/).filter(Boolean).length
|
return pathB.split(/[\\/]/).filter(Boolean).length - pathA.split(/[\\/]/).filter(Boolean).length
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -165,31 +165,34 @@ export default defineNuxtModule<ComponentsOptions>({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
nuxt.hook('vite:extendConfig', (config, { isClient }) => {
|
nuxt.hook('vite:extendConfig', (config, { isClient, isServer }) => {
|
||||||
|
const mode = isClient ? 'client' : 'server'
|
||||||
|
|
||||||
config.plugins = config.plugins || []
|
config.plugins = config.plugins || []
|
||||||
config.plugins.push(loaderPlugin.vite({
|
config.plugins.push(loaderPlugin.vite({
|
||||||
sourcemap: nuxt.options.sourcemap,
|
sourcemap: nuxt.options.sourcemap[mode],
|
||||||
getComponents,
|
getComponents,
|
||||||
mode: isClient ? 'client' : 'server'
|
mode
|
||||||
}))
|
}))
|
||||||
if (nuxt.options.experimental.treeshakeClientOnly) {
|
if (nuxt.options.experimental.treeshakeClientOnly && isServer) {
|
||||||
config.plugins.push(TreeShakeTemplatePlugin.vite({
|
config.plugins.push(TreeShakeTemplatePlugin.vite({
|
||||||
sourcemap: nuxt.options.sourcemap,
|
sourcemap: nuxt.options.sourcemap[mode],
|
||||||
getComponents
|
getComponents
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
nuxt.hook('webpack:config', (configs) => {
|
nuxt.hook('webpack:config', (configs) => {
|
||||||
configs.forEach((config) => {
|
configs.forEach((config) => {
|
||||||
|
const mode = config.name === 'client' ? 'client' : 'server'
|
||||||
config.plugins = config.plugins || []
|
config.plugins = config.plugins || []
|
||||||
config.plugins.push(loaderPlugin.webpack({
|
config.plugins.push(loaderPlugin.webpack({
|
||||||
sourcemap: nuxt.options.sourcemap,
|
sourcemap: nuxt.options.sourcemap[mode],
|
||||||
getComponents,
|
getComponents,
|
||||||
mode: config.name === 'client' ? 'client' : 'server'
|
mode
|
||||||
}))
|
}))
|
||||||
if (nuxt.options.experimental.treeshakeClientOnly) {
|
if (nuxt.options.experimental.treeshakeClientOnly && mode === 'server') {
|
||||||
config.plugins.push(TreeShakeTemplatePlugin.webpack({
|
config.plugins.push(TreeShakeTemplatePlugin.webpack({
|
||||||
sourcemap: nuxt.options.sourcemap,
|
sourcemap: nuxt.options.sourcemap[mode],
|
||||||
getComponents
|
getComponents
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
@ -58,7 +58,7 @@ export async function initNitro (nuxt: Nuxt) {
|
|||||||
.concat(nuxt.options._generate ? ['/', ...nuxt.options.generate.routes] : [])
|
.concat(nuxt.options._generate ? ['/', ...nuxt.options.generate.routes] : [])
|
||||||
.concat(nuxt.options.ssr === false ? ['/', '/200.html', '/404.html'] : [])
|
.concat(nuxt.options.ssr === false ? ['/', '/200.html', '/404.html'] : [])
|
||||||
},
|
},
|
||||||
sourcemap: nuxt.options.sourcemap,
|
sourceMap: nuxt.options.sourcemap.server,
|
||||||
externals: {
|
externals: {
|
||||||
inline: [
|
inline: [
|
||||||
...(nuxt.options.dev
|
...(nuxt.options.dev
|
||||||
|
@ -68,18 +68,18 @@ async function initNuxt (nuxt: Nuxt) {
|
|||||||
addWebpackPlugin(ImportProtectionPlugin.webpack(config))
|
addWebpackPlugin(ImportProtectionPlugin.webpack(config))
|
||||||
|
|
||||||
// Add unctx transform
|
// Add unctx transform
|
||||||
addVitePlugin(UnctxTransformPlugin(nuxt).vite({ sourcemap: nuxt.options.sourcemap }))
|
addVitePlugin(UnctxTransformPlugin(nuxt).vite({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
|
||||||
addWebpackPlugin(UnctxTransformPlugin(nuxt).webpack({ sourcemap: nuxt.options.sourcemap }))
|
addWebpackPlugin(UnctxTransformPlugin(nuxt).webpack({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
|
||||||
|
|
||||||
if (!nuxt.options.dev) {
|
if (!nuxt.options.dev) {
|
||||||
const removeFromServer = ['onBeforeMount', 'onMounted', 'onBeforeUpdate', 'onRenderTracked', 'onRenderTriggered', 'onActivated', 'onDeactivated', 'onBeforeUnmount']
|
const removeFromServer = ['onBeforeMount', 'onMounted', 'onBeforeUpdate', 'onRenderTracked', 'onRenderTriggered', 'onActivated', 'onDeactivated', 'onBeforeUnmount']
|
||||||
const removeFromClient = ['onServerPrefetch', 'onRenderTracked', 'onRenderTriggered']
|
const removeFromClient = ['onServerPrefetch', 'onRenderTracked', 'onRenderTriggered']
|
||||||
|
|
||||||
// Add tree-shaking optimisations for SSR - build time only
|
// Add tree-shaking optimisations for SSR - build time only
|
||||||
addVitePlugin(TreeShakePlugin.vite({ sourcemap: nuxt.options.sourcemap, treeShake: removeFromServer }), { client: false })
|
addVitePlugin(TreeShakePlugin.vite({ sourcemap: nuxt.options.sourcemap.server, treeShake: removeFromServer }), { client: false })
|
||||||
addVitePlugin(TreeShakePlugin.vite({ sourcemap: nuxt.options.sourcemap, treeShake: removeFromClient }), { server: false })
|
addVitePlugin(TreeShakePlugin.vite({ sourcemap: nuxt.options.sourcemap.client, treeShake: removeFromClient }), { server: false })
|
||||||
addWebpackPlugin(TreeShakePlugin.webpack({ sourcemap: nuxt.options.sourcemap, treeShake: removeFromServer }), { client: false })
|
addWebpackPlugin(TreeShakePlugin.webpack({ sourcemap: nuxt.options.sourcemap.server, treeShake: removeFromServer }), { client: false })
|
||||||
addWebpackPlugin(TreeShakePlugin.webpack({ sourcemap: nuxt.options.sourcemap, treeShake: removeFromClient }), { server: false })
|
addWebpackPlugin(TreeShakePlugin.webpack({ sourcemap: nuxt.options.sourcemap.client, treeShake: removeFromClient }), { server: false })
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: [Experimental] Avoid emitting assets when flag is enabled
|
// TODO: [Experimental] Avoid emitting assets when flag is enabled
|
||||||
|
@ -91,8 +91,8 @@ export default defineNuxtModule<Partial<ImportsOptions>>({
|
|||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
// Transform to inject imports in production mode
|
// Transform to inject imports in production mode
|
||||||
addVitePlugin(TransformPlugin.vite({ ctx, options, sourcemap: nuxt.options.sourcemap }))
|
addVitePlugin(TransformPlugin.vite({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
|
||||||
addWebpackPlugin(TransformPlugin.webpack({ ctx, options, sourcemap: nuxt.options.sourcemap }))
|
addWebpackPlugin(TransformPlugin.webpack({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
|
||||||
}
|
}
|
||||||
|
|
||||||
const regenerateImports = async () => {
|
const regenerateImports = async () => {
|
||||||
|
@ -88,7 +88,7 @@ export default defineNuxtModule({
|
|||||||
// Extract macros from pages
|
// Extract macros from pages
|
||||||
const macroOptions: TransformMacroPluginOptions = {
|
const macroOptions: TransformMacroPluginOptions = {
|
||||||
dev: nuxt.options.dev,
|
dev: nuxt.options.dev,
|
||||||
sourcemap: nuxt.options.sourcemap,
|
sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client,
|
||||||
macros: {
|
macros: {
|
||||||
definePageMeta: 'meta'
|
definePageMeta: 'meta'
|
||||||
}
|
}
|
||||||
|
@ -26,9 +26,20 @@ export default defineUntypedSchema({
|
|||||||
/**
|
/**
|
||||||
* Whether to generate sourcemaps.
|
* Whether to generate sourcemaps.
|
||||||
*
|
*
|
||||||
|
* @type {boolean | { server?: boolean, client?: boolean }}
|
||||||
* @version 3
|
* @version 3
|
||||||
*/
|
*/
|
||||||
sourcemap: true,
|
sourcemap: {
|
||||||
|
$resolve: (val, get) => {
|
||||||
|
if (typeof val === 'boolean') {
|
||||||
|
return { server: val, client: val }
|
||||||
|
}
|
||||||
|
return defu(val, {
|
||||||
|
server: true,
|
||||||
|
client: get('dev')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* Shared build configuration.
|
* Shared build configuration.
|
||||||
* @version 2
|
* @version 2
|
||||||
|
@ -26,6 +26,7 @@ export type NuxtConfigLayer = ConfigLayer<NuxtConfig & {
|
|||||||
|
|
||||||
/** Normalized Nuxt options available as `nuxt.options.*` */
|
/** Normalized Nuxt options available as `nuxt.options.*` */
|
||||||
export interface NuxtOptions extends ConfigSchema {
|
export interface NuxtOptions extends ConfigSchema {
|
||||||
|
sourcemap: Required<Exclude<ConfigSchema['sourcemap'], boolean>>
|
||||||
_layers: NuxtConfigLayer[]
|
_layers: NuxtConfigLayer[]
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -58,11 +59,11 @@ export interface ViteConfig extends ViteUserConfig {
|
|||||||
|
|
||||||
type RuntimeConfigNamespace = Record<string, any>
|
type RuntimeConfigNamespace = Record<string, any>
|
||||||
|
|
||||||
export interface PublicRuntimeConfig extends RuntimeConfigNamespace { }
|
export interface PublicRuntimeConfig extends RuntimeConfigNamespace {}
|
||||||
|
|
||||||
// TODO: remove before release of 3.0.0
|
// TODO: remove before release of 3.0.0
|
||||||
/** @deprecated use RuntimeConfig interface */
|
/** @deprecated use RuntimeConfig interface */
|
||||||
export interface PrivateRuntimeConfig extends RuntimeConfigNamespace { }
|
export interface PrivateRuntimeConfig extends RuntimeConfigNamespace {}
|
||||||
|
|
||||||
export interface RuntimeConfig extends PrivateRuntimeConfig, RuntimeConfigNamespace {
|
export interface RuntimeConfig extends PrivateRuntimeConfig, RuntimeConfigNamespace {
|
||||||
public: PublicRuntimeConfig
|
public: PublicRuntimeConfig
|
||||||
@ -85,4 +86,4 @@ export interface NuxtAppConfig {
|
|||||||
keepalive: boolean | KeepAliveProps
|
keepalive: boolean | KeepAliveProps
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface AppConfig { }
|
export interface AppConfig {}
|
||||||
|
@ -51,6 +51,7 @@ export async function buildClient (ctx: ViteBuildContext) {
|
|||||||
dedupe: ['vue']
|
dedupe: ['vue']
|
||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
|
sourcemap: ctx.nuxt.options.sourcemap.client,
|
||||||
manifest: true,
|
manifest: true,
|
||||||
outDir: resolve(ctx.nuxt.options.buildDir, 'dist/client'),
|
outDir: resolve(ctx.nuxt.options.buildDir, 'dist/client'),
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
|
@ -81,6 +81,7 @@ export async function buildServer (ctx: ViteBuildContext) {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
|
sourcemap: ctx.nuxt.options.sourcemap.server,
|
||||||
outDir: resolve(ctx.nuxt.options.buildDir, 'dist/server'),
|
outDir: resolve(ctx.nuxt.options.buildDir, 'dist/server'),
|
||||||
ssr: ctx.nuxt.options.ssr ?? true,
|
ssr: ctx.nuxt.options.ssr ?? true,
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
|
@ -59,7 +59,7 @@ export async function bundle (nuxt: Nuxt) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
composableKeysPlugin.vite({ sourcemap: nuxt.options.sourcemap, rootDir: nuxt.options.rootDir }),
|
composableKeysPlugin.vite({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client, rootDir: nuxt.options.rootDir }),
|
||||||
replace({
|
replace({
|
||||||
...Object.fromEntries([';', '(', '{', '}', ' ', '\t', '\n'].map(d => [`${d}global.`, `${d}globalThis.`])),
|
...Object.fromEntries([';', '(', '{', '}', ' ', '\t', '\n'].map(d => [`${d}global.`, `${d}globalThis.`])),
|
||||||
preventAssignment: true
|
preventAssignment: true
|
||||||
|
@ -22,11 +22,16 @@ export function client (ctx: WebpackConfigContext) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function clientDevtool (ctx: WebpackConfigContext) {
|
function clientDevtool (ctx: WebpackConfigContext) {
|
||||||
if (!ctx.isDev) {
|
if (!ctx.nuxt.options.sourcemap.client) {
|
||||||
ctx.config.devtool = false
|
ctx.config.devtool = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!ctx.isDev) {
|
||||||
|
ctx.config.devtool = 'source-map'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const scriptPolicy = getCspScriptPolicy(ctx)
|
const scriptPolicy = getCspScriptPolicy(ctx)
|
||||||
const noUnsafeEval = scriptPolicy && !scriptPolicy.includes('\'unsafe-eval\'')
|
const noUnsafeEval = scriptPolicy && !scriptPolicy.includes('\'unsafe-eval\'')
|
||||||
ctx.config.devtool = noUnsafeEval
|
ctx.config.devtool = noUnsafeEval
|
||||||
|
@ -27,7 +27,8 @@ function serverPreset (ctx: WebpackConfigContext) {
|
|||||||
const { config } = ctx
|
const { config } = ctx
|
||||||
|
|
||||||
config.output!.filename = 'server.mjs'
|
config.output!.filename = 'server.mjs'
|
||||||
config.devtool = 'cheap-module-source-map'
|
|
||||||
|
config.devtool = ctx.nuxt.options.sourcemap.server ? ctx.isDev ? 'cheap-module-source-map' : 'source-map' : false
|
||||||
|
|
||||||
config.optimization = {
|
config.optimization = {
|
||||||
splitChunks: false,
|
splitChunks: false,
|
||||||
|
@ -36,10 +36,10 @@ export async function bundle (nuxt: Nuxt) {
|
|||||||
// Configure compilers
|
// Configure compilers
|
||||||
const compilers = webpackConfigs.map((config) => {
|
const compilers = webpackConfigs.map((config) => {
|
||||||
config.plugins!.push(DynamicBasePlugin.webpack({
|
config.plugins!.push(DynamicBasePlugin.webpack({
|
||||||
sourcemap: nuxt.options.sourcemap
|
sourcemap: nuxt.options.sourcemap[config.name as 'client' | 'server']
|
||||||
}))
|
}))
|
||||||
config.plugins!.push(composableKeysPlugin.webpack({
|
config.plugins!.push(composableKeysPlugin.webpack({
|
||||||
sourcemap: nuxt.options.sourcemap,
|
sourcemap: nuxt.options.sourcemap[config.name as 'client' | 'server'],
|
||||||
rootDir: nuxt.options.rootDir
|
rootDir: nuxt.options.rootDir
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user