翻译：疯狂的技术宅
作者：Matthias Sommer
来源：dzone
转发地址：https://dzone.com/articles/speed-up-your-vuejs-single-page-app
我有一个项目用了 Vue.js 来构建单页应用程序。随着上线日期的临近，性能优化的工作变得越来越重要。在本文中，我收集了有关在加载时间和渲染性能方面提高 Vue.js 应用性能的所有知识。
使用 Vue.js，你可以快速构建单页应用。Webpack 会为你将所有内容捆绑到文件（HTML、JavaScript、CSS）中，最后可以用 nginx 来提供。至少，这是我们的设置。但是 Webpack 会警告你某些资源太大。
需要注意的是，一旦用户访问 SPA，这三个文件将会被加载，并且只有在加载完毕之后才会渲染页面。但是最初加载的页面一般不需要太多文件内容，并且不应拖慢用户访问我们的网站的速度。
前面小编也整理过关于Vue和Reate 相关的性能优化相关文章，具体学习文章请见本篇文章底部
以下介绍了有关如何缓解此类问题的几种方法，以及在响应性和性能方面进一步改进 Vue.js 应用的其他方法。
功能组件
功能组件是不包含任何状态和实例的组件。将无状态 Vue 组件转换为功能组件可以大大提高渲染性能。
只需在顶层 template 标记中添加 functional 关键字即可：
<code>1...
/<code>
要像以前一样访问 prop 和数据，你必须进行一些小的调整。
<code> 1 2{{ props.someProp }}
3 4/<code>
如果你使用 i18n 进行国际化，则必须在 parent 之前加上 $t：
<code>1{{ parent.$t('app.not-found.message') }}/<code>使用功能组件，我们无权使用方法或计算的 prop。但是，我们仍然可以使用 $options 访问方法。
<code> 1 23 {{ $options.username(props.user) }} 4
5 6/<code>
延迟加载组件
延迟加载组件可以节省大量的初始下载时间。调用 import() 函数时，将会下载所有延迟加载的资源。对于 Vue 组件，仅在请求渲染时才发生。对话框是注定会这样的。通常仅在用户交互后才显示它们。
<code> 1 23 ... 4 5
6 7/<code>
Webpack 将为 ModalDialog 组件创建一个单独的块，该块不会在页面加载时立即下载，而是仅在需要时才下载。
注意不要延迟加载应自动显示的组件。例如以下内容（无提示）将无法加载模式对话框。
<code>1mounted() {
2 this.$bvModal.show('password-check');
3},/<code>原因是已安装的 hook 是在延迟加载模态组件之前进行评估的。
延迟加载路由
构建 SPA 时，JavaScript 捆绑包可能会变得很大，从而增加页面加载时间。如果我们可以将每个路由的组成部分拆分为一个单独的块，然后仅在访问路由时才加载它们，则效率会更高。
<code>1import ProjectList from '@/components/ProjectList.vue';
2export const routes = [
3 {
4 path: '/projects',
5 name: 'projects',
6 component: ProjectList,
7 },
8]/<code>定义一个异步组件非常容易，该组件将由 Webpack 自动进行代码拆分。只需更改导入语句：
<code>1const ProjectList = () => import('@/components/ProjectList.vue');/<code>除此之外，无需更改路由配置。通过以下方式在生产模式下构建你的应用：
<code>1"build": "vue-cli-service build --mode production"/<code>
并确认会生成很多块
Vue 和 Webpack 中的代码拆分
你还可以通过在浏览器中打开开发者控制台来验证此功能是否正常。在 Network 标签中，一旦你访问新路由，就会异步加载多个 JavaScript 文件。在开发模式下，每个块都将被赋予一个自动递增的数字。在生产模式下，将使用自动计算的哈希值代替。
延迟加载的块和预取缓存
Vue 有一个很酷的功能就是 Vue 自动添加 Webpack 的魔术注释 (https://webpack.js.org/api/module-methods/#magic-comments)，以便进一步自动预取其他块（请参阅预取缓存一节） 。但是，预取仅在浏览器完成初始加载并变为空闲之后才开始。
使对象列表不可变
通常，我们将从后端获取对象列表，例如用户、项目、文章等。默认情况下，Vue 使数组中每个对象的每个第一级属性都具有响应性。对于大量对象而言，这代价可能会很大。有时我们只想显示对象时就不需要去修改它们。
所以在这种情况下，如果我们阻止 Vue 使列表具有响应性，那么就可以获得一些性能。我们可以通过使用列表中的 Object.freeze 来做到这一点，例如使其一直不变。
<code>1export async function get(url: string): Promise {
2 const response = await Object.freeze(axios.get(url));
3 return response.data;
4}/<code>评估运行时性能
我们已经讨论了许多改进 Vue SPA 的方法，但是不知道我们实际获得了多少性能。可以通过使用浏览器中开发者工具的 Performance 标签来实现。
为了获得准确的数据，我们必须在 Vue 应用中激活性能模式。让我们在 main.ts 文件中用开发模式激活它
<code>1Vue.config.performance = process.env.NODE_ENV !== "production";/<code>
这将激活 Vue 内部使用的 User Timing API (https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API。
打开浏览器，然后按 F12 键打开开发者控制台。切换到 Performance 选项卡，然后单击 Start Profiling。在 Chrome 中，“ Timings” 行显示重要标记，例如 “First Contentful Paint” 和 “First Meanfulful Paint” 时间。你应该尝试减少它们，以便你的用户可以尽快使用该网站。
总结
在本文中，我们了解了如何对路由和组件使用延迟加载以将 SPA 分成多个块，功能组件如何提高性能以及如何衡量这些改进。
推荐Vue和React学习资料文章：
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》
《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《
Vue3 尝鲜》《手把手让你成为更好的Vue.js开发人员的12个技巧和窍门【实践】》
《2020 年，Vue 受欢迎程度是否会超过 React？》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】 》
《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】 》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手深入Redux react-redux中间件设计及原理（上）【实践】》
《手把手深入Redux react-redux中间件设计及原理（下）【实践】》
《为了学好 React Hooks, 我解析了 Vue Composition API》
《【React 高级进阶】探索 store 设计、从零实现 react-redux》
《深入浅出掌握React 与 React Native这两个框架》
《你需要的 React + TypeScript 50 条规范和经验》
《手把手教你深入浅出实现Vue3 & React Hooks新UI Modal弹窗》
《全平台（Vue/React/微信小程序）任意角度旋图片裁剪组件》
翻译：疯狂的技术宅
作者：Matthias Sommer
来源：dzone
转发地址：https://dzone.com/articles/speed-up-your-vuejs-single-page-app
