vue.jsnuxt.jswebpack-4

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


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 ?


Solution

  • 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