Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

There are more than 200 kb after compilation #1493

Open
guugg opened this issue Jul 28, 2023 · 1 comment
Open

There are more than 200 kb after compilation #1493

guugg opened this issue Jul 28, 2023 · 1 comment

Comments

@guugg
Copy link

guugg commented Jul 28, 2023

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants