nuxt.js - 有没有办法减少 nuxt 入口点包的大小？

Question

将我的 nuxt-cli 版本升级到 2.15.3 后，我注意到页面 block 的大小减小了，所有 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,
    },
  },
}

你能帮我把主要入口 block 分成页面 block 吗？

Answer 1

所有插件都在 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。