通过external加载外部CDN资源使打包的项目体积更小

最新推荐文章于 2024-08-12 21:50:01 发布

rating_

最新推荐文章于 2024-08-12 21:50:01 发布

阅读量540

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/rating_/article/details/104636250

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何通过在vue.config.js中配置externals属性，并在index.html中引入外部CDN资源，来减小Vue项目打包后的体积。具体操作包括在vue.config.js中指定Vue、axios和vue-router的外部引用，以及在index.html中添加相应的CDN链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过external加载外部CDN资源使打包的项目体积更小

在vue.config.js文件中加入以下代码（vue.config.js项目的根目录下）

configureWebpack: {

  externals: {

   vue: 'Vue', //分别对应自己项目的main.js文件中引入的文件名

   axios: 'axios',

   'vue-router': 'VueRouter'

  }

 }

在public目录下的index.html文件中引入对应的js和css

<script src="https://staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://staticfile.org/3.1.6/vue-router.min.js"></script>
<script src="https://staticfile.org/axios/0.19.2/axios.min.js"></script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

rating_

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue项目优化策略之通过externals加载外部CDN资源

Hiroshi's

01-07

667

默认情况下，导入的第三方依赖包，都会合并到chunk-vendors.e50d51a8.js文件中，导致这个文件体积非常大在项目打包期间，webpack会先检查external里面有没有申明第三方的依赖包，如果有的话webpack就不会把申明过的依赖包打包进去，而是用到依赖包的时候直接去window全局对象去找：第一步： config.set('externals', { 'vue': 'Vue', 'vue-router': 'VueRouter', axio.

Vue项目中通过externals加载外部CDN资源

weixin_50027754的博客

12-09

305

1.在我们开发Vue项目时通过import语法导入的第三方依赖包最终会打包合并到同一个文件chunk.js中导致文件体积过大，从而影响性能 2.为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源，凡是声明在 externals中的第三方依赖包，都不会被打包 3.需要在public/index.html文件的头部，添加CDN资源引用 4.别忘了把min-prod.js中导入的样式文件删除效果图如下 ...

参与评论您还未登录，请先登录后发表或查看评论

通过externals加载外部CDN资源

李泽言的博客

02-09

245

module.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add('./src/main-prod.js') config.set('externals', { vue: 'Vue', 'vue-router': 'VueRo

html中插入external link,通过external加载外部CDN资源

weixin_31092081的博客

06-15

707

一、先看两段主要的代码(vue.config.js和public/index.html)const path = require('path');module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '' : '/',// 输出文件目录outputDir: process.env.NODE_ENV === 'pr...

external_asset_bundle:从捆绑包外部的外部文件夹加载资源的AssetBundle。像rootBundle或DefaultAssetBundle一样使用它

03-07

外部资产捆绑外部资产捆绑包的工作原理与rootBundle或DefaultAssetBundle完全相同，但是从外部位置（如应用程序或库路径）加载资源。它还实现了用于资源加载的缓存。如果要使用临时或外部存储中的文件夹中的资源，这将非常有用。您可以使用Image.asset来创建一个Image实例，就像默认的bundle一样： var externalAssetBundle = ExternalAssetBundle ( "download/folder/assets" ); var image = Image . asset ( "sample.png" , bundle : externalAssetBundle, //Don't forget to use your own AssetBundle! ); 或非常容易地从路径加载字符串文件

vite 打包过后生成的.js/.css 文件过多，怎么减少资源加载链接呢？

最新发布

07-05

好的，用户的问题是关于Vite打包后生成的.js和.css文件过多，导致资源加载链接太多，想要减少这些链接。首先，我需要回顾之前用户提到的问题，用户之前已经问过类似的问题，现在可能需要更具体或补充的优化方法。 ...

Spring Boot应用中的资源分离与高效打包实践

招风的黑耳优快云

08-12

533

通过实施资源分离和高效打包策略，不仅可以提升Spring Boot应用的开发和部署效率，还能显著提高用户体验。在实际项目中，根据项目的实际情况和团队的技术栈选择合适的工具和方案是关键。希望本文能为读者在Spring Boot项目中实现资源分离和高效打包提供一些有价值的参考。

echarts打包体积过大

03-23

为了有效减少 ECharts 的打包体积，可以通过多种方式进行优化。以下是几种常见的策略： #### 1. **按需引入** 通过按需引入的方式只加载所需的模块，而不是整个库。这种方式能够显著减少不必要的代码被包含在最终的...

我是如何把 Vite 的打包时间从 110s 优化到 25s 的

y_ang_1的博客

03-19

6267

环境初始时间优化后的时间优化率优化前截图优化后截图Mac book pro（m1芯片）48s10s79.17%线上打包器110s25s77.27%目前项目已经在测试和生产环境跑了一个多月，没有任何问题，大家可以放心使用。

CDN加载

weixin_45210355的博客

06-20

1327

优点：减轻服务器压力速度快可以缓存 CDNJS https://cdnjs.com/ 七牛云存储开放静态文件 http://staticfile.org/ 又拍云JS库 http://jscdn.upai.com/

通过 externals 加载外部 CDN 资源（Vue项目上线优化四）

qq_45516629的博客

04-19

3063

1.发现项目中存在的问题为了直观地发现项目中存在的问题，我们可以在打包时生成报告。我们可以通过VueCli可视化的UI面板运行bulid直接查看报告。而在报告中我们发现了有这么一个文件，体积比较大，这样可能会造成我们较长时间的请求。 2.那么这个文件是怎么来的呢？它的作用是什么？原来，其实默认情况下，项目中我们通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文...

Vue项目优化——通过 externals 加载外部 CDN 资源

Potry Code的博客

03-09

3177

vite 配置cdn导入的包文件，类似webpack的externals

Cynthia_Yue27的博客

03-18

9678

vite 需要安装vite-plugin-resolve-externals npm i -D vite-plugin-resolve-externals // vite.config.js import resolveExternalsPlugin from 'vite-plugin-resolve-externals' export default defineConfig({ plugins: [ vue(), resolveExternalsPlugin({

vite使用引入cdn遇到的坑！

分享学习成果，希望可以帮助到你。

05-08

2922

vite使用插件vite-plugin-cdn-import报错Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".

『Webpack系列』—— externals用法详解

树上骑个猴的博客

11-01

8169

本文用项目例子是用Vue Cli3搭建的Vue项目如果小伙伴有做过首屏加载时间优化，应该会遇到chunk-vendors.js这个文件，巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。下面通过一个实际的项目来演示，先通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js这个文件里面地内容。 npm install webpack-bundle-analyzer --save-dev 在vue.config.js中引入这插件 const Bu.

webpack externals配置方式介绍

网站前端/PHP/Android/其他

09-07

3652

webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。简单理解就是不通过npm下载的类库，在html文件中以script引入，然后在页面中使用import导入的这种方式以vue开发环境为示例在public/index.html中引入moment.min.js类库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <met

webpack打包优化之外部扩展(Externals)配置

彭世瑜的博客

08-05

3145

index.html 打开控制台，输入可以看到是一个函数了webpack.config.js 相当于告诉webpack, 当代码中引入的时候，使用替换更多示例

配置webpack中externals来减少打包后vendor.js的体积

qq_37214137的博客

03-11

1042

背景在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。 webpack的外部扩展(externals)可以有效的解决。官方文档指路下面就以Vue项目为例，介绍一下externals的使用。项目中引用了vue、vue-router、axios、element-ui、vuex等第三方库，那么我们的目标就是把这些从输出的 bundle 中排除

webpack中external的使用

rolinabc的博客

10-09

2099

在我们日常开发中，经常能够听到‘跨域’这个字眼，那么跨域是什么呢？跨域其实是由浏览器的同源策略造成的那么同源策略又是什么呢？同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。什么又是同源呢？如果两个 URL 的协议、域名、端口号都相同的话，则这两个 URL 是同源。具体看下面的表格...