JS的减肥利器：Vite插件如何让你的网站飞起来

前端

2022-11-07 07:32:10

Vite-Plugin-Cdn-Import：提升 Web 性能的利器

前言

在当今快节奏的互联网时代，网站性能至关重要。一个加载迅速的网站不仅能提升用户体验，还能提高转化率，并降低跳出率。缩小 JavaScript 包的大小是提升网站性能的有效手段。

什么是 Vite？

Vite 是一款前端构建工具，旨在助你快速构建现代化 Web 应用程序。Vite 基于原生 ESM（原生 JavaScript 模块），无需编译器便能直接在浏览器中运行代码。这一特性使其速度极快，并能与各种框架和库无缝集成。

什么是 Vite 插件？

Vite 插件是扩展 Vite 功能的工具。它们能帮你执行各种任务，诸如：

预处理 CSS 和 JavaScript
压缩 JavaScript 和 CSS 文件
将图片和字体等资源转换为 base64 格式
从 CDN 引入库和框架

什么是 Vite-Plugin-Cdn-Import？

Vite-Plugin-Cdn-Import 是一个 Vite 插件，助力你移除 Vue、Vuex 和 Axios 等常用库，转而从 CDN 引入。这一操作能显著缩小 JavaScript 包的大小，提升网站性能和加载速度。

如何使用 Vite-Plugin-Cdn-Import？

安装

在你的 Vite 项目中安装 Vite-Plugin-Cdn-Import：

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

配置

在你的 vite.config.js 文件中添加如下配置：

import { defineConfig } from 'vite'
import cdnImport from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    cdnImport({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://unpkg.com/vue@3/dist/vue.global.prod.js'
        },
        {
          name: 'vuex',
          var: 'Vuex',
          path: 'https://unpkg.com/vuex@4/dist/vuex.global.prod.js'
        },
        {
          name: 'axios',
          var: 'axios',
          path: 'https://unpkg.com/axios@0.27.2/dist/axios.min.js'
        }
      ]
    })
  ]
})