解决 Vue.js 组件懒加载在 Webpack 中无效的问题

在 Vue.js 中，组件懒加载是一种常见的优化技术，可以大大提高应用的加载速度和性能。然而，有时候我们会发现在 Webpack 中使用组件懒加载时，它并不起作用，这是为什么呢？本文将会详细介绍这个问题，并提供解决方案。

问题描述

在 Vue.js 中，我们可以使用 import 语句来实现组件懒加载，例如：

const Foo = () => import('./Foo.vue')

而在 Webpack 中，我们通常会使用 babel-plugin-syntax-dynamic-import 插件来解析动态导入语法。然而，即使我们配置了这个插件，有时候组件懒加载仍然无效，这时候我们会发现，所有的组件都会被打包进一个巨大的文件中，而不是按需加载。

问题原因

这个问题的原因是因为 Webpack 在解析动态导入语法时，会根据文件的路径来生成一个 chunk 名称，例如：

const Foo = () => import('./Foo.vue')

最终打包的结果可能是这样的：

/* webpackChunkName: "Foo" */
import('./Foo.vue')

这样就会生成一个名为 Foo.js 的 chunk 文件。然而，如果我们的项目中存在多个组件都使用了相同的路径，那么它们就会被打包进同一个 chunk 中，而不是分别打包成独立的文件。

解决方案

要解决这个问题，我们需要给每个组件的路径加上一个唯一的前缀，以确保它们被打包成独立的文件。我们可以使用 Webpack 的 chunkFilename 配置来实现这个目的。具体来说，我们可以在 output 配置中添加以下代码：

output: {
  // ...
  chunkFilename: '[name].[contenthash].js'
}

这里的 [name] 表示 chunk 名称，[contenthash] 表示 chunk 内容的 hash 值，这样就能够确保每个 chunk 都有一个唯一的文件名了。

接着，我们需要修改组件懒加载的路径，给它们加上一个前缀，例如：

const Foo = () => import(/* webpackChunkName: "Foo" */ '@/views/Foo')

这里的 @ 表示项目根目录，我们可以将所有的组件放在 views 目录下，然后给它们加上一个前缀，这样就能够确保它们被打包成独立的文件了。

示例代码

下面是一个完整的示例代码，可以直接在 Vue.js 项目中使用：

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  output: {
    chunkFilename: '[name].[contenthash].js'
  }
}

// Foo.vue
<template>
  <div>Foo</div>
</template>

<script>
export default {
  name: 'Foo'
}
</script>

// Bar.vue
<template>
  <div>Bar</div>
</template>

<script>
export default {
  name: 'Bar'
}
</script>

// App.vue
<template>
  <div>
    <button @click="loadFoo">Load Foo</button>
    <button @click="loadBar">Load Bar</button>
    <component :is="component" v-if="component" />
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
      component: null
    }
  },

  methods: {
    async loadFoo() {
      const { default: Foo } = await import(/* webpackChunkName: "Foo" */ '@/views/Foo')
      this.component = Foo
    },

    async loadBar() {
      const { default: Bar } = await import(/* webpackChunkName: "Bar" */ '@/views/Bar')
      this.component = Bar
    }
  }
}
</script>

在这个示例代码中，我们定义了两个组件 Foo 和 Bar，它们分别被放在 views 目录下。然后在 App 组件中，我们使用了两个按钮来动态加载这两个组件，并将它们渲染出来。注意，在组件懒加载的路径中，我们加上了一个 views 前缀，并给它们分别起了一个唯一的名字，这样就能够确保它们被打包成独立的文件了。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4faa2a941bf713493e2a1