feat: allow client-side sourcemaps in production (#7313)

This commit is contained in:
Daniel Roe 2022-09-07 12:32:10 +01:00 committed by GitHub
parent ec210190d1
commit eab4706614
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 52 additions and 29 deletions

View File

@ -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
})) }))
} }

View File

@ -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

View File

@ -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

View File

@ -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 () => {

View File

@ -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'
} }

View File

@ -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

View File

@ -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 {}

View File

@ -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: {

View File

@ -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: {

View File

@ -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

View File

@ -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

View File

@ -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,

View File

@ -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
})) }))