vue页⾯⾸次加载缓慢原因及解决⽅案，及使⽤compression-
webpack-plu。。。
第⼀次打包vue的项⽬部署到服务器，发现⾸次加载特别的缓慢要⼏⼗秒才加载出来，完全没有在本地开发环境上那么流畅。主要原因是页⾯在打包后没有进⾏相关的配置导致资源⽂件特别⼤，⼀次想要全部加载完成回特别的耗时。
下⾯是总结的vue项⽬性能优化的⽅案
⼀：vue-router 路由懒加载
在使⽤同步的⽅式加载组件的时候，⾸屏加载会对⽹络资源加载⽐较多，资源⽐较⼤，加载速度⽐较慢，所以设置路由懒加载，按需加载会加速⾸屏的渲染。但是在设置懒加载之后，实现按需加载，那么项⽬打包不会把所有js打包进app.js⾥⾯，有点是减少app.js体积，缺点就是会把其他js分开打包，造成多个js⽂件，会有多次http请求。若项⽬⽐较⼤，需要注意懒加载的效果。按需加载之后，除了公共⽂件，会把每个页⾯独有的样式和脚本都打包成⼀个单独的⽂件，这样除了公共⽂件外，访问⼀个页⾯只会加载改页⾯所需要的⽂件即可，这会⼤⼤减少⾸屏页⾯的压⼒
  1是同步加载，页⾯加载就全部导⼊
  2和3是异步加载，使⽤该组件的时候才会请求（懒加载）
    component: () => import('url');  // 这个是懒加载
    component: resolve => (require(['url'], resolve));// 这个是按需加载，
⼆：代码包的优化，
  1.去掉编译⽂件中map⽂件
    在编译好后，经常会有特别多的.map⽂件，这些主要是帮助我们线上调试代码⽤的，为了避免部署包过⼤，通常都不⽣成这些⽂件。在config配置中将productionSourceMap的值设置为false。再次打包就没有.map⽂件了。
  2.对项⽬代码中的JS/CSS/SVG(*.ico)⽂件进⾏gzip压缩
    gzip会对js、css⽂件进⾏压缩处理（压缩效果明显，能压缩⾄原来的1/3左右）；对于图⽚进⾏压缩问题，对于png、jpg、jpeg没有压缩效果，对于svg，ico⽂件以及bmp⽂件压缩效果达到1/2，在productionGzipExtensions: ['js', 'css', 'svg']设置需要进⾏压缩的什么格式的⽂件。
  　在config中配置如下图
    当然，这只是开启了gzip压缩开关，还需要安装compress-webpack-plugin插件进⾏⽀持
    npm i --save-dev compression-webpack-plugin
三：合理使⽤vue的指令
  1.v-if 和 v-show 的合理使⽤
  2.使⽤v-for的时候为item设置唯⼀key值
  3.细分vuejs组件
    在项⽬开发过程中第⼀版本把所有的组件的布局写在⼀个组件中，当数据变更时，由于组件代码⽐较庞⼤，vuejs的数据驱动视图更新⽐较慢，造成渲染⽐较慢。体验效果⽐较差，所以把组件细分，⽐如⼀个组件，可以把整个组件细分成轮播组件、列表组件、分页组件等
  4.减少watch的数据
    当组件某个数据变更后，需要对应的state进⾏变更，就需要对另外的组件进⾏state进⾏变更。可以使⽤watch监听相应的数据变更
并绑定事件。当watch的数据⽐较⼩，性能消耗不明显。当数据变⼤，系统会出现卡顿，所以减少watch的数据。其他不同的组件的state双向绑定，可以采⽤事件中央总线或者vuex进⾏数据变更操作
svg文件怎么生成  5.内容类系统的图⽚资源按需加载
    对于内容类系统的图⽚按需加载，如果出现图⽚加载⽐较多，可以先试⽤v-lazy之类的懒加载库或者绑定⿏标的scroll事件滚动到可视区域再对数据进⾏加载显⽰，减少系统加载的数据。
  6.SSR(服务端渲染)
    如果项⽬⽐较⼤，⾸屏⽆论怎么做优化，都出现闪屏或者⼀阵⿊屏的情况。可以考虑使⽤SSR（服务端渲染），vuejs官⽅⽂档提供next.js很好的服务端解决⽅案，但是局限性就是⽬前仅⽀持press等Nodejs的后台框架，需要webpack⽀持。
四：使⽤CDN
  1.为什么使⽤CDN
    使⽤CDN主要解决两个问题：
    ①打包时间太长、打包后代码体积太⼤、请求慢
    ②服务器⽹络不稳定带宽不⾼，使⽤cdn刻意回避服务器贷款问题
  2.具体步骤
    在index.html中引⼊CDN
    例如element-ui的全局变量就说ELEMENT
      删除原先的import
        如果不删除原先的import，项⽬还是会从node_modules中引⼊资源。
        也就是说不删的话，npm run build时候仍会将引⽤的资源⼀起打包，⽣成⽂件会⼤不少。所以我认为还是删了好。
五、webpack打包时使⽤gzip压缩
  安装 compression-webpack-plugin
    npm install compression-webpack-plugin --save-dev
  配置fig.js⽂件
const CompressionPlugin = require('compression-webpack-plugin');
publicPath: '/',
assetsDir: 'static',
outputDir: v.OUTPUT_DIR,
productionSourceMap: false,
configureWebpack: {
plugins: [
new CompressionPlugin({
test: /\.(js|css)?$/i, // 哪些⽂件要压缩
filename: '[path].gz[query]',　// 压缩后的⽂件名
algorithm: 'gzip',　// 使⽤gzip压缩
minRatio: 1,　// 压缩率⼩于1才会压缩
deleteOriginalAssets: true// 删除未压缩的⽂件，谨慎设置，如果希望提供⾮gzip的资源，可不设置或者设置为false
})
]
}
};
  配置完成之后打包会发现⽂件都变成.gz
  然后在nginx服务器配置⼀下静态压缩
  gzip  on;
  gzip_types    text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
  gzip_static on;
    gzip_static 设置为on之后，这样就在访问资源的时候，如果存在 .gz ⽂件，则会直接返回该⽂件，其优先级⾼于动态gzip，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。