面试题：Vue CLI多页面应用部署时，如何优化公共资源的加载策略？

代码分割

具体实现方式：
- 在Vue CLI项目中，可以使用webpack - splitChunks插件进行代码分割。在vue.config.js文件中配置：
```
module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        vendor: {
          name:'vendors',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all'
        }
      }
    });
  }
};
```
- 这样会将node_modules中的依赖代码单独打包成一个文件，不同页面在加载时可以共用这个vendors文件，避免重复加载相同的第三方库代码。
注意事项：
- 合理设置cacheGroups的name，避免命名冲突。
- 注意test规则的准确性，确保正确分离出需要的模块。如果test规则设置不当，可能会导致不该拆分的代码被拆分，或者该拆分的代码未被拆分。
- 对于动态导入的模块，要注意splitChunks对其的影响。动态导入的模块可能需要单独配置splitChunks中的async等参数来实现正确的拆分。

CDN引入

具体实现方式：
- 首先在index.html模板文件中引入CDN链接。例如引入vue库：
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
```
- 然后在webpack配置中告诉webpack不要打包这些通过CDN引入的模块。在vue.config.js中配置：
```
module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue'
    }
  }
};
```
- 这样webpack在打包时就不会将vue模块打包进项目中，而是依赖CDN引入的资源。
注意事项：
- 要确保CDN链接的稳定性和可靠性，选择知名且稳定的CDN服务商。如果CDN链接出现问题，可能导致页面无法正常加载。
- 注意CDN引入的资源版本与项目所依赖的版本一致性，避免因版本不兼容导致项目运行出错。
- 由于CDN资源从外部加载，可能会存在跨域问题。如果出现跨域，需要在服务器端或者CDN配置中设置正确的CORS（跨域资源共享）规则。

懒加载

具体实现方式：
- 对于组件的懒加载，在Vue中可以使用动态导入语法。例如：
```
const MyComponent = () => import('./components/MyComponent.vue');
```
- 在路由配置中使用懒加载，router/index.js：
```
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('./views/Home.vue')
  }
];
```
- 这样只有在需要使用组件或者访问对应路由时，才会加载相关的代码，减少初始加载的文件大小。
注意事项：
- 对于懒加载的组件，要注意其加载时机的合理性。如果加载时机过早，可能无法达到优化加载性能的目的；如果加载时机过晚，可能会导致用户体验不佳。
- 懒加载可能会增加请求次数，要权衡请求次数增加带来的开销与代码按需加载带来的性能提升。可以结合代码分割等技术，合理合并懒加载的文件，减少请求次数。
- 注意懒加载组件之间的依赖关系。如果懒加载组件A依赖于懒加载组件B，要确保组件B在组件A使用前正确加载。

预加载和预渲染

具体实现方式：

预加载：在vue - router中，可以使用router - link的rel="preload"属性来预加载资源。例如：

<router - link to="/about" rel="preload">About</router - link>

预渲染：可以使用prerender - spa - plugin插件。首先安装该插件：npm install prerender - spa - plugin - - save - dev。然后在vue.config.js中配置：

const PrerenderSPAPlugin = require('prerender - spa - plugin');
const path = require('path');
module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('prerender - spa - plugin')
       .use(new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: ['/', '/about', '/contact']
        }));
    }
  }
};

预渲染会在构建时生成特定路由的HTML文件，加快首屏加载速度。

注意事项：
- 预加载：预加载资源过多可能会造成带宽浪费，要根据实际情况合理选择需要预加载的资源。同时，要注意预加载资源的优先级设置，确保重要资源优先预加载。
- 预渲染：预渲染适合内容变化不大的页面，如果页面数据动态性很强，可能需要更多的处理来更新预渲染的内容。另外，预渲染可能会增加构建时间，要权衡构建时间与性能提升的关系。同时，预渲染的页面可能会存在SEO相关的问题，需要确保搜索引擎能够正确抓取和理解预渲染的内容。

星途面试题库

面试题：Vue CLI多页面应用部署时，如何优化公共资源的加载策略？

知识考点

面试题答案

代码分割

CDN引入

懒加载

预加载和预渲染