vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

这篇具有很好参考价值的文章主要介绍了vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

使用vite-plugin-cdn-import

下载npm包

官方github:https://github.com/MMF-FE/vite-plugin-cdn-import

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

开发环境使用本地的npm包,cdn是打包时候才生效

在vite.config.ts中通过importToCDN引入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
import { visualizer } from 'rollup-plugin-visualizer';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    importToCDN({
      // prodUrl: 'https://cdn.jsdelivr.net/npm/{name}@{version}/{path}',
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: `https://unpkg.com/vue@3.2.45/dist/vue.global.js`,
          
        },
        {
          name: 'vue-demi',
          var: 'VueDemi',
          path: `https://unpkg.com/vue-demi@0.13.11`,
        },
        {
          name: 'vue-router',
          var: 'VueRouter',
          path: `https://unpkg.com/vue-router@4.1.6`,
        },
        {
          name: 'element-plus',
          var: 'ElementPlus',
          path: 'https://unpkg.com/element-plus@2.3.3/dist/index.full.js',
          // css: 'https://unpkg.com/element-plus@2.3.3/dist/index.css'
        },
      ],
    }),
  ],
  // build: {
  //   rollupOptions: {
  //     external: ['vue', 'vue-demi', 'element-plus'],
  //   },
  // }
})

注意事项:网上很多教程,还需要在buildrollupOptions添加对应的external,如上注释所示,其实是不需要的,vite-plugin-cdn-import插件会自动帮我们完成这部分工作。

CDN参数获取方式
  • name:npm包的名称

    可以到https://www.jsdelivr.com进行查询,以element-plus为例
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

  • var:组件(main.ts)引用的名称
    比如ElementPlus

    import ElementPlus from 'element-plus'
    app.use(ElementPlus)
    
  • path:cdn网站存储对应的js地址
    输入对应名称,会自动跳转到对应的js文件,复制粘贴,需要修改版本,和自己项目的package.json版本一致
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

    允许只写到版本,后面会自动补齐

    {
      name: 'vue-demi',
      var: 'VueDemi',
      path: `https://unpkg.com/vue-demi@0.13.11`,
    },
    
  • css:对应位置,参考上图element-plus
    需要注意的是,css可以使用本地的,使用本地的就不要添加css,使用远程cdn的就需要在打包前注释本地的,否则会出现样式重叠。
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

可用的CDN网址
name pordUrl
jsdelivr https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js(例子)
unpkg //unpkg.com/{name}@{version}/{path}
cdnjs //cdnjs.cloudflare.com/ajax/libs/{name}/{version}/{path}
打包并运行
  • 打包后dist/index.html中自动添加了cdn链接
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

  • 打包后放到nginx中运行,查看对应依赖的加载地址
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

  • 打包后查看包体积
    例如element-plus,已经被排除在外了
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

报错整理
  • 报错 TypeError: importToCDN is not a function
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)
  • 解决方法,修改import引入方式
    官方issues:https://github.com/MMF-FE/vite-plugin-cdn-import/issues/22
    // import importToCDN from "vite-plugin-cdn-import";
    import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
    

  • 报错 Uncaught TypeError: Cannot read properties of undefined (reading 'createElementVNode')
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)
    可以看到代码里用到了vue
  • 解决:将vue也通过cdn引入即可

  • 报错Uncaught ReferenceError: Vue is not defined
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)
    vue-router或某些组件需要依赖vue
  • 解决:将vue也通过cdn引入即可

  • 报错 Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
    vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

    参考1:https://github.com/MMF-FE/vite-plugin-cdn-import/issues/13
    参考2:https://github.com/MMF-FE/vite-plugin-cdn-import/issues/32
    参考3:https://blog.csdn.net/qq_51634332/article/details/126325740

  • 解决:importToCDN时在引入vue后添加vue-demi,已在vite.config.ts中给出,其他插件在vue-demi之后(顺序很重要)


  • vite-plugin-cdn-importunplugin-vue-componentsunplugin-auto-import不兼容
    参考:https://github.com/MMF-FE/vite-plugin-cdn-import/issues/13#issuecomment-1226897835
    使用importToCDN时,通过下面两个插件的组件不生效,需要在每个组件单独写import
    import AutoImport from "unplugin-auto-import/vite"
    import Components from 'unplugin-vue-components/vite';
    
  • 原因
    之所以使用 AutoImport 后就会有问题,是因为 unplugin-auto-import 的 enforce 为 post ,会最后才执行,导致通过 AutoImport 的注入的代码没有被此插件转换
  • 解决方法
    目前只能暂时不同时使用这两组插件,所以如果使用自动引入插件,这个插件不是最佳答案

