vue 首页加载缓慢、白屏现象的原因与解决办法

2023-11-18 17:40| 来源: 网络整理| 查看: 265

vue项目打包上线后，首次打开会发现加载很慢，出现白屏的问题，

一、问题原因

打开控制台查看文件加载情况，会发现app.js/vendor.js这两个文件加载时间较长

二、解决办法 1、图片压缩

使用webpack打包文件时，可以看到图片资源显示过大，使用工具进行压缩

2、去掉.map文件

webpack打包文件时，会看到有一些.map文件生成

修改：找到config文件夹下的index.js文件，build里边的productionSourceMap值改为false即可

3、CDN外部加载

在项目开发中，会用到很多第三方库，如果可以按需引入，只需要引入自己需要的组件，减少所占空间，但是有些不能按需引入，则可以使用CDN外部加载

在index.html中从CDN引入组件，去掉其他页面的组件import

修改webpack.base.config.js,在externals中加入该组件，避免编译时找不到组件报错

4、vue路由懒加载方法一： export default new Router({ routes: [ { path: '/login', component: resolve=>require(["@/components/pages/signIn/signIn"],resolve), }] }); 方法二： export default new Router({ routes: [ { path: '/login', component: ()=>import("@/components/pages/signIn/signIn"), }] }); 方法三：webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

路由index.js修改 { path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') }, { path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') }

webpack.base.conf.js修改：

5、gzip静态资源压缩，这个需要结合服务器端的配置。

查阅资料发现很多人推荐使用gzip静态资源压缩，但是这个需要结合服务器的配置

1、打开config/index.js文件：

这里安装时需要制定版本，要不然会报错npm install --save-dev [email protected]

2、然后打开/build/webpack.base.config.js文件，找到module.exports的module中的rules

因为vue中一些小的静态资源文件是会打包成base64的文件存在css中的或者js中，这里就是控制需要转换的大小，这样减少了js的大小。

3、服务器端(下面以Nginx为例)

打开配置文件,一般都会默认开启gzip的，但是gzip_static是没有开启的，所有需要加上 gzip_static on;

如果没有开启gzip的话可以在手动在http{}里添加 http { gzip on; gzip_static on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; }

【本文地址】

公司简介

联系我们