vue项目打包优化:缩小体积productionSourceMap设置,使用cdn加速

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

一、vue项目打包体积大优化之productionSourceMap设置

1、productionSourceMap 的作用

productionSourceMap 在构建时生成完整的 SourceMap 文件,默认情况下开启。生产环境中启用 productionSourceMap 有助于开发者调试代码,可以在浏览器的调试工具中查看到源文件中错误的代码位置,而不是编译后的代码位置。这对于定位线上问题十分有帮助。

然而,开启 productionSourceMap 会使得构建后的代码包含源代码映射关系,导致构建后的代码文件体积增大。体积增加会影响页面加载速度,而且源代码也存在泄漏的风险,因此有些开发者会选择在生产环境中禁用 productionSourceMap。

我们在执行 npm run build 生成线上文件的时候,其实调用了 vue-cli-service build

productionSourceMap的作用在于定位问题,打包时会生成.map文件,在生产环境就可以在浏览器查看到输出的信息具体是在哪一行,但相应的包的体积也会变大,将其设置为false则不生成.map文件。

2、禁用 productionSourceMap

禁用 productionSourceMap 后,会对静态资源的定位产生影响,需要手动配置 webpack.

要想引入其它静态资源(比如图片、字体等),需要将资源放到静态资源目录(static)下,然后使用相对路径引用即可。或者使用 require 和 import 引入的静态资源,也可以通过相对路径来引入。

自己的项目在开启productionSourceMap是打包后dist目录文件大小,约为20M左右。

3、关闭 productionSourceMap
module.exports = defineConfig({
  productionSourceMap: false,
})

优化后,打包后dist目录文件大小,约为6M左右。一下子减少14MB。

4、配置 productionSourceMap

在 Vue 项目中,可以运用环境变量来控制生产环境下是否启用 productionSourceMap 属性。还是在 configureWebpack 中,可以使用 对象来获取环境变量

module.exports = defineConfig({
  productionSourceMap: process.env.VUE_APP_MODE === 'development'?true:false,
})

通过环境变量process.env来自动设置,开发环境开启,生产环境关闭。

二、vue-cli打包之性能优化-使用cdn加速

1、CDN加速是什么

CDN加速是一种网络优化技术,旨在加速网站和应用程序的内容传输和交付给用户。它通过在全球各地分布的服务器网络上存储网站、应用程序和媒体文件的副本来实现加速效果。当用户请求访问某个网站或应用程序时,CDN会根据用户的地理位置和网络条件,将内容从离用户最近的服务器上提供,从而减少了延迟和加载时间。

2、CDN加速具有以下优点:
  • 降低延迟:CDN将内容存储在全球多个位置,使用户能够从距离更近的服务器获取内容,从而降低了数据传输的延迟时间。
  • 提高性能:通过减少网络拥塞和加速内容交付,CDN可以显著提高网站和应用程序的性能,使其更快加载。
  • 负载均衡:CDN可以自动将流量分配到不同的服务器上,从而降低单个服务器的负载,确保高可用性和稳定性。
  • 减少服务器负担:由于CDN服务器负责处理大部分用户请求,源服务器的负载相对较低,可以减少源服务器的压力,提高其响应速度。
  • 提高安全性:一些CDN提供商还提供安全性功能,如DDoS攻击防护和安全证书,以增强网站和应用程序的安全性。
  • 节省带宽成本:由于CDN可以缓存和压缩内容,因此可以降低源服务器的带宽使用,从而节省带宽成本。

CDN加速在今天的互联网应用中扮演着重要的角色,特别是对于需要快速加载内容的网站、应用程序和流媒体服务来说,它可以提供更好的用户体验并帮助提高业务的性能。许多互联网公司和内容提供商都使用CDN来优化其在线服务。文章来源地址https://www.toymoban.com/news/detail-833600.html

