返回 导航

Vue.js

hangge.com

Vue.js - 异步组件详解1（webpack对代码分包、动态导入js）

作者：hangge | 2026-04-04 08:32
     在 Vue.js 开发中，除动态组件之外，异步组件的使用也是非常广泛的。例如，我们可能希望异步加载某些组件。这种异步加载的组件被称为异步组件。在加载异步组件时，webpack 会对其进行分包处理。 

一、webpack 对代码分包、动态导入 js

1，webpack 对代码分包

（1）webpack 的打包过程如下：
  • ① 默认情况下，在构建整个组件树的过程中，组件和组件之间是通过模块化直接依赖的。
  • ② webpack 在打包时会将组件模块打包到一起，比如打包到一个 app.js 文件中。 
  • ③ 随着项目不断增大，打包生成的 app.js 文件也会过大，从而导致首屏渲染速度变慢。 

（2）为了解决打包生成的 app.js 文件过大这一问题，我们可以在 webpack 打包时对代码进行分包。比如，对于一些不需要立即使用的组件，可以单独进行拆分，将它们拆分成一些小的代码块（如 chunk.js）。这些 chunk.js 会在需要时从服务器中被加载下来，并执行代码，显示其对应的内容。这种方式可以极大地提升 Web 应用程序的性能，特别是在计算机和网络资源受限的情况下。

2，未分包情况演示

（1）首先我们创建一个 math.js 文件，其内部编写一个求和函数并导出：
export function sum(num1, num2) {
  return num1 + num2;
}

（2）然后我们在 App.vue 组件中导入 math.js 中的 sum 函数，然后调用 sum 函数进行求和。 
<template>
    <div class="app">
        APP组件
    </div>
</template>
<script>
import { sum } from './math.js'
console.log(sum(10, 20))
export default {}
</script>

（3）最后我们打包项目，可以看到，默认情况下，在直接使用 import 语法导入 math.js 模块时，不会进行分包。我们已将编写的代码都打包到 app.1953f7f6.js 文件中，而将第三方库打包到 chunk-vendors.7780f89b.js 文件中。

3，分包演示（动态导入 js）

（1）如果我们希望 webpack 对打包的 math.js 模块进行分包，那么可以使用 import 函数。修改 App.vue 组件：
  • 使用 import 函数导入 math.js 模块，import 函数的返回值是一个 Promise 对象，接着在 then 回调函数的参数可以获取该模块的对象，然后调用模块中的 sum 函数。
<template>
    <div class="app">
        APP组件
    </div>
</template>
<script>
// 使用import函数导入math.js模块(导包时可以省略扩展名)。import函数的返回值是一个Pormise对象
import("./math").then(res => {
    console.log(res.sum(10, 20));
});
export default {}
</script>

（2）再次打包可以看到，使用 import 函数导入 math.js 模块时，会进行分包处理。math.js 模块已经被单独分到 230.028da418.js 文件中。其实，webpack 底层就是通过 import 函数对代码进行分包的。
评论

全部评论（0）

回到顶部