直接按照下面这张方法是不行的,在vite.config.ts文件中,为importToCDN添加...扩展符,让它在其他所有插件之后再加载

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
import { visualizer } from 'rollup-plugin-visualizer';
import AutoImport from "unplugin-auto-import/vite"
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: "src/auto-import.d.ts",
    }),
    Components({
      //默认存放位置
      //dts: "src/components.d.ts",
    }),
    {
      ...importToCDN({
        // prodUrl: 'https://cdn.jsdelivr.net/npm/{name}@{version}/{path}',
        modules: [
          {
            name: 'vue',
            var: 'Vue',
            path: `https://unpkg.com/vue@3.2.45/dist/vue.global.js`,
          },
          ...
        ],
      }),
      enforce: 'post',
      apply: 'build',
    },
  ],
  // build: {
  //   outDir: 'dist', // 指定输出路径
  //   // minify: 'terser', // 混淆器,terser 构建后文件体积更小,'terser' | 'esbuild' ,默认为esbuild
  //   rollupOptions: {
  //     external: ['vue', 'vue-demi', 'element-plus'],
  //   },
  // }
})

使用rollup-plugin-external-globals(推荐)

为了解决上面的问题,externalGlobals是可以用上面的方法延迟加载的
参考1:https://github.com/ttk-cli/vue3-template/tree/test/cdn1
参考2:https://free_pan.gitee.io/freepan-blog

下载npm包
npm install -D rollup-plugin-external-globals
在vite.config.ts中引入
  1. 允许设置延迟加载
  2. rollupOptions需要设置external
import externalGlobals from 'rollup-plugin-external-globals'

const externalGlobalsObj = {
  vue: 'Vue',
  'vue-demi': 'VueDemi',
  'vue-router': 'VueRouter',
  'element-plus': 'ElementPlus',
}

export default defineConfig({
  plugins: [
    vue(),
    {
      ...externalGlobals(externalGlobalsObj),
      enforce: 'post',
      apply: 'build',
    },
  ],
  build: {
    outDir: 'dist', // 指定输出路径
    rollupOptions: {
      external: Object.keys(externalGlobalsObj),
    },
  }
})
手动在打包后的index添加CDN
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
    <script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-demi@0.13.11"></script>
    <script src="https://unpkg.com/vue-router@4.1.6"></script>
    <script src="https://unpkg.com/element-plus@2.3.3/dist/index.full.js"></script>
    <script type="module" crossorigin src="/assets/index-c24c670c.js"></script>
    <link rel="stylesheet" href="/assets/index-f757e912.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>
自动添加CDN

需要用到vite-plugin-html插件
github官方:https://github.com/vbenjs/vite-plugin-html
参考:https://segmentfault.com/q/1010000041958028

  • 安装
npm i vite-plugin-html -D
  • 在vite.config.ts中引入(完整配置文件内容)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
import { visualizer } from 'rollup-plugin-visualizer';
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
// 自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
import externalGlobals from 'rollup-plugin-external-globals'
import { createHtmlPlugin } from 'vite-plugin-html'

