关于vue 项目页面打包后首次页面加载特别缓慢的原因及解决方案

第一次打包vue的项目部署到tomcat服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。

首先我们可以安装webpack-bundle-analyzer 插件，通过这个插件我们可以在打包的时候看到打包文件的大小，可以明显的看出哪些文件比较大。

1，去掉编译文件中map文件。在编译好后，我们会看到文件夹下有特别多的.map文件，这些文件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过大，通常都不生成这些文件。

在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件（文件大小 35MB-->10.5MB）

2，vue-router 路由懒加载

懒加载即组件的延迟加载，通常vue的页面在运行后进入都会有一个默认的页面，而其他页面只有在点击后才需要加载出来。使用懒加载可以将页面中的资源划分为多份，从而减少第一次加载的时候耗时。

懒加载路由配置：

非懒加载路由配置：

如图所示为通过懒加载后打包的js文件。而非懒加载的打包后一般只有一个app.js 文件。

3，使用gzip压缩

由于项目测试使用的是tomcat 服务器，因此这个我只在本地安装Nginx 服务器进行测试。在tomcat 服务器下也有压缩文件的方法，暂时没试过。

1)，在安装完依赖插件后，修改config/index.js 文件下 productionGzip：true ;

2)，然后在 webback.prod.config.js 中添加如下代码。（文件大小 10.5MB-->3.5MB）

webpackConfig.plugins.push(new CompressionWebpackPlugin({asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240,// deleteOriginalAssets:true, //删除源文件minRatio: 0.8}))

3)，最后在Nginx 下开启gzip 。

首先安装Nginx 服务器，然后将项目文件部署到html文件目录下，如果端口被占用，可以修改 config/nginx.conf 文件中listen：somename 来修改端口。

开启gzip：

在config/nginx.config 添加如下配置。

http:{ gzip on; gzip_static on;gzip_buffers 4 16k;gzip_comp_level 5;gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

修改完成后，reload一下，重启服务。

4，使用CDN加载

在打包后发现vendor.js 文件占用内存特别大，这里面主要是使用的一些第三方库，例如 vuex,vue-router,axios，elementUI 等文件

我们除了在使用过程中单个组件引用，还可以使用CDN 加载。

通过在index.html 中直接引入第三方资源来缓解我们服务器的压力，其原理是将我们的压力分给了其他服务器站点。

5，其次打包后需要去掉代码中的console.log ，防止打开f12 的时候输出日志。　

在webpack.prod.conf.js 文件中设置
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
})

以上就是在项目开发过程中的一点积累。　

转载于:https://www.cnblogs.com/xidian-Jingbin/p/10643391.html

关于vue 项目页面打包后首次页面加载特别缓慢的原因及解决方案相关推荐

vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
[写在前面]vue3在vscode运行正常.build后在IDEA运行正常,但是当部署在服务器上运行发现样式加载不出来,下面我们针对这些情况进行复现与解决. 一.问题分析困扰我好久,当即百度原因,百 ...
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...
elementui 打包后icon图标加载偶尔会乱码
使用element UI 写项目, 项目在生产环境运行了一段时间后,页面刷新偶尔会出现 (搜索,箭头...)各种图标乱码情况一顿搜索之后,大多数的原因是这两个造成的一.element-ui版本原因 ...
vue项目中vue-scroller实现上拉加载和下拉刷新
vue目前是众所周知的流行框架大家都知道的,vue全家桶的成员是:vue-cli,vuex,vue-router,vue-axios(vue2.0).然后它的第三方插件也有很多,比如:vue-scro ...
Vue项目嵌入天地图专题一：加载天地图
公司近期的项目有用到天地图,之前接触过百度地图没有接触过天地图.所以根据项目的要求写一个专题来记录下 1.我们用的是南京天地图,首先是引入天地图所需的各种文件,因为我们的项目是vue的项目所以,引入的 ...
vue项目保存代码后浏览器页面自动更新
vue.config.js种添加如上红色色框内内容,其中8081替换为自己电脑的主机号
vue项目webpack打包后字体失效
打包之后的:font-family:\5FAE\8F6F- 多了一个反斜杠定位是写字体的时用汉字的原因,汉字打包成会被译成编码替换成对应的英文就可以了
h5首页加载慢_页面加载速度缓慢时，如何优化？
提高页面加载速度,优化方法: 1.使用免费 cdn 加载第三方资源 2.合并压缩js,css,减少请求次数以及减少流量的消耗 3.代码优化: HTML头部的JavaScript和写在HTML标签中的S ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

关于vue 项目页面打包后首次页面加载特别缓慢的原因及解决方案

关于vue 项目页面打包后首次页面加载特别缓慢的原因及解决方案相关推荐

最新文章

热门文章