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 ?
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