揭秘 Vue.js 打包优化之秘：提升性能、减少体积，助您提升开发效率！

2024-01-12 15:32:01

Vue.js 作为当下炙手可热的 JavaScript 框架，以其灵活性、易用性和丰富的生态系统，赢得了众多开发者的青睐。然而，随着项目规模的不断扩大，应用程序的体积也会随之增加，影响加载速度和性能。为了解决这一问题，打包优化应运而生。

一、添加 favicon.ico 文件

favicon.ico 是网站的图标，当您在浏览器中打开网站时，它会显示在标签页或地址栏中。添加 favicon.ico 文件有助于提高用户体验，让网站看起来更加专业。

将 favicon.ico 文件放置在项目的根目录中，即 index.html 文件的同级目录。
在项目的 index.html 文件中，添加如下代码引入图标：

<link rel="shortcut icon" href="favicon.ico">

二、引入图标

为了让您的网站在浏览器中显示图标，您需要将图标文件引入 HTML 中。这可以通过在 <head> 标签中添加 <link> 标签来实现：

<head>
  <link rel="icon" href="favicon.ico">
</head>

三、配置 webpack 配置文件

webpack 是一个用于构建 JavaScript 应用程序的工具。它可以将您的源代码打包成一个或多个优化后的文件，以便在浏览器中运行。

在项目根目录下找到 webpack 配置文件（通常是 webpack.config.js）。
在该文件中，找到 optimization 字段，并在其中添加以下配置：

optimization: {
  minimize: true, // 开启代码压缩
  splitChunks: {
    chunks: "all", // 对所有 chunk 进行优化
    minSize: 30000, // 拆分前必须大于30kb
    maxSize: 0, // 无限制
    minChunks: 1, // 需要至少被引用一次
    maxAsyncRequests: 5, // 最大的异步请求数
    maxInitialRequests: 3, // 最大的初始请求数
    automaticNameDelimiter: "~", // chunk 的自动命名分隔符
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/, // 将 node_modules 中的文件打包到 vendors.js
        priority: -10, // 优先级
        reuseExistingChunk: true, // 复用已有的 chunk
      },
      default: {
        minChunks: 2, // 需要至少被引用两次
        priority: -20, // 优先级
        reuseExistingChunk: true, // 复用已有的 chunk
      },
    },
  },
}