vite配置cdn优化打包体积

这篇具有很好参考价值的文章主要介绍了vite配置cdn优化打包体积。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

大家都知道前端性能优化的方法,cdn外部引入的方法可以使项目打包后体积大大缩小,所以是前端性能优化方面非常推荐的方法之一。

本文关于vite2 vue3 + Ts 项目如何cdn引入element plus做一个简单教程,我们可以通过两种方式引入配置cdn。

由于vite的核心基于rollupwebpack不同,所以cdn引入方式也不同具体rollup配置项可以阅读vite官网。

本文参考文献:
rollup
plugins : https://rollupjs.org/guide/en/#plugins
external :https://rollupjs.org/guide/en/#external
rollup-plugin-external-globals : https://github.com/eight04/rollup-plugin-external-globals
rollup-plugin-visualizer : https://github.com/btd/rollup-plugin-visualizer
vite
vite-plugin-cdn-import:https://github.com/mmf-fe/vite-plugin-cdn-import


一、版本确认

vite配置cdn优化打包体积

注意:版本很重要,引入cdn时建议使用当前版本号的url,以防版本更新导致项目部署后失效。

二、使用步骤

1.rollup-plugin-visualizer打包体积可视化面板

rollup打包体积分析,方便我们直观看到性能优化前后打包的体积差异

首先下载依赖
npm install --save-dev rollup-plugin-visualizer

引入到vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 插件
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
	plugins: [vue(), visualizer({ open: true })],
})

然后我们在cmd输入 npm run build 即可弹出一个打包体积可视化面板
这是我的项目体积,我们可以发现绿框中 element-plus占用的体积将近1/3,非常的大

vite配置cdn优化打包体积

而且哪怕按需引入,这个打包体积只会减少一点点,所以推荐性能优化时我们使用cdn引入的方式优化打包后的项目体积

2.配置cdn方法

这里有两种方法可以配置,我推荐大家使用前者配置,因为第二种步骤更多,而且ts中声明文件也有问题要重新配置。


第一种方法: vite-plugin-cdn-import

具体使用方法可以查看github vite-plugin-cdn-import:https://github.com/mmf-fe/vite-plugin-cdn-import

首先下载依赖
npm install vite-plugin-cdn-import --save-dev

引入到vite.config.ts
注意:版本号很重要,如果版本有误差可能导致打包部署到服务器后,项目无法运行!!!

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 插件
import { visualizer } from 'rollup-plugin-visualizer';
import importToCDN from 'vite-plugin-cdn-import'

export default defineConfig({
	plugins: [
		vue(), 
		visualizer({ open: true }),
		importToCDN({
		    modules: [
		      {
		        name:"vue",
		        var:"Vue",
		        path:"https://unpkg.com/vue@3.2.31"
		      },
		      {
		        name:"element-plus",
		        var:"ElementPlus",
		        path:"https://unpkg.com/element-plus@2.1.9",
		        css:"https://unpkg.com/element-plus/dist/index.css"
		      }
		    ]
		})],
})

到mian.ts中引入

注意:一定不要忘记在main.ts中引入ElementPlus,否则ts会报错,vite-plugin-cdn-import 插件应该会自动帮我们把ElementPlus通过cdn引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

打包
npm run bulid
打包后再看可视化面板RollUp Visualizer可以发现Elementplus已经不占用打包后的体积了


第二种方法: rollup-plugin-external-globals

首先在index.html的head标签中引入link外链

<!-- Import Vue 3 -->
<head>
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />

  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
<head>

下载依赖
npm install -D rollup-plugin-external-globals

引入到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'

export default defineConfig({
	plugins: [
		vue(), 
		visualizer({ open: true }),
		})],
	build: {
	    rollupOptions: {
	      external: ["vue", "element-plus"],
	      plugins: [
	        externalGlobals({
	          vue: "Vue",
	          "element-plus": "ElementPlus"
	        })
	      ]
	    }
	  },
})

这时候你会发现引入错误
无法找到模块“rollup-plugin-external-globals”的声明文件。“/node_modules/rollup-plugin-external-globals/index.js”隐式拥有 “any” 类型。
尝试使用 npm i --save-dev @types/rollup-plugin-external-globals (如果存在),或者添加一个包含 declare module 'rollup-plugin-external-globals'; 的新声明(.d.ts)文件

我们在项目根目录新建一个env.d.ts
输入这段代码声明一个ts文件

declare module 'rollup-plugin-external-globals';

到mian.ts中引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

