首屏加载时间过长？首屏白屏问题解决？打包文件体积过大优化？

Holly31

已于 2023-07-24 14:41:26 修改

阅读量1.2k

点赞数

文章标签： vue.js webpack javascript

于 2023-05-16 20:03:47 首次发布

原文链接：https://blog.csdn.net/ww_5211314/article/details/121923126

版权

1.Vue-router 路由懒加载

2.在webpack打包的过程中，将多余文件去掉，如不生成map文件，即在config/index.js中将productionSourceMap的值修改为false，就可以在编译时不生成.map文件了

3.第三方库使用CDN引入:

1）第一步：可以采用CDN加速引入（防止挂掉，可下载到本地上传到自己的服务器）

2）第二步：分离打包第三方资源包，去vue-config文件中去配置externals,写上你已经在index.html中引用了cdn的库

4.gzip压缩：前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减小网络传输的流量大小

1）命令行执行：npm i compression-webpack-plugin -D

2）在webpack的dev开发配置文件中加入如下代码:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [
   new CompressionWebpackPlugin()
]

5.不要滥用第三方库，用到一个功能点整个第三方全部引入，按需引入；一个项目尽量使用一个库

6.代码层面的优化

1）减少http请求数，减小请求大小

2)图片使用雪碧图，使用字体图标或者使用svg文件等；图片懒加载

3) cdn内容分发网络

4）javascripte defer 异步加载延迟执行

5）异步加载js,async是JavaScript下载完成，就会立即执行代码，等待执行完之后才继续解析HTML

6）合理使用缓存

7）优化代码，组件化、模块化,代码重用

8）css放在头部，js放在底部

9)合理使用v-if和v-show

10）for循环设置key值

11）服务端渲染

12）DNS预解析

13）Defer加载Js

1.完成以上优化加载基础上，白屏期间加骨架屏和loading

2.服务端渲染，也就是ssr技术，比如nuxt.js技术做ssr开发

1.webpack打包不生成map文件 config/index.js productionSourceMap=false

2.第三方库使用CDN引入

3.gzip压缩

4.不要滥用第三方库,按需引入组件

5.代码精简及静态资源如图片压缩合并等

关注