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

文章目录

- - 一、vue项目打包体积大优化之productionSourceMap设置
  - - [1、productionSourceMap 的作用](#1、productionSourceMap 的作用)
    - [2、禁用 productionSourceMap](#2、禁用 productionSourceMap)
    - [3、关闭 productionSourceMap](#3、关闭 productionSourceMap)
    - [4、配置 productionSourceMap](#4、配置 productionSourceMap)
  - 二、vue-cli打包之性能优化-使用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来优化其在线服务。

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>