2019独角兽企业重金招聘Python工程师标准>>>

提高页面加载速度的方式

升级webpack4.x及升级过程中产生问题的解决方式

webpack升级一路填坑记

图片压缩

用一个webpack插件，这个插件叫 image-webpack-loader。
安装插件： $ npm install image-webpack-loader --save-dev
相关配置修改如下：

//webpack.base.conf.js
//原先配置
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}
}
//修改后配置
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: []'url-loader?limit=10000&name='utils.assetsPath('img/[name].[hash:7].[ext]'),'image-webpack-loader']
}

修改后查看对比

//源文件
$ ls -lh src/images
total 256
//压缩后
$ ls -lh dist/images
total 96

路由懒加载，生成多个小js文件按需加载

{path: '/login',name: 'login',component: resolve => { require(['@/components/login.vue'],resolve) }
}

gzip压缩

启用gzip压缩，很简单，工程下的config/index.js中，将productionGzip由false改为true,除此之外，就需要后台修改配置，返回gzip文件，具体方式网上很多，我在下面贴几个。我试过，这个方式会很好的压缩了文件，将app等文件压缩到很小，所以页面加载下载文件会小很多，但时间上，不一定。。。而且对于IE11来讲，这个好像不能实现。。。
gzip实现方式：
- vue 进行 gzip压缩和服务器如何开启gzip
- vue2首页加载慢的问题
- 关于vue在app首次加载缓慢的解决办法
- 前端性能优化之gzip

取消打包后的map文件

在打包vue文件时，会发现出现很多.map文件，
map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
map文件下载时需占用太多浏览器资源，而且特别耗时，导致加载速度慢，可以在生产环境取消生成map文件。在工程/config/index.js文件配置中，将productionSourceMap由true改为false即可。

传送门

JS/CSS 体积减少了 67%，我们是如何做到的？
webpack4之splitchunksPlugin拆拆拆--项目实践
vue多页面首页加载优化
webpack之前端性能优化

若有其余前端优化方式，请贴评论。

转载于:https://my.oschina.net/yxmBetter/blog/2248872

vue-cli新建工程后提高页面加载速度（含升级webpack4）相关推荐

Vue项目提高页面加载速度的方法
1.路由懒加载路由懒加载简单来说就是访问到当前页面才会加载相关资源,提高页面加载速度. { path: '/login', name: 'login', component: resolce ...
如何提高页面加载速度 || 前端的性能优化 || 浏览器渲染页面的过程是什么
1.降低请求量 ① 合并资源,减少http请求数量. ② lazyLoad,如图片懒加载.分批加载,每次只加载一部分. ③ 使用字体图标或CSS绘制,来代替部分图片. 2.加快请求速度 ...
前端性能优化——如何提高页面加载速度？
1.将样式表放在头部首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止"白屏". 我们 ...
HTML 提高页面加载速度的方法
HTML 提高页面加载速度的方法: 1. 减少http请求(合并资源文件,合并图片-精灵图) 2. 把css放文件头部,javascript放body标签尾部 3. 定义图片的宽,高 4. 避免空的s ...
WEB前端性能优化，提高页面加载速度
可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too simple.事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传 ...
前端性能优化：如何提高页面加载速度和用户体验
第一章:介绍当今互联网时代,网站的性能对于用户体验至关重要.一个快速加载的网页不仅能提高用户的满意度,还能增加页面的转化率.而在前端开发中,性能优化是一个永恒的话题.本篇博客将为大家分享一些关于前端 ...
Nginx 如何开启gzip 来提高页面加载速度
1.打开nginx配置文件 vi /etc/nginx/nginx.conf 或者 vi /etc/nginx/conf.d/gzip.conf 2.往nginx.conf或者gzip.conf文件中 ...
Nginx开启Gzip压缩大幅提高页面加载速度
2019独角兽企业重金招聘Python工程师标准>>> 有时候我们会碰到API接口响应很快,但是完成速度很慢的情况,其主要原因是数据传输过大.因此我们需要对数据进行压缩,现这里采用N ...
VUE单页应用首屏加载速度优化方案
单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案使用CDN资源,减小服务器带宽压力路由懒加载将一些静态js css放到其他地方(如OSS),减小服务器压力按需加 ...

vue-cli新建工程后提高页面加载速度（含升级webpack4）

提高页面加载速度的方式

升级webpack4.x及升级过程中产生问题的解决方式

图片压缩

路由懒加载，生成多个小js文件按需加载

gzip压缩

取消打包后的map文件

传送门

若有其余前端优化方式，请贴评论。

vue-cli新建工程后提高页面加载速度（含升级webpack4）相关推荐

最新文章

热门文章