冬天吃雪糕的博客

Vite 使用 cdn 加载库文件

冬天吃雪糕2022年6月16日
大约 3 分钟

Vite 使用 cdn 加载库文件

创建项目

新建一个 vite 项目，并且完整引入 antd 。

npm create vite vite-build-demo
cd vite-build-demo
npm i
npm i ant-design-vue

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)

app.use(Antd)

app.mount('#app')

<template>
<div>
  <a-space>
    <a-button type="primary">Primary Button</a-button>
    <a-button>Default Button</a-button>
    <a-button type="dashed">Dashed Button</a-button>
    <a-button type="danger">Danger Button</a-button>
    <a-button type="text">Text Button</a-button>
    <a-button type="link">Link Button</a-button>
  </a-space>
  
  <div>
    <a-button type="primary" @click="count++">count is: {{ count }}</a-button>
  </div>
  
  </div>
</template>

npm run dev

直接打包

npm run build

结果如下

dist/assets/logo.03d6d6da.png    6.69 KiB
dist/index.html                  0.42 KiB
dist/assets/index.6eaa3366.css   607.21 KiB / gzip: 69.10 KiB
dist/assets/index.51c34651.js    1113.16 KiB / gzip: 345.44 KiB

明显可以看到index.js和index.css过大，这是因为把ant-design-vue的所有组件代码和样式文件都打包进去了。

引入分析工具——rollup-plugin-visualizer

npm i -D rollup-plugin-visualizer

修改vite.config.ts添加配置

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import visualizer from 'rollup-plugin-visualizer'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    visualizer()
  ]
})



 





 


再次执行打包后，会在项目根目录生成stats.html文件，可以快速查看每个包在最终打包体积中的占比。

使用 rollup-plugin-external-globals 插件

接下来通过配置rollup（vite使用rollup来打包）来实现 antd 使用 cdn 加载。

根据这篇文章open in new window，不能直接配置rollup的output.globals选项，需要使用插件。

安装插件

npm i -D rollup-plugin-external-globals

添加配置

配置vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import visualizer from 'rollup-plugin-visualizer'
import externalGlobals from 'rollup-plugin-external-globals'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    visualizer()
  ],
  build: {
    rollupOptions: {
      external: ['ant-design-vue'],
      plugins: [
        externalGlobals({
          "ant-design-vue": "antd",
        }),
      ],
    },
  },
})




 







 
 
 
 
 
 
 
 
 
 

参数对解释：

  • ant-design-vue - 这里需要和external对应，这个字符串就是(import xxx from aaa)中的aaa，也就是包的名字

  • antd - 这个是js文件导出的全局变量的名字，比如说vue就是Vue，ant-design-vue就是antd，查看源码或者参考作者文档可以获得

引入静态文件

删除main.ts中原来 import 的样式

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
// - import 'ant-design-vue/dist/antd.css'

const app = createApp(App)

app.use(Antd)

app.mount('#app')



 






修改根目录下的index.html，引入cdn文件

<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@3.2.4/dist/antd.min.css">
<script src="https://unpkg.com/dayjs@1.11.2/dayjs.min.js"></script>
<script src="https://unpkg.com/ant-design-vue@3.2.4/dist/antd.min.js"></script>

提示

根据antdv的官方文档open in new window，引入antd.js前需要自行引入dayjs。

重新打包

npm run build

结果如下

dist/assets/logo.03d6d6da.png    6.69 KiB
dist/index.html                  0.72 KiB
dist/assets/index.68b37ec5.css   0.20 KiB / gzip: 0.17 KiB
dist/assets/index.6c1a0271.js    52.91 KiB / gzip: 21.24 KiB

可以看到作为一个demo，index.js还是过大了。

通过查看分析文件stats.html，可以看到绝大部分都是vue占用的体积。

参照上面的步骤，将vue也通过cdn的方式引入。

最终效果

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import visualizer from 'rollup-plugin-visualizer'
import externalGlobals from 'rollup-plugin-external-globals'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    visualizer()
  ],
  build: {
    rollupOptions: {
      external: ['vue', 'ant-design-vue'],
      plugins: [
        externalGlobals({
          "vue": "Vue",
          "ant-design-vue": "antd",
        }),
      ],
    },
  },
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@3.2.4/dist/antd.min.css">
    <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.2/dayjs.min.js"></script>
    <script src="https://unpkg.com/ant-design-vue@3.2.4/dist/antd.min.js"></script>
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

打包后大小如下：

dist/assets/logo.03d6d6da.png    6.69 KiB
dist/index.html                  0.72 KiB
dist/assets/index.c45942b9.js    2.26 KiB / gzip: 0.95 KiB
dist/assets/index.68b37ec5.css   0.20 KiB / gzip: 0.17 KiB

打包速度和打包后文件大小都有了大幅提升。

使用npm run preview预览打包结果，效果与开发时运行的一致。

上次编辑于: 2022/8/23 06:32:29
贡献者: WingSnow
Copyright © 2022 冬天吃雪糕