基于vuecli30构建项目，npm引入多个第三方包build之后，包体积太大导致首屏过长毫无体验感实践的项目喜欢捣鼓可以clone下来 项目地址 vuefiction 只总结了亲测效果明显的几种方案，解决方案大多来自于日常；1服务端渲染 服务端渲染对于刚接触vue的新手来说，并不是那么友好，虽然已有官方SSR中文文档但是对于一个已经开发完毕的vue项目去接SSR无论是从工作量还是技术角度来说，都是一种挑战2预渲染方式 在构建时build；在 src 下新建 Skeleton 文件夹，其中新建 indexjs 以及 indexvue ，在其中写入以下内容，其中，骨架屏的 indexvue 页面样式请自行编辑 在 中写入以下内容 所以，最终的配置文件如下 在 src 下新建；适用于vue的SEO优化方案，以下几种1ssr，即单页面后台渲染 2vuemetainfo 与prerenderspaplugin 预渲染 3nuxt 4phantomjs。

下面是代码的具体实现1首先是引入资源，这里用的是bootstrap提供的资源， 你可以登录官网进入查看哦，网址 vue在最外层的indexjs文件中引入，引入如下然后项目中需要改的地方是bulid文件夹；以下简单配置优化后可提升最少2倍的构建速度按需引用启用happypack多核构建项目修改sourcemap配置启用DllPlugin和DllReferencePlugin预编译库文件实践1按需引用11几乎所有的第三方组件框架都会提供组件的 按需引用 方式，以iview；二原理 可以通过按需进行加载dom，即只显示可视化区域的数量从而减少dom的结构，实现性能提升因此，分页加载懒加载等方案根本治标不治本三实现 此文章基于 vuevirtualscrolllist 第三方插件，通过虚拟列表。

所以将JS文件拆开，点击某个页面时再加载该页面的JS是一个很好的优化方法 这里用到的就是vue的组件懒加载在routerjs中，不要使用import的方法引入组件，使用requireensureimport index from #39@componentsindex#39const；有以下的原因和解决方法1菜单数据量过大如果菜单数据量较大，那么每次重新渲染都会造成一定的性能压力此时可以考虑对菜单进行分页或者虚拟滚动等优化处理，以避免不必要的性能损耗2computed属性计算复杂如果您在；1Vue的data属性 2Vuex的state对象的属性顺便说一下，当你需要修改这个数据，你可以通过创建一个新的对象数组 当你需要增加一个对象，可以参考下面这个例子想了解具体提升了多少 性能 吗欲知后事如何，请看下篇。

我们需要借助一下神器webpack，使用 requirecontext 方法来创建自己的 模块 上下文，从而实现自动动态require组件这个方法需要3个参数要搜索的文件夹目录是否还应该搜索它的子目录以及一个匹配文件的正则表达式 我们在components文；以下给出在下知道的几种优化方案使用CDN资源，减小服务器带宽压力路由懒加载将一些静态js css放到其他地方如OSS，减小服务器压力按需加载三方资源，如iview，建议按需引入iview中的组件使用nginx开启gzip减小网络传输的流量大小。

SSR优化 当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染编译前 编译后 源码体积有优化 与Vue2相比较，Vue3；3运行npm run dll就可以生成vendormanifestjson和 4然后在indexhtml中引入 然后就可以正常的进行编译打包，会发现将更多的依赖放到vendor，打包速度越快 优化前 优化后 大概平均可以节省三；优化方法1路由懒加载此方法会把原本打包到一个appjs文件分开成多个js文件打包，这样会减小单个文件的大小，但是不会减小整个js文件夹的大小通过这种方式可以做到按需加载，只加载单个页面的js文件2组件异步加载加载。

对于无限长列表来说，性能优化主要方法是保持仅渲染可视化部分来看一下下面这个例子这是最常见的写法，不过如果列表的内容很多，你就会发现页面十分的卡顿此时大家可以利用 vuevirtualscroller 这个组件，进行优化这样；框架代码如果你的代码依赖了一些框架，比如elementplus，那么更新速度就会受到框架代码的影响建议尽可能避免依赖过多的框架或者使用压缩版的框架代码针对优化方式，可以尝试以下几种方式减少不必要的依赖，简化代码结构；发布模式为 srcmainprodjs 两中修改webpack配置的方式 configureWebpack 和 chainWebpack ，两者功能相同，只是使用方式不同， 默认情况下，import导入的第三方依赖会被打包进同一个文件，造成文件体积过大。