深入分析 Vue CLI 如何通过 `output.publicPath` 和 `output.chunkFilename` 控制生产环境静态资源的路径和文件名，以实现 CDN 优化。

各位观众老爷们，早上好！我是老码农李大锤，今天给大家伙儿聊聊 Vue CLI 里面那些关于静态资源路径和文件名的弯弯绕，特别是 output.publicPath 和 output.chunkFilename 这俩哥们，看看它们是怎么帮我们优化 CDN 的。

一、前戏：静态资源那些事儿

咱们先来唠唠嗑，啥是静态资源？说白了，就是那些不会经常变动的文件，比如图片、CSS、JavaScript 脚本、字体等等。这些东西，浏览器会缓存起来，下次再用就能嗖嗖嗖地快了。

但是，在生产环境，咱们通常会把这些静态资源放到 CDN 上。为啥呢？因为 CDN 遍布全球，用户从离自己最近的节点访问，速度更快。这就好比你在北京，想吃烤鸭，直接去楼下全聚德，总比跑到南京去吃要快吧？

二、Vue CLI：脚手架的那些套路

Vue CLI 就像一个装修队，帮你快速搭建 Vue 项目的骨架，省去了你手动配置 Webpack 的麻烦。它已经帮你把各种配置都搞定了，但咱们不能当甩手掌柜，还得了解一下里面的门道。

三、output.publicPath：告诉浏览器，家在哪儿

output.publicPath 是 Webpack 配置里的一个关键选项，它告诉浏览器，你的静态资源在服务器上的哪个路径下。

默认情况： 默认情况下，output.publicPath 的值取决于你的 vue.config.js 里面的 publicPath 选项。
- 如果 publicPath 是 '/'，那么 output.publicPath 也是 '/'。这意味着，你的静态资源会放在网站的根目录下。比如，index.html 引用 app.js 的路径就是 /app.js。
- 如果 publicPath 是 ''，那么 output.publicPath 也是 ''。这意味着，你的静态资源会放在和 index.html 相同的目录下。比如，index.html 引用 app.js 的路径就是 app.js。
- 如果 publicPath 是 '/my-app/'，那么 output.publicPath 也是 '/my-app/'。这意味着，你的静态资源会放在网站的 /my-app/ 目录下。比如，index.html 引用 app.js 的路径就是 /my-app/app.js。
CDN 优化： 这玩意儿在 CDN 优化中至关重要。假设你的静态资源都放在 CDN 上的 https://cdn.example.com/my-app/ 目录下，那么你就需要把 publicPath 设置成 'https://cdn.example.com/my-app/'。

这样，Vue CLI 在构建项目的时候，就会自动把所有的静态资源路径都加上这个前缀。比如，原来是 app.js，现在就变成了 https://cdn.example.com/my-app/app.js。浏览器看到这个路径，就知道去 CDN 上找资源了。
```
// vue.config.js
module.exports = {
  publicPath: 'https://cdn.example.com/my-app/'
}
```
注意： 一定要在 CDN 上创建好对应的目录结构，否则浏览器会找不到资源，报错的。
动态设置： 有时候，你可能需要在不同的环境下使用不同的 CDN 地址。比如，开发环境用本地服务器，生产环境用 CDN。这时候，你可以动态设置 publicPath。
```
// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? 'https://cdn.example.com/my-app/'
    : '/'
}
```
这段代码的意思是，如果当前是生产环境，就使用 CDN 地址，否则使用根目录。

四、output.chunkFilename：给文件起个好听的名字

output.chunkFilename 是 Webpack 配置里的另一个选项，它用来指定代码分割后生成的文件名。

啥是代码分割？ 代码分割就是把你的代码拆分成多个小的文件，浏览器可以按需加载，提高页面加载速度。比如，你的项目有很多组件，可以把每个组件都打包成一个单独的文件，只有当用户访问到这个组件的时候，才去加载对应的文件。
默认情况： 默认情况下，output.chunkFilename 的值是 'js/[name].[hash:8].js'。
- [name]：表示 chunk 的名称，通常是模块的 ID 或者入口文件的名称。
- [hash:8]：表示 chunk 内容的哈希值，取前 8 位。这个哈希值可以用来做缓存控制。如果 chunk 的内容发生了变化，哈希值也会跟着变化，浏览器就会重新加载新的文件。
CDN 优化： 在 CDN 优化中，output.chunkFilename 也很重要。一个好的文件名应该具有以下特点：
- 唯一性： 确保每个文件的名称都是唯一的，避免冲突。
- 可缓存性： 利用哈希值来做缓存控制，当文件内容发生变化时，文件名也跟着变化，浏览器就会重新加载新的文件。
- 可读性： 文件名应该有一定的可读性，方便调试和维护。
```
// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      chunkFilename: 'js/[name].[contenthash:8].js' // Use contenthash
    }
  }
}
```
这里，我把 hash 换成了 contenthash。contenthash 是根据文件内容生成的哈希值，只有当文件内容发生变化时，哈希值才会变化，这样可以更精确地控制缓存。
目录结构： 你还可以通过 chunkFilename 来指定 chunk 文件的存放目录。比如，'js/[id].js' 会把所有的 chunk 文件都放到 js 目录下，并且以 chunk 的 ID 作为文件名。

