cdn加速

cdn加速减小项目体积，提高加载速度。cdn加速一般使用第三方cdn服务，如jsDelivr、unpkg、cdnjs等。

为什么要使用cdn？因为可以使用内容分发网络，用户可以更快的打开网页，同时可以减小项目的体积，提高访问速度。

TIP

如果使用免费的cdn可能会不稳定，建议使用付费的cdn服务。到时候免费的cdn服务挂了，那你的项目也就挂了。

注意

引入cdn后，需要配置build.rollupOptions.external，告诉rollup不要打包对应的模块。否则项目体积不会减小的。

安装插件

bash

npm install vite-plugin-cdn-import --save-dev

npm install vite-plugin-cdn-import --save-dev

配置`vite.config.js`文件

// vite.config.js
import { defineConfig } from 'vite';
import importToCDN from 'vite-plugin-cdn-import';

export default defineConfig({
  plugins: [
    importToCDN({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js',  //选择对应版本
        },
         {
          name: 'axios',
          var: 'axios',
          path: 'https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js',
        },
      ],
    }),
  ],
  build: {
    rollupOptions: {
      external: ['vue', 'axios'], // 关键！告诉 Rollup 不要打包 vue
    },
  },
});

// vite.config.js
import { defineConfig } from 'vite';
import importToCDN from 'vite-plugin-cdn-import';

export default defineConfig({
  plugins: [
    importToCDN({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js',  //选择对应版本
        },
         {
          name: 'axios',
          var: 'axios',
          path: 'https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js',
        },
      ],
    }),
  ],
  build: {
    rollupOptions: {
      external: ['vue', 'axios'], // 关键！告诉 Rollup 不要打包 vue
    },
  },
});

补充

cdn加速不能使用按需加载，只能使用完整版（element UI）。另外vite-plugin-cdn-import插件提供了一些预设的npm包， react，react-dom，react-router-dom，antd，vue，vue2，vue-router，vue-router@3，moment，dayjs，axios，lodash；具体看文档。https://github.com/MMF-FE/vite-plugin-cdn-import

cdn加速 ​

安装插件 ​

配置vite.config.js文件 ​

补充 ​

cdn加速

安装插件

配置`vite.config.js`文件

补充