vue2打包 按需加载路由

Vue2的按需加载路由主要是为了提高应用的初始加载速度和性能，特别是在大型项目中有大量的路由的情况下。Webpack是一个常用的前端构建工具，它允许我们配置按需加载。在Vue Router中，可以结合Webpack的Code Splitting功能实现按需加载。

以下是一般的步骤：

1. **安装依赖**：首先需要安装`vue-router`和相关的插件，如`@vue/cli-plugin-router`如果使用Vue CLI。

   npm install vue-router webpack-bundle-analyzer --save-dev

2. **配置`webpack.config.js`**：在`configureWebpack`选项中添加按需加载的配置。例如，使用动态导入（import()）和 HtmlWebpackPlugin来分割模块：

   module.exports = {
     //...
     configureWebpack: {
       optimization: {
         splitChunks: {
           chunks: 'all',
           name: 'chunk-vendors', // 子模块名
           minSize: 0,
           maxSize: 0,
           cacheGroups: {
             vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, chunks: 'initial' },
             common: { test: /[\\/]common[\\/].*\.js/, priority: -20, reuseExistingChunk: true, chunks: 'all' }
           }
         }
       },
       runtimeChunk: {
         name: 'runtime'
       }
     }
   };

3. **设置路由**：在`router/index.js`中，使用异步组件来声明按需加载的路由：

   const AsyncComponent = function (resolve) {
     require(['path/to/your/module'], resolve);
   };

   export default [
     { path: '*', component: AsyncComponent }
   ];

4. **在模板中引用**：在需要的地方，通过`<router-view>`渲染异步组件：

   <template>
     <div>
       <router-view :component="loadComponent"></router-view>
     </div>
   </template>

   <script>
   import AsyncComponent from '@/components/YourComponent.vue';

   export default {
     data() {
       return {
         loadComponent: () => AsyncComponent
       }
     }
   }
   </script>