五、vue.config.js：大本营

上面提到的 publicPath 和 chunkFilename 都是 Webpack 的配置选项。在 Vue CLI 中，你可以在 vue.config.js 文件中修改这些配置。

publicPath： 直接在 module.exports 里面设置。

// vue.config.js
module.exports = {
  publicPath: 'https://cdn.example.com/my-app/'
}

chunkFilename： 需要通过 configureWebpack 选项来修改 Webpack 的配置。

// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      chunkFilename: 'js/[name].[contenthash:8].js'
    }
  }
}

或者，你也可以使用函数的形式：

// vue.config.js
module.exports = {
  configureWebpack: (config) => {
    config.output.chunkFilename = 'js/[name].[contenthash:8].js';
  }
}

这种方式可以更灵活地修改 Webpack 的配置。

六、案例分析：一个完整的 CDN 优化流程

咱们来模拟一个完整的 CDN 优化流程，看看如何把 publicPath 和 chunkFilename 应用到实际项目中。

准备工作：
- 注册一个 CDN 服务，比如阿里云 CDN、腾讯云 CDN、又拍云 CDN 等。
- 在 CDN 上创建一个存储桶，用来存放你的静态资源。
- 配置 CDN 的域名，比如 https://cdn.example.com。
- 在存储桶中创建一个目录，比如 my-app。

配置 vue.config.js：

// vue.config.js
module.exports = {
  publicPath: 'https://cdn.example.com/my-app/',
  configureWebpack: {
    output: {
      chunkFilename: 'js/[name].[contenthash:8].js'
    }
  }
}

构建项目：
```
npm run build
```
上传静态资源：

把 dist 目录下的所有文件上传到 CDN 存储桶的 my-app 目录下。
修改 HTML 文件：

把 dist/index.html 文件中的所有静态资源路径都替换成 CDN 地址。这一步通常不需要手动操作，因为 Vue CLI 已经帮你自动完成了。
测试：

在浏览器中打开你的网站，看看静态资源是否从 CDN 上加载。你可以通过浏览器的开发者工具来查看资源的加载路径。

七、疑难解答：常见问题

Q：为什么我修改了 publicPath，但是静态资源还是从本地加载？

A：可能是因为你没有重新构建项目。修改了 vue.config.js 之后，一定要重新运行 npm run build 命令，才能让配置生效。
另外请检查index.html 文件是不是还在本地，如果还在本地，需要上传到服务器。
Q：为什么我的 CDN 上的文件更新了，但是浏览器还是加载旧的文件？

A：可能是因为浏览器缓存了旧的文件。你可以尝试清除浏览器缓存，或者强制刷新页面（Ctrl + Shift + R）。
另外，确认你的chunkFilename配置是否使用了contenthash, 如果没有，浏览器可能无法识别文件的更新。
Q：hash 和 contenthash 有什么区别？

A：hash 是根据整个构建过程生成的哈希值，只要构建过程发生变化，hash 就会变化。contenthash 是根据文件内容生成的哈希值，只有当文件内容发生变化时，contenthash 才会变化。contenthash 更精确，可以更好地控制缓存。
Q：publicPath 可以设置成相对路径吗？

A：可以，但是不推荐。如果 publicPath 设置成相对路径，那么你的网站必须放在指定的目录下才能正常运行，不够灵活。建议使用绝对路径，或者动态设置 publicPath。

八、总结：工欲善其事，必先利其器

今天咱们聊了 Vue CLI 中 output.publicPath 和 output.chunkFilename 的作用，以及如何利用它们来优化 CDN。希望大家能够掌握这些技巧，让你的 Vue 项目飞起来。

记住，工欲善其事，必先利其器。掌握了这些工具，才能更好地应对复杂的项目需求。

好了，今天的讲座就到这里，感谢大家的收听！如果大家还有什么问题，欢迎在评论区留言，我会尽力解答。各位观众老爷们，下次再见！

发表回复 取消回复

发表回复取消回复