vue项目优化之----通过externals 加载外部cdn 资源 ---vue-cli3 使用

最新推荐文章于 2023-09-27 17:56:43 发布
最新推荐文章于 2023-09-27 17:56:43 发布
阅读量3.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40259123/article/details/106455684
版权

1. 为什么需要用引用外部CDN资源

     当我们使用 npm run build  打包我们的vue项目时，你会看到有一个vendor.js 的文件，2.06MB！其实这个里面的js文件打包的都是 我们install 的element，lodash ，echarts 等外部文件！

 

2. 接下来我们就需要在 vue.config.js 中的发布模式中把这段代码黏贴过去

3. 把发布模式的main-prod.js 文件中的css文件删除 ； 比如你的富文本编辑器的css文件

4. 接下来就是找到 我们public 文件下面的 index.html

5. 这样子就可以运行 npm run build ! 打包文件了！ 你会发现vendor.js  文件的体积减小了很多！

【Vue CLI4】打包优化，通过externals配合cdn资源优化依赖项体积
xzxlemontea的博客
09-30 2868
打包优化前的体积： 打包优化后的体积： 一、项目根目录创建vue.config.js，通过chainWebpack配置打包入口，这样我们就可以针对发布和开发两种模式使用不同的打包入口，具体代码如下： module.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'pr...
vue-cli3打包项目引入外部CDN资源文件
litty_123的博客
02-20 1715
1.在vue.config.js中使用chainWebpack添加externals配置 module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // #region 忽略生成环境打包的文件 var externals = { 'vue': 'Vue',
前端性能优化《一》：vue-cli3中使用external进行cdn配置
sixam的博客
05-11 9790
不过使用externals属性要注意的是，虽然可以优化首屏加载速度，但是由于静态资源分离，也会增加http请求数量。所以如果是小项目，最好就不要用externals属性，因为小项目打包的出来的vender.js体积不大，建议项目体量较大的项目再用比较合适。
vue-cli3配置externals、jquery
solocao的专栏
09-05 2078
在index.html引入 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> 配置文件 vue.config.js 代码如下： module.exports = { configureWebpack:{ externals: { 'jquery' : '$', } }, };
使用externals配置,在VUE 工程中引入外部js文件,减少打包时间
qq_42288851的博客
07-18 1457
以VUE项目中引入echarts文件为例： 第一步在VUE项目中找到index.html文件 引入 ： <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script> 第二步 在项目找到 build > webpack.base.conf.js module.exports = { externals: { ...
Vue-cli3.x 配置
weixin_34054931的博客
12-21 467
之前写了一个2.x的配置，发现vue-cli2.x的很是繁琐，vue-cli3.x 的功能是强大，也很方便，都集成了，只需要修改或者覆盖就行了，这里把工作中的配置记录下首先你需要建立一个 vue.config.js 这也是官网所说的，不懂得可以去看官网vue-cli3.0如图 let externals = {};if (process.env.NODE_ENV === 'production...
vue-cli项目优化方法- 缩短首屏加载时间
08-27
Vue-cli 项目优化是指通过各种技术手段和优化方法来提高 Vue 项目的性能和加载速度，缩短首屏加载时间是其中一个重要的方面。以下是相关知识点的详细介绍： 一、使用 Webpack Bundle Analyzer 插件分析 JS 文件大小...
Vue-Cli项目优化操作的实现
10-16
Vue-Cli项目优化是提高Web应用性能的关键步骤，尤其对于由Vue-Cli 2.x生成的项目，常见的问题包括首屏加载时间过长和编译资源体积过大。本文将详细阐述如何通过多种策略来优化Vue-Cli项目，以提升用户体验和项目性能...
详解使用vue-admin-template的优化历程
08-27
使用 Vue-Admin-Template 优化历程详解 ...通过使用 CDN 加速资源加载速度、配置 Webpack externals 和使用 html-webpack-include-assets-plugin 插件，我们可以提高资源加载速度和打包速度，提高用户体验和开发效率。
关于vue-cli 3配置打包优化要点（推荐）
12-10
7. **公用代码提取与 CDN 加载**：对于像 Vue、Vuex、Vue Router 这样的库，我们可以在生产环境中通过 `externals` 配置，让它们从预先部署在 CDN 上的静态资源中加载，从而减轻服务器负担并加速页面加载。...
vue-cli webpack2项目打包优化分享
11-30
在Vue CLI项目中，使用Webpack 2进行优化是提高应用性能和缩短构建时间的关键步骤。以下是一些关于如何优化Vue CLI项目的建议： 1. **减小文件搜索范围配置**： Webpack 的 `resolve.modules` 配置允许指定模块库...
vue3.0 webpack采用externals进行cdn优化
weixin_46605745的博客
02-23 1260
第一步 在vue.config.js文件内的configureWebpack方法内写入externals configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: {
Vue 打包读取外部配置
BUG编写师的博客
12-18 1862
Vue 打包读取外部配置 因为我们项目的入口是在public目录下的（即index.html在public目录下），所以先在public目录下创建static目录，static目录中创建config.js文件 注：如果目录结构不是这种的，可直接在static下添加config.js文件，操作流程和下面是一致的。 config.js中的内容 window.server = { // 后端配置 SERVER_API:"http://192.168.0.123:83" } 在pub
浅谈externals，vuecli打包组件库和import组件中各名称关系
cpa0701的博客
08-14 1072
如题，注意事项如下： 配置scripts时注意组件的名称设置： "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "lib": "vue-cli-service build --target lib --name pkView --dest lib package/index.js" },
vue-cli项目打包体积太大，服务器网速也拉胯(100kb/s)，客户打开网站需要等十几秒！！！ 尝试cdn优化方案
最新发布
qq_18816201的博客
09-27 1685
坑1：vue.config.js 的externals配置， 饿了么取名一定要是Element ： 'element-ui': 'Element'比如 echarts、element-ui、element-variables.scss、lay-excel、moment。坑3：明明element-ui的css ，element-variables怎么还那么大。坑2：CDN引入vue一定要在element-ui前面。很好，成功了，但没完全成功，有坑！排查了下 本地引用没有注释干净。插件用法参考之前博客。
vue-element-admin 打包生成外部配置文件
WeiflR10的博客
05-24 610
方法一 找到public文件，然后在这个文件夹下面创建一个config.js，如下 config.js内容 var PLATFROM_CONFIG = {}; PLATFROM_CONFIG.baseUrl = "请在这里输入访问地址" 在封装好的api接口请求文件中获取这个地址 方法二 使用generate-asset-webpack-plugin插件，在之前写过。 ...
vue 打包后抽取配置文件
mygoes
04-22 2561
vue 打包后抽取配置文件 用 vue-cli 构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，这就需要将后台接口地址打包进项目中。 此时如果只是改个接口地址也要重新打包那就太麻烦了，解决方法是直接加个config.js文件。 亲测可行!!! 本人项目结构如下: 亲测可行!!! 本人打包后文件结构如下: 步骤一: 在 public 文件夹 或者 static 文件夹 下新...
Vue 打包后文件过大 加载速度慢，使用 外部CDN引入库 懒加载路由
qq_33950912的博客
10-09 320
1.外部CDN引入库 修改index.html 使用script标签引入插件 可以去CDN网站去找连接这样速度快 https://www.bootcdn.cn/ cdn.jsdelivr.net 2. 修改 webpack.base.conf.js （Vue-cli2.X) 3. 修改 main.js 将外部库引入的注释掉 使用路由懒加载 修改 router/index.js 路由 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值