Is there a way to reduce nuxt entry point bundle size?

Question

After upgrading my nuxt-cli version to 2.15.3 i've notice that pages chunks size was reduced and all node_modules installed packages are now being bundled into the app.js which is getting huge now.

Here below you can see my nuxt.config.js

export default {
  ssr: false,
  target: "static",
  geneate: {
    fallback: true,
  },

  css: ["@/assets/sass/app.scss"],

  plugins: [
    "@/store/plugins/permissionsPlugin",
    "@/store/plugins/authPlugin",
    "@/plugins/casl-abilities",
    "@/plugins/moment",
    "@/plugins/v-select",
    "@/plugins/vue-lazyload",
    "@/plugins/vue-mq",
    { src: "@/plugins/vue-infinite-scroll", mode: "client" },
    { src: "@/plugins/formatWebpSuppoted", ssr: false },
    { src: "@/plugins/ga.js", mode: "client" },
    { src: "@/plugins/mapbox", mode: "client" },
  ],

  bundleRenderer: {
    shouldPreload: (file, type) => {
      return ["script", "style", "font"].includes(type)
    },
  },
  components: true,

  modules: [
    // Doc: https://bootstrap-vue.js.org
    "bootstrap-vue/nuxt",
    // Doc: https://github.com/Developmint/nuxt-purgecss
    // 'nuxt-purgecss',
    // Doc: https://pwa.nuxtjs.org/
    "@nuxtjs/pwa",
    // Doc: https://github.com/nuxt-community/dotenv-module
    "@nuxtjs/dotenv",
    // Doc: https://github.com/nuxt-community/apollo-module
    "@nuxtjs/apollo",
    // Doc: https://nuxtjs.org/faq/http-proxy
    "@nuxtjs/proxy",
    // Doc: https://github.com/Developmint/nuxt-webfontloader
    "nuxt-webfontloader",
    // Doc: https://github.com/frenchrabbit/nuxt-precompress
   "nuxt-precompress",
   // Doc : https://www.npmjs.com/package/vue-social-sharing
   "vue-social-sharing/nuxt",
  ],
  bootstrapVue: {
    bootstrapCSS: false, // Or `css: false`
    bootstrapVueCSS: false, // Or `bvCSS: false`
    componentPlugins: [
      "LayoutPlugin",
      "DropdownPlugin",
      "FormPlugin",
      "FormGroupPlugin",
      "FormInputPlugin",
      "FormTextareaPlugin",
      "FormCheckboxPlugin",
      "FormRadioPlugin",
      "FormSelectPlugin",
      "ButtonPlugin",
      "ButtonGroupPlugin",
      "SpinnerPlugin",
      "VBPopoverPlugin",
      "ToastPlugin",
      "CardPlugin",
      "AlertPlugin",
      "PaginationPlugin",
      "BadgePlugin",
      "PopoverPlugin",
      "CollapsePlugin",
    ],
  },
  build: {
    transpile: ["bootstrap-vue"],
    analyze: true,
    components: true,
    babel: {
      presets({ isServer }) {
        return [
          [
            require.resolve("@nuxt/babel-preset-app")
            {
              buildTarget: isServer ? "server" : "client",
              corejs: { version: 3 },
            },
          ],
        ]
      },
    },
    cssSourceMap: false,
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
    optimization: {
      runtimeChunk: true,
      splitChunks: {
        chunks: "async",
      },
    },
    splitChunks: {
      pages: true,
      vendor: false,
      commons: false,
      runtime: false,
      layouts: true,
      name: true,
    },
  },
}

Can you help me on dividing main entry chunks into pages chunks ?

Answer 1

The tree shaking issue was a regression introduced in @nuxt/component for wrongly importing global entry.

This has just been fixed in 2.1.5. You can get update by recreating yarn.lock/package-lock.json

Source: https://github.com/nuxt/nuxt.js/issues/9084#issuecomment-814431900

Answer 2

All the plugins are loaded before the Vue instance is ever created and available globally. One solution would be to load any of those packages in specific components rather than on a global level if you don't need them everywhere.

Not sure what can be optimized beyond this.

---

Also, from this page: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-plugins

ssr: false will be adapted to mode: 'client' and deprecated in next major release

So, you should not have any ssr in your plugins array.

Answer 3

You can set a max size for your chunks. Webpack will try to split all chunks according to this max size (244Kb for this example):

    optimization: {
      minimize: true,
      splitChunks: {
        chunks: 'all',
        automaticNameDelimiter: '.',
        name: true,
        maxSize: 244000,
        cacheGroups: {
          vendor: {
            name: 'node_vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'all',
            maxSize: 244000
          }
        }
      }
    }