vuejs / apollo

šŸš€ Apollo/GraphQL integration for VueJS
http://apollo.vuejs.org
MIT License
6.01k stars 521 forks source link

There are more than 200 kb after compilation #1493

Open guugg opened 1 year ago

guugg commented 1 year ago

Is your feature request related to a problem? Please describe.

I use vite to make a wordpress theme and use @vue/apollo-composable to get my article data. I followed the usage in the documentation to successfully get the list of articles.

Describe the solution you'd like

When I compiled using pnpm build, I found that the packaged JavaScript was as high as 232.82 kB ā”‚ gzip: 74.01 kB, of which gzip compressed a small part. According to the size limit report šŸ“¦ of apollographql/apollo-client, less than 50KB. But my import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'` has 145KB.

Describe alternatives you've considered

I see that it imports dist/index.js, and I use dist/index.js to find that it is wrong.

Additional context Add any other context or screenshots about the feature request here.

//app.js
import { createApp, h, provide } from 'vue'
import App from './app.vue'
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
import { DefaultApolloClient } from '@vue/apollo-composable'
<script>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag';
import { computed } from 'vue';
...
</script>
import { defineConfig } from 'vite'
import liveReload from 'vite-plugin-live-reload'
const { resolve } = require('path')
import vue from '@vitejs/plugin-vue';

export default defineConfig({

    // config
    root: '',
    base: process.env.NODE_ENV === 'development'
        ? '/'
        : '/wp-content/themes/funny/assets/',

    build: {
        // output dir for production build
        outDir: resolve(__dirname, './assets'),
        emptyOutDir: true,
        assetsDir: '',
        manifest: true,
        target: 'es2018',
        rollupOptions: {
            input: {
                app: resolve(__dirname + '/app.js'),
                vue: resolve(__dirname + '/src/main.js')
            },
        },
    },
    plugins: [
        vue(),
        liveReload(
            __dirname + '/**/*.php',
            __dirname + '/**/**/*.{vue,js,ts,jsx,tsx}',
            )
    ],
    //
    optimizeDeps: {
        include: ['vue', 'vue-router'],
    },

})
websitevirtuoso commented 1 year ago

Do you understand that this repo is small wrapper around apollo lib.

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'

You should create the same issue in repo of apollo. Owner of this repo just simplify using it in vuejs.