解决vue单页面应用进入页面加载所有 js 的问题

解决 Vue 单页面应用进入页面加载所有 js 的问题需要使用到 webpack 的代码分割功能。

Webpack 提供了代码分割功能，通过将应用中的代码分割成多个块(chunk)，可以实现按需加载，减少首次加载时间。

以下是详细攻略：

步骤一：配置 webpack

在 webpack.config.js 中进行配置，启用代码分割功能，并将其设置为按需加载。具体做法如下：

1. 安装 @babel/plugin-syntax-dynamic-import。

npm install --save-dev @babel/plugin-syntax-dynamic-import

@babel/plugin-syntax-dynamic-import 是一个 Babel 插件，用于解析动态导入语法。

1. 使用 import 导入模块，将其转换为动态导入语法。

// 将前面的 import 语句修改为以下形式
const Foo = () => import('./Foo.vue');

1. 在 output 中配置 chunkFilename，设置输出的 chunk 的名称。

// webpack.config.js
{
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
}

这里的 chunkFilename 属性用于设置输出的 chunk 的名称。其中，[name] 表示 chunk 的名称，[chunkhash] 表示 chunk 的 hash 值。

步骤二：将 vue-router 集成到 webpack

如果使用 vue-router，还需要将其集成到 webpack 中。

1. 安装 vue-router。

npm install --save vue-router

1. 创建 router.js，并将路由按需加载。

// router.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

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

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Foo,
    },
    {
      path: '/bar',
      name: 'bar',
      component: Bar,
    },
  ],
});

在 router.js 中，通过 import 导入组件，将其转换为动态导入语法。这样，在路由跳转时，相应的组件才会被加载。

1. 在 main.js 中，将 router.js 引入，并注入到 Vue 实例中。

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

示例说明：

下面是两个示例，分别说明了按需加载和预加载的用法。

示例一：按需加载

这个示例展示了按需加载的用法。在路由跳转时，相应的组件才会被加载。

// router.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

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

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Foo,
    },
    {
      path: '/bar',
      name: 'bar',
      component: Bar,
    },
  ],
});

示例二：预加载

这个示例展示了预加载的用法。在应用加载时，预先加载一些组件，提高用户体验。

// router.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const Foo = () => import(/* webpackPrefetch: true */ './Foo.vue');
const Bar = () => import(/* webpackPrefetch: true */ './Bar.vue');
const OtherComponent = () => import(/* webpackPrefetch: true */ './OtherComponent.vue');

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Foo,
    },
    {
      path: '/bar',
      name: 'bar',
      component: Bar,
    },
    {
      path: '/other',
      name: 'other',
      component: OtherComponent,
    },
  ],
});

在这个示例中，将组件的 import 语句中添加参数 webpackPrefetch: true，告诉 webpack 在应用加载时预加载这些组件。这样，在路由跳转时，这些组件已经被加载到内存中，不需要再去服务器上下载。预加载的组件可以提高用户的体验。