Laravel+Vue项目中懒加载vue-tel-input并从vendor.js排除

1. 确保无全局引入 #

• 检查resources/js/app.js或其他全局入口文件，不要直接引入vue-tel-input或调用Vue.use(VueTelInput)，全局引入会强制将其打包进vendor.js。

2. 调整Laravel Mix的Webpack配置 #

在webpack.mix.js中添加SplitChunks配置，强制将vue-tel-input拆分为独立chunk：

mix.js('resources/js/app.js', 'public/js')
   .vue()
   // 添加webpack配置
   .webpackConfig({
     optimization: {
       splitChunks: {
         chunks: 'all',
         cacheGroups: {
           // 单独拆分vue-tel-input
           'vue-tel-input': {
             test: /[\\/]node_modules[\\/]vue-tel-input[\\/]/,
             name: 'chunk-vue-tel-input',
             priority: 10, // 优先级高于默认的vendor缓存组
             enforce: true // 强制拆分
           }
         }
       }
     }
   });

3. 组件内正确异步引入 #

根据Vue版本选择对应写法：

Vue 3 写法（使用<script setup>） #

<script setup>
import { defineAsyncComponent } from 'vue';

// 异步加载组件和样式，合并到同一个chunk
const VueTelInput = defineAsyncComponent(async () => {
  // 先加载样式
  await import(/* webpackChunkName: "chunk-vue-tel-input" */ 'vue-tel-input/vue-tel-input.css');
  // 再加载组件
  const { VueTelInput } = await import(/* webpackChunkName: "chunk-vue-tel-input" */ 'vue-tel-input');
  return VueTelInput;
});
</script>

<template>
  <VueTelInput v-model="phone" />
</template>

Vue 2 写法 #

<script>
export default {
  components: {
    // 异步注册组件
    VueTelInput: () => 
      Promise.all([
        import(/* webpackChunkName: "chunk-vue-tel-input" */ 'vue-tel-input'),
        import(/* webpackChunkName: "chunk-vue-tel-input" */ 'vue-tel-input/vue-tel-input.css')
      ]).then(([{ VueTelInput }]) => VueTelInput)
  },
  data() {
    return {
      phone: ''
    }
  }
}
</script>

<template>
  <VueTelInput v-model="phone" />
</template>

4. 清理缓存并重新编译 #

• 删除public/js目录下的旧打包文件
• 执行编译命令：npm run dev（开发环境）或npm run production（生产环境）

完成后，你会在public/js目录下看到chunk-vue-tel-input.js和对应的css文件，且vendor.js中不再包含vue-tel-input的代码，只有当使用该组件的页面加载时，才会异步加载这个chunk。

内容的提问来源于stack exchange，提问作者user1580394