nuxt: Don't load script when use optimization.splitChunks

Hi.

Versions

  • nuxt: 2.14.11
  • node: v14.15.3 and

When i use optimization.splitChunks - scripts in client don’t work.

My nuxt.config.js:

import i18n from './configs/i18n';
import buildConfig from './configs/build-config';
import plugins from './configs/plugins';
import modules from './configs/modules';
import createAxiosUrl from './configs/axios';

const isDev = process.env.NODE_ENV === 'develop';

export default {
  telemetry: true,
  mode: 'universal',
  ...(!isDev && {
    modern: 'client',
  }),
  env: {
    ENV_STAGE: process.env.ENV_STAGE,
  },
  /*
  ** Headers of the page
  ** process.env.npm_package_name
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: 'https://ssfront.s3.eu-west-1.amazonaws.com/bdTjXGyv26XVOUClDHSsctIfPMHghTUN.vnd.microsoft.icon' },
    ],
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
    '~/style/font-awesome.scss',
    '~/style/global.scss',
    'swiper/dist/css/swiper.css',
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '~/plugins/axios.js' },
    { src: '~/plugins/vue-notifications.js', ssr: false },
    { src: '~/plugins/swiper.js', ssr: false },
    { src: '~/plugins/vee-validate.js', ssr: false },
    { src: '~/plugins/vue-lazy-load.js', ssr: false },
    { src: '~/plugins/router.js', ssr: false },
    { src: '~/plugins/i18n.js' },
    { src: '~/plugins/link-images.js', ssr: true },
    { src: '~/plugins/vue-datepicker.js', ssr: false },
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/device',
    'cookie-universal-nuxt',
    ['nuxt-gmaps', {
      key: 'AIzaSyD1oiXaz7oErI7gcjcdSN4ejuPhoFaKlFA',
    }],
    'nuxt-i18n',
    '@nuxtjs/sentry',
  ],
  sentry: {
    dsn: 'https://ba03badb1883424bae045ac24865e66e@sentry.omnismain.com/9',
    disabled: isDev,
  },
  i18n: {
    locales: [
      {
        name: 'English',
        icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/uk.png',
        iso: 'en-GB',
        code: 'en',
        countryCode: 'GB',
        currency: 'gbp',
      },
      {
        name: 'German',
        icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/de.png',
        iso: 'de-DE',
        code: 'de',
        countryCode: 'DE',
        currency: 'eur',
      },
      {
        name: '中国 (Chinese)',
        icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/cn.png',
        iso: 'zh-CN',
        code: 'cn',
        countryCode: 'CN',
        currency: 'cny',
      },
      {
        name: 'Canadian',
        icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/ca.png',
        iso: 'en-CA',
        code: 'ca',
        countryCode: 'CA',
        currency: 'cad',
      },
      {
        name: 'Australian',
        icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/au.png',
        iso: 'en-AU',
        code: 'au',
        countryCode: 'AU',
        currency: 'aud',
      },
      {
        name: 'Espanol',
        icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/es.png',
        iso: 'es-ES',
        code: 'es',
        countryCode: 'ES',
        currency: 'eur',
      },
      {
        name: 'American',
        icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/us.png',
        iso: 'en-US',
        code: 'us',
        countryCode: 'US',
        currency: 'usd',
      },
    ],
    defaultLocale: 'en',
    loadLanguagesAsync: true,
    strategy: 'prefix_except_default',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'lang',
      fallbackLocale: 'en',
    },
    vueI18n: {
      fallbackLocale: false,
    },
    vuex: {
      moduleName: 'i18n',
      syncLocale: true,
      syncMessages: false,
      syncRouteParams: true,
    },
  },
  publicRuntimeConfig: {
    axios: {
      browserBaseURL: createAxiosUrl(isDev, process.env.ENV_STAGE),
    },
  },
  privateRuntimeConfig: {
    axios: {
      baseURL: createAxiosUrl(isDev, process.env.ENV_STAGE),
    },
  },
  /*
  ** Build configuration
  */
  build: {
    optimizeCss: true,
    minimize: true,
    // analyze: true,
    cssSourceMap: true,
    ...(!isDev && {
      extractCSS: true,
    }),
    ...(!isDev && {
      vendor: [
        'bootstrap-vue/nuxt',
        '@nuxtjs/axios',
        '@nuxtjs/pwa',
        '@nuxtjs/device',
        'cookie-universal-nuxt',
        'nuxt-i18n',
        'nuxt-gmaps',
      ],
    }),
    ...(!isDev && {
      html: {
        minify: {
          collapseBooleanAttributes: true,
          decodeEntities: true,
          minifyCSS: true,
          minifyJS: true,
          processConditionalComments: true,
          removeEmptyAttributes: true,
          removeRedundantAttributes: true,
          trimCustomFragments: true,
          useShortDoctype: true,
        },
      },
    }),
    ...(!isDev && {
      vendor: [
        'bootstrap-vue/nuxt',
        '@nuxtjs/axios',
        '@nuxtjs/pwa',
        '@nuxtjs/device',
        'cookie-universal-nuxt',
        'nuxt-i18n',
        'nuxt-gmaps',
      ],
    }),
    transpile: ['vee-validate/dist/rules'],
    filenames: {
      app: ({ isDev }) => (isDev ? '[name].js' : '[name].[contenthash].js'),
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[name].[contenthash].js'),
      css: ({ isDev }) => (isDev ? '[name].css' : '[name].[contenthash].css'),
    },
    ...(!isDev && {
      optimization: {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          automaticNameDelimiter: '.',
          name: true,
          maxSize: 256000,
        },
      },
    }),
  },
  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => ['script', 'style', 'font'].includes(type),
    },
  },
  router: {
    linkActiveClass: 'active-link',
    mode: 'history',
    middleware: ['user'],
  },
};

for see result you can go to - https://ssfront-dev.ssyii.com/ , in my local have same problem.

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Comments: 20 (6 by maintainers)

Most upvoted comments

@lwswnnscrm Looking into this, the issue is that there isn’t a 1:1 correlation between your modern/client files, which leads to trouble given how Nuxt has implemented the client modern build. A workaround for now is to remove the maxSize constraint in splitChunks:

  ...(!isDev && {
    optimization: {
      runtimeChunk: "single",
      splitChunks: {
        chunks: "all",
        automaticNameDelimiter: ".",
        name: true,
-       maxSize: 256000
      }
    }
  }),

@mparnian60 @danielroe did you ever figure out a way for maxSize and modern to coexist?

Hi @danielroe, i’m having a similar issue to what @lwswnnscrm has reported. when i use the modern property to generate my website in static target, none of my toggles or modals work when i deploy it statically but it’s ok in SPA version.

i did what you’ve mentioned and removed optimization.splitChunks.maxSize from my nuxt.config and it solved the issue but now i get a big chunk of javascript file. as theer is no more maxSize logic, i get 2 big chunk of .js files rather than having 20 or so.

is there any other way to fix this issue and still keep the optimization.splitChunks.maxSize. do you think the number of size makes any difference. mean using a bigger or smaller size?