const cdn = {
  css: [],
  js: [
    'https://unpkg.com/vue@3.2.45/dist/vue.global.js',
    'https://unpkg.com/vue-demi@0.13.11',
    'https://unpkg.com/vue-router@4.1.6',
    'https://unpkg.com/element-plus@2.3.3/dist/index.full.js',
  ],
}

const externalGlobalsObj = {
  vue: 'Vue',
  'vue-demi': 'VueDemi',
  'vue-router': 'VueRouter',
  // pinia: 'Pinia',
  'element-plus': 'ElementPlus',
}

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';

  return {
    plugins: [
      vue(),
      AutoImport({
        //安装两行后,在组件中不用再导入ref,reactive等
        imports: ['vue', 'vue-router'],
        dts: "src/auto-import.d.ts",
        //element
      }),
      Components({
        //element
        //默认存放位置
        //dts: "src/components.d.ts",
      }),
      visualizer({
        open: true,  //注意这里要设置为true,否则无效
        gzipSize: true,  //从源代码中收集 gzip 大小并将其显示在图表中
        brotliSize: true, //从源代码中收集 brotli 大小并将其显示在图表中
        emitFile: true, //在打包完的dist,否则在项目目录下
        filename: "stats.html", //分析图生成的文件名
      }),
      createHtmlPlugin({
        inject: {
          data: {
            cdnCss: isProduction ? cdn.css : [],
            cdnJs: isProduction ? cdn.js : [],
          },
        },
      }),
      {
        ...externalGlobals(externalGlobalsObj),
        enforce: 'post',
        apply: 'build',
      },
    ],
    build: {
      outDir: 'dist', // 指定输出路径
      // minify: 'terser', // 混淆器,terser 构建后文件体积更小,'terser' | 'esbuild' ,默认为esbuild
      rollupOptions: {
        external: Object.keys(externalGlobalsObj),
      },
    }
  }
})
  • 在 index.html 中增加 EJS 标签

    需要注意的是:这个index.html不是打包后的,是项目的入口index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue + TS</title>
  <!-- 使用CDN的CSS文件 -->
  <% for (const i of cdnCss) { %>
  <link href="<%= i %>" rel="stylesheet" />
  <% } %>
  <!-- 使用CDN的JS文件 -->
  <% for (const i of cdnJs) { %>
  <script src="<%= i %>" defer></script>
  <% } %>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

环境变量:https://www.cnblogs.com/yayuya/p/17035869.html

  • 打包后的结果
vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

这样就不需要手动引入了,但是需要添加一个新的npm包,实际项目中可以自行选择是否添加

element-plus相关问题

使用cdn引入需要全局引入,不要使用AutoImport的按需引入,否则最后生成的包仍然会有本地的element-plus.js

按需引入和CDN只能选择其一进行打包优化

使用CDN则不使用resolvers: [ElementPlusResolver()],在main.ts全局引入element-plus即可

      AutoImport({
        //安装两行后,在组件中不用再导入ref,reactive等
        imports: ['vue', 'vue-router'],
        dts: "src/auto-import.d.ts",
        //element
        // resolvers: [ElementPlusResolver()],
      }),
      Components({
        //element
        //默认存放位置
        //dts: "src/components.d.ts",
        // resolvers: [ElementPlusResolver()],
      }),
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
app.use(ElementPlus)

使用CDN未必会加快速度,只能减小打包体积,因为对应js和css需要从远程地址读取

原文链接:http://guohaonan1.github.io/2023/04/12/vite-vue3-ts搭建项目八(打包性能优化三:使用CDN)/文章来源地址https://www.toymoban.com/news/detail-432962.html

