Vue CLI 打包优化: 剖析代码和去除无用文件

2023-09-16 13:34:30

初次打包 Vue.js 应用时，我们往往会惊讶于打包后的文件体积之大。而其中占较大篇幅的 .map 文件更是让人摸不着头脑。这篇文章将深入剖析 Vue CLI 打包生成的代码，并探讨如何去除无用的文件，从而优化打包结果。

了解 `.map` 文件

.map 文件是打包过程中生成的，用于协助调试。它包含了压缩后的代码与源代码之间的映射关系。这样一来，当我们在压缩后的代码中遇到问题时，可以轻松定位到对应的源代码行。

去除 `.map` 文件

虽然 .map 文件对于调试很有用，但在生产环境中却毫无用处。我们可以通过以下步骤将其移除：

在 vue.config.js 文件中，将 sourceMap 选项设置为 false：

module.exports = {
  // ... 其他配置
  productionSourceMap: false
};

重新打包应用，即可去除 .map 文件。

进一步优化

除了去除 .map 文件外，我们还可以采取一些其他措施来进一步优化打包后的代码：

使用 Tree Shaking： Vue CLI 会自动启用 Tree Shaking，去除未使用的代码。但如果你使用的是外部库，则需要手动进行 Tree Shaking。
压缩 JavaScript 和 CSS： 使用诸如 uglify-js 或 cssnano 等工具压缩打包后的代码。
拆分代码： 将大型单文件组件拆分成更小的模块，以减少初始加载时间。
使用代码分割： 将代码拆分成按需加载的块，仅在需要时才下载。

示例：使用优化打包

以下是一个示例，展示了如何使用这些优化技巧：

# 安装 uglify-js 和 cssnano
npm install --save-dev uglify-js cssnano

# 在 vue.config.js 中配置
module.exports = {
  // ... 其他配置
  productionSourceMap: false,
  configureWebpack: {
    optimization: {
      minimizer: [
        {
          test: /\.js$/,
          use: 'uglify-js-webpack-plugin'
        },
        {
          test: /\.css$/,
          use: 'cssnano'
        }
      ]
    }
  }
};

# 重新打包应用
npm run build