有没有办法减少 nuxt 入口点包的大小?

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

将我的 nuxt-cli 版本升级到 2.15.3 后,我注意到页面块的大小减小了,所有 node_modules 安装的包现在都被捆绑到 app.js 中,它变得越来越大现在。

在下面你可以看到我的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,
    },
  },
}

你能帮我把主条目块分成页面块吗?

所有插件都已加载 Vue 实例创建并全局可用之前。一种解决方案是在特定组件中加载这些包中的任何一个,而不是在全局级别加载,如果您不需要它们的话。

不确定除此之外还可以优化什么。


此外,来自此页面:https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-plugins

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

因此,您的 plugins 数组中不应包含任何 ssr

tree shaking 问题是@nuxt/component 中引入的错误导入全局条目的回归。

这刚刚在 2.1.5 中得到修复。您可以通过重新创建 yarn.lock/package-lock.json

来获取更新

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

您可以为块设置最大大小。 Webpack 将尝试根据此最大大小(本例为 244Kb)拆分所有块:

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