到了这里,关于vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积

    CDN (Content Delivery Network)即内容分发网络,是一种通过在全球范围内分布式部署服务器来加速网络内容传输的技术。CDN加速的原理是,当用户请求访问某个资源时, CDN会根据用户的地理位置和网络状况,自动选择离用户最近的服务器来响应请求 。如果该服务器上已经缓存了

    2024年02月03日
    浏览(49)
  • vue3+ts+vite 搭建uniapp项目(微信小程序)

    模板下载: uniapp 官网通过vue-cli 命令行创建uniapp,参考uni-app官网,使用  npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 下载模板; 安装css预处理 sass: 项目终端输入: yarn add node-sass@^4.0.0 sass-loader@^10.0.1 sass (模板没有默认安装sass, 如果不安装直接使用会报错)  安装uni-ui组件

    2024年02月09日
    浏览(57)
  • vue3+vite+ts项目集成科大讯飞语音识别(项目搭建过程以及踩坑记录)

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源码可以找我免费领取 🔥 前端

    2023年04月09日
    浏览(47)
  • vue3+vite+ts项目搭建之后,vscode文件夹下红色波浪线问题

            搭建完vue3+vite+ts项目之后,用vscode打开项目,发现 .vue 文件和 main.ts 文件夹下都有红色破浪线(如下图所示)。几番周折终于解决了这个问题。 1. 解决.ts文件报错 报错原因:ts不识别.vue后缀的文件。 解决方式:创建脚手架的时候,项目的根目录下会生成一个en

    2024年02月04日
    浏览(50)
  • vite+vue3+ts+eslint+prettier+husky+lint-stated 项目搭建

    项目搭建 创建初始项目 Node.js 版本 14.18+,16+ npm create vite@latest my-vue-app --template vue-ts 添加eslint eslint 初始化 npm init @eslint/config eslint初始化脚本,按自己的要求选择相应的eslint 配置,以下是我选择的配置项 ✔ How would you like to use ESLint? · style ✔ What type of modules does your project

    2024年02月08日
    浏览(54)
  • 从0开始搭建一个vue3+vite+ts+pinia+element-plus的项目

    前言:vue3+ts+vite大家已经都开始用了,最近也在学习,基本上是零基础开始ts的学习,很多语法知识是边写边查,没有系统的学习ts。此处展示从零开始,搭建的一个框架,方便拿来即用! 其中框架选择vue,语言选择typeScript 项目启动成功以后如下所示: 为了方便日常工作中

    2024年02月06日
    浏览(62)
  • uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

    一、创建项目架构 首先使用官方提供的脚手架创建一个项目 在这里插入代码片 ,这里我创建的 vue3 + vite + ts 的项目: (如命令行创建失败,请直接访问 gitee下载模板) 二、下载依赖 启动 三、下载安装包 引入uni-ui src/package.json 文件配置easycom模式 引入uview-plus main.ts配置 u

    2024年02月13日
    浏览(59)
  • Vue3 - 解决 build / dev 打包运行时突然出现一堆 ts 相关的报错,强制关闭整个项目的 ts 代码语法校验和验证(webpack / vite 均可)

    无论您是 vite 还是 webpack,都可以 100% 去掉运行或打包时的 ts 语法验证。 本文 实现了在 vue3 + ts 开发中,关闭运行、打包部署命令时出现的各种 ts 校验报错,去掉对 ts 的验证, 有些朋友对 ts 不是很了解(所以在写代码时没注意一些语法),导致最终 build 打包时出现了很多

    2024年02月11日
    浏览(60)
  • electron+vue3全家桶+vite项目搭建【24】设置应用图标,打包文件的图标

    demo项目地址 在electron中,我们可以通过electron-builder的配置文件来设置打包后的应用图标 因为mac环境下的图标需要特殊格式,这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖 加入安装过程中卡在了 phantomjs-2.1.1-windows.zip的下载,可以直接去github上下载 这里我也放一

    2024年02月17日
    浏览(62)
  • Vue3项目(Vite+TS)使用Web Serial Api全记录

    之前写了一个vue+django的一个通过串口控制的上位机系统。但是实际生产中,不如部署到服务器上,这样可以更好的节约成本。但是这样就需要弄一个客户端来控制处理串口信息。那我就在想能不能通过网页直接拿到客户端的串口信息。所以问了万能的chatgpt,得到了以下答案

    2024年02月02日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包