Vue 是一款流行的前端框架，它的组件化思想和灵活的 API 设计使得开发者能够快速构建出优秀的单页面应用（SPA）或多页面应用（MPA）。而通过 Vue-Router 的路由管理，我们可以更好地组织和管理应用的路由结构。
然而，一些开发者在开发过程中会遇到 Vue-Router 切换页签时卡顿的问题。这是因为默认情况下，Vue-Router 会将所有路由都打包到一个 JavaScript 文件中，当应用体积很大时，就会导致页面加载缓慢、切换卡顿等问题。接下来，我们将详细介绍如何使用 vue-cli2/3 构建 SPA/MPA 应用的最佳实践，并解决 Vue-Router 切换页签卡顿问题。
SPA 和 MPA 的最佳实践
使用 vue-cli2/3 快速构建应用
vue-cli2/3 是官方提供的脚手架工具，它提供了快速生成 Vue 项目的能力，包括了打包工具，本地开发服务器等。我们可以通过以下命令来创建一个 SPA 项目：
# 使用 vue-cli2 $ vue init webpack my-project # 使用 vue-cli3 $ vue create my-project
针对 MPA 应用，vue-cli3 还提供了 vue-cli-plugin-pages 插件，它可以让我们快速创建多个页面，具体使用方法可以参考官方文档。
对于 SPA 应用，使用懒加载可以提高页面加载性能
在 SPA 应用中，我们可以使用 Route-based code splitting 技术来实现懒加载。这样可以让应用只在需要时才加载所需组件的代码，从而提高页面加载性能。
-- -------------------- ---- -------
-- -- -------- ------
----- --- - -- -- --------------------
----- --- - -- -- --------------------
-- -----------
----- ------ - --- -----------
------- -
- ----- ------- ---------- --- --
- ----- ------- ---------- --- --
-
---对于 MPA 应用，使用多入口来优化打包性能和加载速度
在 MPA 应用中，每个页面可以看作是一个独立的入口。我们可以通过配置多入口的方式，将每个页面所需的代码单独打包成一个文件。这样可以提高打包性能和加载速度。
-- -------------------- ---- -------
-- - ----------------- ------
-------------- - -
------ -
------ -----------------
------ -----------------
--
------- -
--------- ------------
--
--针对 MPA 应用，我们还可以使用 splitChunks 来将公共代码提取出来，以进一步提高加载速度。具体使用方法可以参考官方文档。
合理使用 Vue 插件和第三方库
对于 SPA 和 MPA 应用，我们都应该避免大量引入不必要的插件和第三方库。这些插件和库可能会增加应用的开销或者带来潜在的安全风险。
在使用 Vue 插件和第三方库时，我们应该遵循以下原则：
- 只引入项目中真正需要的插件和库，避免引入无用的代码
- 研究每个插件和库的源代码，并充分了解其实现原理，防止引入安全隐患
- 遵循最佳实践，正确使用插件和库，并对其进行维护和更新
解决 Vue-Router 切换页签卡顿问题
针对 Vue-Router 切换页签时卡顿的问题，我们可以通过代码分割和懒加载来提高应用性能。具体操作如下：
使用 webpack 提供的 require.ensure 函数实现代码分割
在 webpack 2 之前，我们可以使用 require.ensure 函数将组件代码分割成独立的 chunk，在需要时再动态加载。
-- -------------------- ---- -------
-- - --- -------- -----
----- --- - --------- -- -
----------------------------- -- -- -
------------------------------
---
-
----- ------ - --- -----------
------- -
- ----- ------- ---------- --- --
-
---在 webpack 2 之后，我们可以使用 import 函数来实现懒加载
在 webpack 2 之后，我们也可以使用 import 函数来实现懒加载。
// 使用 `import` 函数动态加载组件
const Foo = () => import('./Foo.vue');
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
]
});在 Vue-Router 中，懒加载也可以使用 component 字段来实现。
const router = new VueRouter({
routes: [
{
path: '/foo',
component: () => import('./Foo.vue'),
},
],
});针对 MPA 应用，可以将每个页面的代码分割成独立的 chunk
在 MPA 应用中，我们可以将每个页面的代码分割成独立的 chunk，然后在需要时再动态加载。这样可以减少应用的体积，并提高页面加载速度。
-- -------------------- ---- -------
-- - ----------------- -----------
-------------- - -
------ -
------ -----------------
------ -----------------
--
------- -
--------- ------------
-------------- ------------------------
--
--
-- ----------
----- ----- - -- -- --------- ----------------- ------- -- ---------------需要注意的是，针对 MPA 应用，在webpack.config.js的output配置chunkFilename为可缓存的文件名才能够生效.
output: {
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js', // 原因：如果一个 chunk 的内容发生改变，那么它的 chunkhash 就会发生改变
path: path.resolve(__dirname, 'dist')
}示例代码
SPA 代码示例
-- -------------------- ---- -------
-- -----
----- --- - -- -- --------------------
----- --- - -- -- --------------------
-- ----
----- ------ - --- -----------
------- -
- ----- ------- ---------- --- --
- ----- ------- ---------- --- --
--
---MPA 代码示例
-- -------------------- ---- -------
-- - ----------------- -----------
-------------- - -
------ -
------ -----------------
------ -----------------
--
------- -
--------- ------------
-------------- ------------------------
--
--
-- ----------
----- ----- - -- -- --------- ----------------- ------- -- ---------------总结
通过以上分析和实践，我们可以很好地解决 Vue-Router 切换页签卡顿问题，并借助 vue-cli2/3 实现 SPA/MPA 应用的最佳实践。在开发过程中，我们应该合理地使用代码分割、懒加载、Vue 插件和第三方库，以及其他优化技术，从而提高应用性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ce01d2b5eee0b5255f626f