vue项目性能优化,vue项目中的性能优化

vue.config.js中的webpack配置,优化及多页面应用开发

x初始化项目后没有了build和config文件，如果你想对webpack相关内容进行配置，需要自己在根目录下（与package.json同级）创建一个vue.config.js文件，这个文件一旦存在，那么它会被 @vue/cli-service 自动加载。

先声明，如果用vue进行工程化开发，首先要有node.js，然后再下一个npm，不过一般新版的node都会有npm所以可以不用弄。指令是在命令行里输入。

VUE3多页面打包 方式一：webpack配置 webpack安装参考：[安装 | webpack 中文网]。

vue自动配置打包完后通常只有一个html页面，如果我们想要打包出两个页面怎么办呢？只需要修改webpack的配置，下边是我的项目截图，供参考 在vue.config.js中配置 其中entry为文件引用路径，template为打包后文件名字及位置。

Vue性能优化方法

原理 可以通过按需进行加载dom，即只显示可视化区域的数量。从而减少dom的结构，实现性能提升。因此，分页加载、懒加载等方案根本治标不治本。

当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。

基于vue-cli0构建项目，npm引入多个第三方包。build之后，包体积太大导致首屏过长。

有以下的原因和解决方法：菜单数据量过大：如果菜单数据量较大，那么每次重新渲染都会造成一定的性能压力。此时可以考虑对菜单进行分页或者虚拟滚动等优化处理，以避免不必要的性能损耗。

vue编译打包速度优化

vue项目打包能优化10秒。根据相关公开信息查询知vue项目打包优化升级，打包时间优化10秒。Vue是单页面应用，有很多的路由引入，使用webpcak打包后的文件很大，进入首页时，加载的资源过多，页面会出现白屏的情况。

减少打包体积、加快打包速度，常规的优化有以下两种：按需加载是通过只引用使用的组件来减少体积，这就会有一个问题：如果项目重度依赖第三方插件（如 ElementUI 、 vant ），那么此方案将无法减少打包的体积。

通过配置vue-cli把一些平常不需要用的包排除在打包文件之外。

Vue项目优化

1、Vue 类的项目开发中项目结构基本都是类似于 Vue-cli 生成的方式，这种方式开发中，最常用到的模式是开启代理进行 mock 调试或远程调试，也就是使用了 Vue-cli 设置的配置 proxyTable 或者直接使用 Webpack-dev-server提供的 proxy 选项。

2、通过可视化UI面板 运行 vue ui -任务- build 完成-分析 默认情况下，Vue项目的开发模式和发布模式共用同一个打包入口文件，即为 src/main.js 。

3、服务端渲染 服务端渲染对于刚接触vue的新手来说，并不是那么友好，虽然已有官方SSR中文文档。但是对于一个已经开发完毕的vue项目去接SSR无论是从工作量还是技术角度来说，都是一种挑战。

4、对于无限长列表来说，性能优化主要方法是保持仅渲染可视化部分。来看一下下面这个例子：这是最常见的写法，不过如果列表的内容很多，你就会发现页面十分的卡顿。

5、html#CDN 也可以像这篇文章是直接在vue.config.js中配置cdn的url地址 vue-cli3打包项目引入外部CDN资源文件 moment的其他语言包没有被打包了，vue等文件也都用的cdn文件，没有被打包进去vendor。

6、当你的项目页面越来越多之后，在开发环境之中使用 lazy-loading 会变得不太合适，每次更改代码触发热更新都会变得非常的慢。所以建议只在生成环境之中使用路由懒加载功能。

如何优化Vue项目

1、服务端渲染 服务端渲染对于刚接触 vue 的新手来说，并不是那么友好，虽然已有官方 SSR 中文文档。但是对于一个已经开发完毕的 vue 项目去接 SSR 无论是从工作量还是技术角度来说，都是一种挑战。

2、通过命令行方式 通过可视化UI面板 运行 vue ui -任务- build 完成-分析 默认情况下，Vue项目的开发模式和发布模式共用同一个打包入口文件，即为 src/main.js 。

3、当你的项目页面越来越多之后，在开发环境之中使用 lazy-loading 会变得不太合适，每次更改代码触发热更新都会变得非常的慢。所以建议只在生成环境之中使用路由懒加载功能。

4、http缓存优化是网页性能优化的重要一环，这一部分我会在后续笔记中做一个详细总结，所以本文暂不多做详细整理。本文主要从网页渲染过程、网页交互以及Vue应用优化三个角度对性能优化做一个小结。

标签：性能优化项目vue