Vue打包优化篇-CDN加速

news2025/1/27 12:36:36

优化原因

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

在这里插入图片描述

查看依赖版本

首先项目中需要使用依赖项,我这里项目中打算将element-ui、vue、vuex、vue-router这些依赖项进行分离,记录依赖版本方便后面使用。

依赖名称依赖版本
vue2.6.11
vue-router3.2.0
vuex3.4.0
element-ui2.15.9

在这里插入图片描述

查看依赖引用

在main.js中可以看到这些依赖被引用。
在项目中开发环境和生成环境一些配置是不同的,所以这里截图方便后面理解。

在这里插入图片描述

配置开发环境和生产环境

在上面我们已经看到main.js中如何引用依赖,现在我们需要做一些改动在main.js改为main-dev.js作为我们的开发环境,然后在同级目录下创建一个新的文件叫main-prod.js作为我们的生产环境,实际开发中开发环境(main-dev.js)和生产环境(main-prod.js)配置存在不同。

开发环境入口 - main-dev.js

在这里插入图片描述

// 这是给ElementUI组件库组件设置默认参数
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });

生产环境入口 - main-prod.js

在这里插入图片描述

// 这是给ElementUI组件库组件设置默认参数(cdn加速和生产环境配置有区别)
Vue.prototype.$ELEMENT = {
  size: 'small',
  zIndex: 3000
};

配置开发环境入口和生产环境入口

这里需要注意一下的是配置入口,因为默认入口文件只有一个main.js但是你给改成了main-dev.js而且还新增了一个main-prod.js,然后你运行项目或打包项目肯定报错,因为它去找main.js找不到啊,所以这里需要通过vue.config.js文件来指定生产环境和开发环境入口。

vue.config.js

// 判断是否是生产环境
const isProduction = process.env.NODE_ENV !== 'development';

module.exports = {
    publicPath: './', // 不加这个可能会导致静态资源找不到的情况。
    chainWebpack: config => {
        config.when(isProduction, config => {
        	// 如果是生产环境,那么将main-prod.js作为入口文件(我这里是ts和js一样)。
            config.entry('app').clear().add('./src/main-prod.ts');
        });
        config.when(!isProduction, config => {
        	// 如果是不是生产环境,那么将main-dev.js作为入口文件(我这里是ts和js一样).
            config.entry('app').clear().add('./src/main-dev.ts');
        });
    }
};

在这里插入图片描述

配置CDN加速

完成上面环境配置已经成功一半啦,接下来就需要配置cdn加速相关的啦。

vue.config.js

这里需要说明一下,看下面的cdn加速链接中依赖的版本和上面查看依赖版本表格展示是不是一样的?肯定要一样啊不然出现依赖版本冲突问题怎么办。
关于externals属性告诉webpack需要排除的依赖名称和挂载在window上的对象属性名称,这里简单列出常用的表,如需要其它的可以插件依赖导出到window的对象名称,也可以面向百度查找对应的对象属性名称。

依赖名称挂载在window上的对象属性名称
vueVue
vue-routerVueRouter
vuexVuex
lodash_
element-uiELEMENT

const isProduction = process.env.NODE_ENV !== 'development';

const cdn = {
    externals: {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        vuex: 'Vuex',
        "element-ui": "ELEMENT"
    },
    css: [
        'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.min.css',
    ],
    js: [
        'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
        'https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js',
        'https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
        'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.min.js'
    ]
};

module.exports = {
    publicPath: './',
    chainWebpack: config => {
        config.when(isProduction, config => {
            config.entry('app').clear().add('./src/main-prod.ts');
            
            // 我们希望的是在生产环境下才进行cdn优化!!!这点理解很重要。
            // 告诉webpack需要排除的依赖名称和挂载在window上的对象属性名称。
            config.set('externals', cdn.externals);
            // 这里的作用是在后面index.html页面中通过link,script标签加载这些cdn链接。
            config.plugin('html').tap(args => {
                args[0].cdn = cdn;
                return args;
            });
            
        });
        config.when(!isProduction, config => {
            config.entry('app').clear().add('./src/main-dev.ts');
        });
    }
};

