如何程序化控制Nuxt.js应用打包，实现单JS单CSS并合并脚本？

Hey there! Let's walk through how to configure your Nuxt app to meet both of your requirements: bundling into a single JS/CSS file in production, and merging that external Facebook SDK script into your main bundle. Here's the step-by-step setup:

Step 1: Configure Build for Single JS/CSS Output #

First, update your nuxt.config.js build section to disable code splitting and ensure all assets are bundled into single files:

module.exports = {
  build: {
    // Disable code splitting to bundle all JS into one file
    splitChunks: false,
    // Extract all CSS into a single file (enabled by default in prod, but explicit is better)
    extractCSS: true,
    // Optional: Disable filename hashing if you don't need cache-busting filenames
    filenameHashing: false,
    // Disable runtime chunk to avoid extra runtime.js file
    optimization: {
      runtimeChunk: false
    },
    // We'll add webpack config for merging external scripts here next
    extend(config, { isDev, isClient }) {
      // Add webpack rules to handle the external script
      if (isClient && !isDev) {
        // If you've downloaded the Facebook SDK locally (recommended)
        config.entry.app.push('./static/js/facebook-sdk.js');
      }
    }
  },
  // ... rest of your config
}

Step 2: Merge External Script into Bundle #

The external script in your head.script won't be bundled automatically because it's loaded via a URL in the HTML. To merge it into your bundle:

1. Download the Facebook SDK locally:

   • Visit https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2&appId=YOUR_APP_ID&autoLogAppEvents=1, save the content to static/js/facebook-sdk.js in your project.
   • Note: Make sure to replace YOUR_APP_ID with your actual Facebook app ID in the downloaded file.

2. Remove the script from head:

   • Since we're bundling it now, you don't need the external script tag in your head config anymore. Delete this part:

     script: [
       { rel: 'preload', src: `https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2&appId=${facebookAppId}&autoLogAppEvents=1` }
     ]
     

3. Add the local script to webpack entry:

   • We already added this in the build.extend section above—this tells webpack to include the local SDK file in your main app bundle.

Alternative: Bundle Directly from URL (Not Recommended) #

If you prefer not to download the file locally, you can use a webpack plugin like webpack-external-import to bundle the remote script, but this is less reliable (depends on external availability during build). For production stability, local is better.

Final Modified nuxt.config.js #

Here's the complete config with all changes applied:

const facebookAppId = 'YOUR_ACTUAL_APP_ID'; // Make sure this is defined

module.exports = {
  build: {
    splitChunks: false,
    extractCSS: true,
    filenameHashing: false,
    optimization: {
      runtimeChunk: false
    },
    extend(config, { isDev, isClient }) {
      if (isClient && !isDev) {
        // Add local Facebook SDK to app bundle
        config.entry.app.push('./static/js/facebook-sdk.js');
      }
    }
  },
  srcDir: 'app/view/',
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  head: {
    meta: [ ]
    // Removed the external script tag since we're bundling it
  },
  axios: { port: 3010 },
  router: { middleware: [ /*my middlewares*/ ] }
};

Key Notes #

• Production Only: The webpack entry change is wrapped in !isDev so it only applies in production. In development, you might still want to load the external script for faster hot-reloading.
• Cache Busting: If you keep filenameHashing: true, your bundled files will have unique hash suffixes (like app.abc123.js), which helps with browser caching. Disable it only if you need fixed filenames.
• Facebook SDK Initialization: Make sure the SDK initializes correctly after bundling—you might need to wrap its usage in a plugin or ensure it runs after the bundle loads.

内容的提问来源于stack exchange，提问作者Rouz