一、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会根据用户的地理位置和网络条件,将内容从离用户最近的服务器上提供,从而减少了延迟和加载时间。文章来源:https://www.toymoban.com/news/detail-833600.html
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模板网!