vue 打包单独的module

Vue.js打包成单独模块（Chunking）是为了将应用拆分成更小、更易于管理和加载的部分，特别是当项目规模较大时。通过按需引入（懒加载），我们可以只加载用户真正需要的组件，从而提高首屏加载速度。Vue CLI 提供了Webpack作为构建工具，默认配置下已经支持按模块打包。

1. 使用Vue CLI时，`vue.config.js`文件允许你设置分割（chunking）策略。例如，你可以指定哪些路由或组件应该被打包到独立的chunk中：

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all', // 或者手动选择需要分离的chunks
        minSize: 10000,
        maxSize: 0,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        cacheGroups: {
          vendors: {test: /[\\/]node_modules[\\/]/, name: 'vendors', priority: -10}, // 包含所有第三方库
          default: {minChunks: 2} // 自定义的模块
        }
      }
    }
  }
}

2. `async` 和 `import()` 功能也可以帮助创建动态导入的chunk，只需要在模板里引用时使用它们：

<script>
import(MyComponent).then((MyComponent) => {
  // 使用 MyComponent
});
</script>