打包
npm run bulid
打包后再看可视化面板RollUp Visualizer可以发现Elementplus已经不占用打包后的体积了


总结

这次带来了两种方法打包Element plus ,同样的只要有cdn链接,我们就可以用这两种方式进行引入

vite配置cdn优化打包体积文章来源地址https://www.toymoban.com/news/detail-446767.html

到了这里,关于vite配置cdn优化打包体积的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vite打包配置以及性能优化

    首先该安装的插件,你要安装一下吧 这三个是基本的插件,其他优化的插件下面会介绍到 vite.config.ts文件中 这是最基本的配置,当然,可以上线,但仍然有很多待优化的地方 性能优化无非就是减小打包后体积;减小http请求;加速渲染; 首先安装一个打包体积分析的插件:

    2024年02月12日
    浏览(33)
  • Webpack项目学习:Vue-cli(脚手架)-优化配置 -ui库element-plus+减小打包体积 -按需加载+自定义主题+优化

    安装 全部引入,在入口文件main.js  启动:npm start  按需引入 需要插件快速开始 | Element Plus (gitee.io)     更改默认配置 主题 | Element Plus (gitee.io)    如果有模块没有安装 ,安装一下即可 优化 关闭性能分析 文件单独打包 做缓存-

    2024年02月08日
    浏览(69)
  • 前端项目优化:减少webpack打包体积

    最近自己买个云服务器,把之前搭建的webpack-vue项目进行了部署,现在项目已经成功了。 项目地址:GitHub - wjt162286793/webpack----vue: 使用webpack配置一个脚手架,对照文档,纯手打  线上地址:IAM架构资产管理系统 不过是没有经过任何优化的,虽然项目体积和业务不是很复杂,但是实际上打

    2024年01月21日
    浏览(52)
  • webpack/vue-cli构建速度和打包体积优化

    webpack-bundle-analyzer 可以生成代码分析报告,可以直观地分析打包出的文件有哪些,及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等 npm i -D webpackbar webpack-bundle-analyzer javascript 复制代码 const { BundleAnalyzerPlugin } = require(\\\'webpack-bundle-analyzer\\\'); ​ module.e

    2024年01月19日
    浏览(57)
  • Vue打包优化篇-CDN加速

    在没有使用cdn加速之前打包后数据如下,可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大,假设再来很多依赖项是不是更大,同时也会影响单页面应用首屏加载速度,所以这里采用一种打包优化手段之一来分离依赖项。 首先项目中需要使用依

    2023年04月08日
    浏览(31)
  • vite配置CDN和文件压缩

    例子,vue3导入element-plus 打包大小   1.加载插件cdn-import 2.配置vite vite.config.js 3.更改element-plus导入 打包大小   vite 还可以打包时对文件进行压缩 1.加载compression插件 2.配置vite vite.config.js 打包结果   同时记得开启nginx 压缩算法的功能

    2024年02月11日
    浏览(42)
  • 前端性能优化——包体积压缩插件,打包速度提升插件,提升浏览器响应的速率模式

    –其他的优化可以具体在网上搜索 压缩项目打包后的体积大小、提升打包速度,是前端性能优化中非常重要的环节,结合工作中的实践总结,梳理出一些 常规且有效 的性能优化建议 ue 项目可以通过添加–report命令: \\\"build\\\": \\\"vue-cli-service build --report\\\" ,打包后 dist 目录会生成

    2024年02月12日
    浏览(54)
  • vite 打包优化

    在当今数字化时代,Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序,就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术,以及各种框架、库和工具。在本专栏中,我们将深入学习前端技

    2024年01月18日
    浏览(51)
  • Vite打包性能优化及填坑

    最近在使用  Vite4.0  构建一个中型前端项目的过程中,遇到了一些坑,也做了一些项目在构建生产环境时的优化,在这里做一个记录,以便后期查阅。(完整配置在后面) 上面是dist文件夹的截图,里面的内容已经有30mb了,是时候该做点什么了。 想要实现优化,首先我得先知道

    2024年02月10日
    浏览(34)
  • vite打包性能优化以及填坑

    目录 前言 项目优化前 分析 优化 拆分包 去除debugger CDN 加速 按需导入 文件压缩 图片压缩 viteImagemin报错 填坑 坑1 坑2 总结 配置         最近在使用  Vite4.0  构建一个中型前端项目的过程中,遇到了一些坑,也做了一些项目在构建生产环境时的优化,在这里做一个记录,

    2024年02月16日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包