作者：MatthiasSommerVue.js构建单页应用程序。随着发布日期的临近，性能优化变得越来越重要。在本文中，我收集了关于在加载时间和渲染性能方面提高Vue.js应用程序性能所需了解的所有信息。使用Vue.js，您可以快速构建单页应用程序。Webpack将为您将所有内容打包成文件（HTML、JavaScript、CSS），最终可以使用nginx提供这些文件。至少，这是我们的设置。但是Webpack会警告你有些资源太大了。需要注意的是，一旦用户访问SPA，就会加载这三个文件，加载完成后才会渲染页面。但最初加载的页面通常不需要太多文件内容，不应减慢用户访问我们网站的速度。这里有一些关于如何缓解此类问题的想法，以及在响应性和性能方面进一步改进Vue.js应用程序的其他方法。功能组件功能组件是不包含任何状态或实例的组件。将无状态的Vue组件转换为功能组件可以极大地提高渲染性能。只需将functional关键字添加到顶级模板标签：...要像以前一样访问props和数据，您必须进行一些小的调整。{{props.someProp}}如果您使用i18n进行国际化，则需要Prepend$ttoparent:{{parent.$t('app.not-found.message')}}对于函数式组件，我们无法访问方法或计算道具。但是，我们仍然可以使用$options访问方法。{{$options.username(props.user)}}延迟加载组件延迟加载组件可以节省大量的初始下载时间。调用import()函数时，将下载所有延迟加载的资源。对于Vue组件，这仅在请求渲染时发生。对话应该是这样的。它们通常仅在用户交互后显示。...Webpack将为ModalDialog组件创建一个单独的块，该块不会在页面加载时立即下载，但仅在需要时才下载。注意不要延迟加载应该自动显示的组件。例如，以下（静默地）将无法加载模态对话框。mounted(){this.$bvModal.show('密码检查');}，原因是挂载的钩子在延迟加载模态组件之前被评估。延迟加载路由构建SPA时，JavaScript包可能会变大，从而增加页面加载时间。如果我们可以将每条路由的组成部分拆分成一个单独的块，并且只在访问路由时加载它们，那将会更有效率。从“@/components/ProjectList.vue”导入ProjectList；exportconstroutes=[{path:'/projects',name:'projects',component:ProjectList,},]定义将由Webpack自动代码拆分服务的异步组件非常容易。只需更改导入语句：constProjectList=()=>import('@/components/ProjectList.vue');除此之外，没有路由配置更改。使用以下命令在生产模式下构建您的应用程序："build":"vue-cli-servicebuild--modeproduction"并确认在Vue和Webpack中生成了许多代码拆分块您也可以在浏览器中通过打开开发人员控制台来验证此功能是否正常工作。在“网络”选项卡中，只要您访问新路线，就会异步加载多个JavaScript文件。在开发模式下，每个块都会被赋予一个自动递增的数字。在生产模式下，将使用自动计算的哈希值。延迟加载块和预取缓存Vue的一个很酷的特性是Vue自动添加Webpack的神奇注释以进一步自动预取额外的块（请参阅预取缓存部分）。但是，预取仅在浏览器完成其初始加载并变为空闲后才开始。使对象列表不可变通常，我们将从后端获取对象列表，例如用户、项目、文章等。默认情况下，Vue使数组中每个对象的每个一级属性都是响应式的。对于大量对象，这可能很昂贵。有时我们不需要修改对象而只是想显示它们。所以在这种情况下，如果我们阻止Vue使列表响应，那么我们可以获得一些性能。我们可以通过在列表中使用Object.freeze来做到这一点，例如让它一直保持不变。导出异步函数get(url:string):Promise