在这里插入图片描述

index.html

这里也需要说明一下,这个index.html页面的位置一般在public目录下。
下面的htmlWebpackPlugin.options.cdn对象是不是很眼熟,不就是我们通过vue.config.js中生产环境配置config.plugin(‘html’)加入的属性?真是一环扣一环呐。

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  
  <!-- 这里从cdn配置里面加载css文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
  <% } %>

  <!-- 这里从cdn配置里面加载js文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script" />
  <% } %>
  
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  
  <!-- 这里从cdn配置里面加载js文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  
</body>

</html>

打包测试

完成以上步骤后,cdn打包优化就完成啦,现在运行打包测试一下。
下面打包数据和没有cdn优化的打包数据对比一下,是不是依赖项排除了?打包时间也变快了。
面试的时候是不是又多了一些底气了?

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407737.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue的组件化编程

非单文件组件 注册局部组件 此时上面书写的组件都是局部组件,每一个vue实例要想使用上面的组件时都需要在components中进行注册才可以使用,此时如果再创建一个Vue实例vms,这个实例不在components中注册就直接使用组件会产生什么变化: 此时控制台报错 ‘是否正确注册了组件&a…

function 函数

一、函数的基本注意事项 function函数的名字也是一个标识符&#xff0c;通过关键字function申明一个函数 function 函数名(){ 代码块 } 二、函数基本用法 1、形参与实参 1、形参与实参可以有无数个&#xff0c;实参按照顺序赋值给形参&#xff1b; 2、实参个数不一定要与实…

web前端面试高频考点——Vue原理(理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM)

系列文章目录 内容参考链接Vue基本使用Vue的基本使用&#xff08;一文掌握Vue最基础的知识点&#xff09;Vue通信和高级特性Vue组件间的通信及高级特性&#xff08;多种组件间的通信、自定义v-model、nextTick、插槽&#xff09;Vue高级特性Vue的高级特性&#xff08;动态组件…

axios发post请求,后端接收不到参数的原因及解决

做分页数据时&#xff0c;使用vue3 axios发post请求&#xff0c;后端服务调用成功但数据没有根据参数动态变化&#xff0c;换为js ajax也是同样错误。 后来是后端没有接收到参数。 网上看了资料&#xff0c;原因&#xff1a; 使⽤axios请求数据时&#xff0c;我们的 …

Module Federation在vue3中使用vue2的组件

前言&#xff1a; 备注&#xff1a;本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本&#xff0c;如Vue2的组件时在Vue2中使用&#xff0c;但我为什么会在Vue3项目中去使用Vue2的组件呢&#xff0c;其实是因为历史原因。好…

点击《el-table》让选中的行变色,亲测实用

前期回顾 Vue项目实战 —— 哔哩哔哩移动端开发_0.活在风浪里的博客-CSDN博客撑着下班前半小时我用vue写《哔哩哔哩 项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2&#xff0c;技术栈有axios、Vh等&#xff0c;下班过来敲哈哈https://blog.csdn.net/m0_5790…

vite+vue3+ts 手把手教你创建一个vue3项目

使用vite 创建一个vue3项目&#xff0c;基本全程cv。 安装router&#xff0c;less / scss&#xff0c;pinia&#xff0c;axios&#xff0c; element / Ant Design Vue&#xff0c;Echarts 以及如何配置别名&#xff0c;自定义组件&#xff0c;vue-devtools插件。 目录 1、创建…

vue设置cookie和路由守卫

vue项目中登录页面用户登录成功后&#xff0c;会把用户信息存储到cookie中&#xff0c;然后跳转进入首页&#xff0c;当用户没有登录时&#xff0c;直接输入页面地址会经过路由守卫检测cookie中是否存在用户信息&#xff0c;如果不存在&#xff0c;重定向到登录页让用户进行登录…

使用idea运行VUE项目

1.电脑先安装好node.js并配置好环境变量&#xff0c; 安装方法参考windows mac 2.使用管理员身份运行idea&#xff0c;把项目拉取下来&#xff0c; 并给idea安装vue的插件 安装方法参考链接 3.删除“node_modules”文件夹和“package-lock.json” 将项目里的“node_modules”…

