一、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来优化其在线服务。
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>
