vue打包的基层原理

我不是费圆

发布于 2024-05-24 18:59:05

560

发布于 2024-05-24 18:59:05

文章被收录于专栏：鲸鱼动画

npm run build 的原理是利用 Vue CLI 的构建工具，根据项目中配置的各种规则，将源代码转换成可在浏览器中运行的静态文件。 npm run build 主要做了以下几个操作：

读取项目配置：根据项目中的配置文件，如 vue.config.js，读取项目的构建规则，包括输入输出路径、代码转换规则、插件等。
分析项目代码：通过 webpack 进行代码分析，包括依赖分析、代码分块、模块化等操作，生成代码依赖树。
转换代码：依据 webpack 分析得到的代码结构，将源代码通过 babel 等转换工具进行转换，以满足不同浏览器的不同规范要求。
打包代码：将转换后的代码进行压缩和编译，生成多个静态资源文件，如 js、css、图片等。
输出静态文件：将打包好的静态资源文件输出到指定的目录，以供浏览器获取和加载。
优化打包结果：针对生成的静态资源文件进行优化，主要包括去重、缓存、压缩等操作，提高浏览器加载速度和用户体验。

通过以上步骤，vue run build 将源代码转换成了可在浏览器中运行的静态文件，并进行了一系列的优化和处理，以提高应用的性能和稳定性。

在执行 npm run build 命令时，可以通过 package.json 文件中的 scripts 字段的 build 命令自定义构建脚本，从而实现各种操作。一般来说，npm run build 命令可以做以下操作：

清理缓存：在构建之前，清除之前已经生成的构建文件和缓存文件，以保证每次构建的环境干净。
编译源代码：使用相应的编译工具，将源代码转换成符合浏览器识别的代码。
压缩代码：对编译后的代码进行压缩和优化，减少代码体积，以提高网页加载速度。
处理资源文件：如将图片、视频等资源文件进行打包、压缩等操作，以减少网络请求并提高网页加载速度。
生成构建结果：将编译和压缩后的代码、资源文件等生成到指定的目录中，以供网页加载使用。
提高构建效率：使用一些插件和工具，如 webpack、rollup 等，提高构建效率和性能。

以上操作只是 npm run build 可以做的一些常见操作，具体可以根据项目的需要进行自定义和扩展。

清理缓存的具体操作是根据不同的构建工具进行的，这里以常用的 webpack 为例：

在 Webpack 中，可以通过使用 clean-webpack-plugin 插件来清理构建缓存。在 webpack.config.js 配置文件中添加该插件的配置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    // 清除之前的构建文件
    new CleanWebpackPlugin(),
    // ...
  ],
  // ...
}

在执行 npm run build 命令时，Webpack 将会首先清除之前构建的文件和缓存，然后再重新构建新的文件。

除了使用插件清理缓存之外，也可以手动删除构建目录，例如在 package.json 文件中添加 "prebuild": "rm -rf dist" 命令，在执行 npm run build 命令时先删除 dist 目录，然后再进行构建。

自定义 build 构建脚本通常是指在执行 npm run build 命令时，除了默认的构建操作之外，还需要执行一些额外的处理逻辑，例如清理缓存、拷贝文件等操作。

可以在 package.json 文件中的 scripts 字段中自定义一个 build 命令，然后在该命令中添加自己的构建脚本。例如：

{
  "scripts": {
    "build": "rm -rf dist && vue-cli-service build && cp -r static/ dist/"
  }
}

在该例子中，我们通过 rm -rf dist 命令清理构建目录，然后执行 vue-cli-service build 进行构建，最后使用 cp -r static/ dist/ 将 static 目录下的静态资源文件拷贝到构建目录中。

如果您使用的是其他的构建工具或框架，也可以在相应的配置文件中添加您需要的构建脚本。例如，在 Webpack 中可以在 webpack.config.js 文件中的 plugins 字段中添加插件，在 Gulp 中可以在 gulpfile.js 文件中自定义任务等。

如果你需要更加高级的定制化，可以创建一个 build.js 文件，然后在 package.json 文件中的 scripts 字段中添加一个自定义的构建命令。

在根目录下创建一个 build.js 文件。
把你需要额外执行的操作写入 build.js 文件中。比如：

const { exec } = require('child_process')

exec('rm -rf dist', (err, stdout, stderr) => {
  if (err) {
    console.error('执行命令出错：', err)
    return
  }
  console.log('清理构建目录')
  // 执行vue-cli-service build 命令
  exec('vue-cli-service build', (err, stdout, stderr) => {
    if (err) {
      console.error('执行命令出错：', err)
      return
    }
    console.log('构建成功')
  })
})

在 package.json 文件中的 scripts 字段中添加一个自定义的构建命令。比如：

{
  "scripts": {
    "build:custom": "node build.js"
  }
}

在终端中执行 npm run build:custom 命令即可执行自定义的构建操作。

在这个例子中，我们在 build.js 文件中通过 exec 方法来执行系统命令，实现了清除构建目录和执行 vue-cli-service build 命令的功能。当然，你也可以在 build.js 文件中直接使用 Webpack、Gulp 等构建工具执行构建任务。

除了一些基本的使用和自定义构建脚本，我们还可以深入了解一些更深层次的原理，如：

Webpack：Vue CLI 依赖 Webpack 进行打包构建，深入了解 Webpack 可以帮助我们更好的理解 Vue CLI 的打包构建过程。
Babel：Vue CLI 默认集成了 Babel，可以使我们在代码中使用最新的 JavaScript 语法和更好的开发体验，进一步了解 Babel 可以帮助我们完成自定义配置、优化打包结果等操作。
ESLint：Vue CLI 默认集成了 ESLint，帮助我们在开发过程中遵循一致的代码风格和规范，进一步了解 ESLint 可以帮助我们更好的配置规则，提高代码质量。
Vue Router 和 Vuex：Vue CLI 也提供了集成 Vue Router 和 Vuex 的选项，深入了解这两个库可以帮助我们更好的理解 Vue 单页面应用的开发方式。
浏览器缓存：在上线后，我们需要考虑如何利用浏览器缓存来减小请求次数，优化应用性能。可以深入了解浏览器缓存原理、缓存策略等，从而更好的优化应用。