简单的Java web项目代码(8个)

引言&#xff1a;Java web项目主要采用mvc的的设计思想&#xff0c;系统主要采用javajspservletmysqleclipse实现&#xff0c;具有登陆、分页、导出excel&#xff0c;增删改查等功能,适合初学者&#xff0c;满足基本的实训需求&#xff0c;以下是推荐的几款&#xff0c;总有适合…

uniapp及uniCloud开发中经常会出现的问题汇总

一、manifest.json内未配置Appld,请重新获取后再 uniCloud本地调试服务启动失败&#xff0c;错误信息为:manifest.json内未配置Appld,请重新获取后再试 新建uniapp项目会出现以下报错&#xff0c;说明还没有创建APPID。 解决办法&#xff1a; 打开DCloud开发者中心&#xff…

Vite基础配置之 - 分包

Vite基础配置之 - 分包 什么是分包呢&#xff1f;它有什么好处呢&#xff1f; 还是举个例子&#xff0c;来回忆一下吧&#xff0c;什么呢&#xff1f; 比如说&#xff0c;我使用了 loadsh.js 的东西&#xff0c;那么我们在打包的时候&#xff0c;就会把 loadsh 相关资源也会打…

AJAX跨域问题及解决方案

文章目录跨域哪些方式可以进行跨域部署服务器部署模块ajax1ajax2测试跨域解决方案方案1&#xff1a;设置响应头方案2&#xff1a;jsonp深入一下jsonp方案3&#xff1a;代理机制&#xff08;httpclient&#xff09;第一种方案&#xff1a;使用JDK内置的API第二种方案&#xff1a…

Vite 打包性能优化

Vite 打包性能优化开始一个 Vite ts 项目分包策略gzip 压缩cdn 加速开始一个 Vite ts 项目 这里我们开始了一个 Vite ts 的项目&#xff0c;其中关于 ts 的配置直接看内容注释即可 npm init -y npm i vite -D npm vite-plugin-checker -D #用来强制提示ts报错<!-- inde…

反射时竟然NoSuchMethodException了!看这篇超详细的解决方案吧

前几天九哥在讲Servlet时&#xff0c;为了灵活地使用同一个Servlet来处理对同一张表的业务操作请求&#xff0c;我给学生讲解了BaseServlet工具类的封装&#xff0c;基本实现思路有如下几个步骤。 一. 反射封装BaseServlet工具类 使用反射封装BaseServlet工具类&#xff0c;无…

uview常用组件案例操作及详解(一) 选择器 picker

uview常用组件案例操作及详解&#xff08;一&#xff09; 选择器 picker 1.图片示例 2.使用方法 *为简便代码不提供样式 <view><view><text>行业性质</text><text>*</text></view><view><text v-if"!text.industry…

echarts中的legend属性

legend: {orient: "vertical",right: "0%",top: "15%",icon: "circle", //小圆点itemWidth: 8,itemHeight: 8,itemGap: 15, //间隔formatter: function (params) {let tip1 "";let tip "";let le params.leng…

【uni-app】swiper的使用

最近在学习小程序的开发&#xff0c;其中有用到swiper&#xff0c;在这里记录一下我的学习历程 有一些人&#xff0c;他刚开始并不会开发小程序&#xff0c;但是在任务面前&#xff0c;没有什么是不可以学的… 刚开始接触到swiper的时候&#xff0c;是在uni-app的官方文档里&am…

Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节

文章目录Pinia状态管理Pinia和Vuex的对比Pinia基本使用&#x1f364;创建Pinia&#x1f364;创建StorePinia核心概念State&#x1f35f;state基本使用&#x1f35f;state其他操作Pinia核心Getters&#x1f355;getters基本使用&#x1f355;getters其他操作Pinia核心Actions&am…

React -- useState 的使用及注意事项

一、基本使用 useState是 react 提供的一个定义响应式变量的 hook 函数&#xff0c;基本语法如下&#xff1a; const [count, setCount] useState(initialCount)它返回一个状态和一个修改状态的方法&#xff0c;状态需要通过这个方法来进行修改&#xff1b;initialCount 是我…