how `external` element-plus with cdn ?

baixiaoyu2997 commented 2 years ago

我用的是mjs,然后在vite external这一步就报错了，无法拆分这是我的配置文件：

import { defineNuxtConfig } from "nuxt";

const isProd = process.env.NODE_ENV === "production";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://unpkg.com/browse/element-plus@2.2.6/dist/index.full.min.mjs",
          type: "module",
        },
      ],
    },
  },
  // css
  css: ["element-plus/dist/index.css"],
  target: "static",
  components: true,
  // build
  build: {
    transpile: isProd ? ["element-plus"] : [],
  },
  experimental: {
    viteNode: true,
  },
  vite: {
    build: {
      rollupOptions: {
        external: ["element-plus"],
      },
    },
  },
});

控制台log:

 WARN  [Vue warn]: Unhandled error during execution of setup function                                                                                                                                                                  10:22:24
  at <ElButton class="y-button main__start" data-v-26e30a3a="" >

 ERROR  [nuxt] [request error] Cannot read properties of null (reading 'setupContext')                                                                                                                                                 10:22:24
  at getContext (./node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:6018:14)  
  at useSlots (./node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:6011:12)  
  at setup (./node_modules/.pnpm/element-plus@2.2.6/node_modules/element-plus/es/components/button/src/button4.mjs:25:19)  
  at callWithErrorHandling (./.nuxt/prerender/chunks/renderer.mjs:2654:23)  
  at setupStatefulComponent (./.nuxt/prerender/chunks/renderer.mjs:9548:30)  
  at setupComponent (./.nuxt/prerender/chunks/renderer.mjs:9503:12)  
  at renderComponentVNode (./.nuxt/prerender/chunks/renderer.mjs:12068:17)  
  at Object.ssrRenderComponent (./.nuxt/prerender/chunks/renderer.mjs:12504:12)  
  at _sfc_ssrRender$1 (./.nuxt/prerender/chunks/app/server.mjs:4087:32)  
  at renderComponentSubTree (./.nuxt/prerender/chunks/renderer.mjs:12149:13)

  ├─ / (2034ms) (Error: [500] Internal Server Error)

YunYouJun commented 2 years ago

I'm guessing button is imported on demand, and since there may be a lot of changes going through the compilation process, we don't have a way to use cdn at the same time.

baixiaoyu2997 commented 2 years ago

大佬，对于nuxt3有什么优化的建议吗？我现在是全量引入，manualChunks和external都报错，打包之后加上gzip也有260多kb,加载需要足足1秒

YunYouJun commented 2 years ago

如果使用的组件不多，可以按需引入，或者手动注册。

import {
  ElButton, ElForm, ElFormItem, ElIcon, ElInput, ElLoading, ElMenu, ElMenuItem, ElPagination, ElPopconfirm, ElTabPane, ElTable, ElTableColumn, ElTabs, ElTooltip,
} from 'element-plus'
import type { UserModule } from '~/types'

const components = [ElButton, ElForm, ElFormItem, ElIcon, ElInput, ElMenu, ElMenuItem, ElTabPane, ElTable, ElTableColumn, ElTabs, ElTooltip, ElPagination, ElPopconfirm, ElLoading]

export const install: UserModule = ({ app }) => {
  components.forEach(component => app.use(component))
  // app.use(ElementPlus)
}

不过我估计还是全量引入可以避免潜在的问题。

manualChunks 理论上是可行的，我不知道你所指的报错是什么。

其他我没有好的想法。

以及 nuxt3 我建议等待正式版发布再生产使用。

baixiaoyu2997 commented 2 years ago

十分感谢，我有时间试试

element-plus / element-plus-nuxt-starter

how `external` element-plus with cdn ? #37