3、vue.config.js配置
const { defineConfig } = require('@vue/cli-service')
let externals = {}
let cdn = {
  css: [],
  js: []
}
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'vuex': 'Vuex',
      'axios': 'axios',
    },
    cdn = {
      css: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css'],
      js: ['https://unpkg.com/vue@2.6.12/dist/vue.js',
        'https://unpkg.com/element-ui/lib/index.js',
        'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.cjs.min.js',
        'https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js'
      ],
    }
}
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    externals, // 采用cdn的方式,所以将以下这些文件配置不打包
  },
  chainWebpack(config) {
    // 注入cdn
    config.plugin("html").tap(args => {
      args[0].cdn = cdn
      return args
    })
  }
})
4、index.html配置
<head>
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %> " rel="stylesheet">
<% } %>
</head>

<body>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" defer></script>
<% } %>
</body>

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

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

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

相关文章

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

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

    2024年02月03日
    浏览(55)
  • vite配置cdn优化打包体积

    大家都知道前端性能优化的方法,cdn外部引入的方法可以使项目打包后体积大大缩小,所以是前端性能优化方面非常推荐的方法之一。 本文关于 vite2 vue3 + Ts 项目如何cdn引入 element plus 做一个简单教程,我们可以通过两种方式引入配置cdn。 由于 vite 的核心基于 rollup 和 webpac

    2024年02月05日
    浏览(43)
  • 性能优化之--- 项目打包优化(vue)

    项目体积小也是优化性能的一个方向,这里以 Vue 工程为例; 当刚运行项目的时候,发现刚进入页面,就将所有的js文件和css文件加载了进来,这一进程十分的消耗时间。 如果打开哪个页面就对应的加载响应页面的js文件和css文件,那么页面加载速度会大大提升。 vue官方文档

    2024年02月09日
    浏览(48)
  • vue 项目优化打包时间

    优化Vue项目的打包速度 随着项目依赖的增加, 在配合开发的时候听到后端同学的抱怨 build 时间长, 及其影响开发效率和心情. 然后翻阅了相关的资料开启Vue优化之路。 此项目是针对vue-cli2脚手架进行优化的 优化配置 修改config/index.js下的文件  在src/mian.js关闭生产环境下的调试

    2024年01月24日
    浏览(28)
  • Unity打包窗口化放大、缩小、拖拽功能、无边框设置 C#

    Unity无边框设置、窗口化放大、缩小、拖拽 提示:PC端打包,测试尽量在打包后测试。 编辑器下测试会有意想不到的后果呦~~ [DllImport(\\\"user32.dll\\\")] 。 代码如下: 代码如下:注释详细,不懂就问哈 代码整体已贴出,功能亲测可用,欢迎学习交流。点赞+收藏+关注哦~

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

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

    2024年02月12日
    浏览(56)
  • vue h5项目 打包&&加载优化

    打包美化: 1)npx browserslist@latest --update-db 更新去除警告 2)打包进度条 npm add progress-bar-webpack-plugin -D npm add webpackbar -D npm install --save-dev webpack-bundle-analyzer 优化: 1. 各个插件和loader所花费的时间 npm i speed-measure-webpack-plugin -D 安装打包优化分析插件 得到所有打包文件耗时: 2.添

    2024年02月10日
    浏览(37)
  • Unity减少发布打包文件的体积(二)——设置WebGL发布时每张图片的压缩方式

    一个项目在发布成WebGL后,其体积至关重要,体积太大,用户加载会经历一个漫长的等待…轻则骂娘,重则用脚把电脑踢烂(扣 质 保 金 )… 那么如何减少发布后的体积呢,本文从图片的压缩开始入手。 前传回顾: Unity减少发布打包文件的体积(一)——获取精灵图片的信息限

    2024年02月04日
    浏览(44)
  • 前端项目体积优化策略

    在前端开发中,项目体积优化是一个重要的环节,它直接影响到网页的加载速度和用户体验。随着前端项目越来越复杂,引入的依赖也越来越多,如何有效地减少最终打包文件的大小,成为了前端工程师需要面对的挑战。以下是一些常见的前端项目体积优化策略: 1. 代码分割

    2024年04月13日
    浏览(40)
  • 使用ffmpeg缩小视频体积的几种方式

      随着视频制作的普及,视频文件的体积也越来越大,给存储和传输带来了很大的困扰。为了解决这个问题,我们可以使用FFmpeg这个强大的工具来缩小视频的体积。本文将介绍三种常用的方法:调整视频的分辨率、调整视频的码率和使用更高效的视频编码格式。   调整视

    2024年02月06日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包