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

user_7222555 0
Viewed 3104

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 you can see webpack analyser results

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 ?

webpack-4 nuxt.js
3 Answers

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.

user_88165850
user_72225550

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
          }
        }
      }
    }
user_166341830
Related