webpack打包优化并开启gzip
应用场景:项目使用webpack2.x进行打包,打包后静态资源通过nginx转发配置:
问题:webpack打包后的资源文件特别,特别大,没打包之前页面一个页面js有2M左右(其中已经抽离了css)?
优化一:一看js这么大肯定是没有关闭source-map,先将webpack配置文件中dev-tool:false,
优化二:使用compresion-webpack-plugin插件将静态资源压缩,并生成.gz文件,配置如下:
具体用法请参照:http://www.css88.com/doc/webpack2/plugins/compression-webpack-plugin/
优化三:如何使用压缩后的gzip文件呢?
将nginx配置开启gzip压缩,nginx会根据配置情况对指定的类型文件,进行压缩。主要针对js与css.如果文件路径中存在与原文件同名(加了个.gz),nginx会获取gz文件,如果找不到,会主动进行gzip压缩。
nginx配置如下:
至此:文件已经从2M变成了100+K,还是太大了,继续优化中。。。。
欢迎留言交流,啦啦啦
webpack打包优化并开启gzip的更多相关文章
- webpack优化 -- compression-webpack-plugin 开启gzip
webpack优化 -- compression-webpack-plugin 开启gzip 打包的时候开启gzip可以大大减少体积,非常适合于上线部署.下面以vue-cli2.x项目为例,介绍如何在 ...
- Webpack 打包优化之速度篇
在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...
- Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- Vue发布过程中遇到坑,以及webpack打包优化
前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...
- webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)
如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...
- 记一次webpack打包优化
未进行打包优化的痛点: 随着项目的不断扩大,引入的第三方库会越来越多,我们每次build的时候会对所有的文件进行打包,耗时必定很长,不利于日常开发. 解决思路: 第三方库我们只是引入到项目里来,一般不 ...
- webpack打包优化之外部扩展externals的实际应用
目录 前言 externals定义 用法 string array object function regex 实际案例 打包时间 打包之后包的大小 浏览器加载 需要注意 参考 前言 使用vue-cl ...
- [转] Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- 基于CommonsChunkPlugin,webpack打包优化
前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.但是打包的文件还是很大,特别是 ...
随机推荐
- [proposal][app]Watch your time!
[Motivation] 很多时候,我们要去某个地方,尤其是第一次去的时候,都不知道什么时候出发,留出的时间够不够,会不会早到或者晚到.虽然地图软件能给出一些粗略的步行,公交,或者出租时间估计,但是每 ...
- Grid++repor报表连接事件
//定义报表模板 private GridppReport Report = new GridppReport(); //载入报表模板数据 Report.LoadFromFile(GridppRepo ...
- Linux-切换启动方式
Linx 默认的启动方式可以用图形界面也可以用命令行状态,命令行状态的启动相对来说运行速度更快,而且资源的消耗也更小,这个可以在Linux启动的过程中修改,也可直接修改配置文件来进行设置默认的启动方式 ...
- CODE FIRST之空数据模型
1.首先添加空Code Firtst模型 2.新建两个实体类,关系一对多 public class UserInfo { public UserInfo() { OrderInfo = new Has ...
- EMACS快捷键
C = Control M = Meta = Alt | Esc Del = Backspace 基本快捷键(Basic) C-x C-f "find"文件, 即在缓冲区打开/新建 ...
- [面试题目]IT面试中的一些基础问题
1. 面向对象的特征 继承,封装,多态 2. 重写和重载的区别 重写:在继承当中,子类重写父类的函数,函数声明完全一样,只是函数里面的操作不一样,这样叫做重写. 重载:与多态无关,即两个函数名一样的成 ...
- Android .9 图片
最初对 .9 图片不是十分理解,一些教程让人摸不到头脑. 最近重新研究终于明白了它的原理. 其实最重要的一点记住就可以了,就是 .9 图片的四条黑边的意义,每条黑边的意义都不一样: 顶部:在水平拉伸的 ...
- 自用 docker-compose
version: '3.1' services: mysql: image: mysql: command: --default-authentication-plugin=mysql_native_ ...
- Elasticsearch集群搭建及使用Java客户端对数据存储和查询
本次博文发两块,前部分是怎样搭建一个Elastic集群,后半部分是基于Java对数据进行写入和聚合统计. 一.Elastic集群搭建 1. 环境准备. 该集群环境基于VMware虚拟机.CentOS ...
- iOS开发笔记-图标和图片大小官方最新标准
这两天开发iOS app用到了Tab bar,然后随便切了点图标放上去发现效果极差.于是乎,开始查找苹果官方给的标准.搜索一番后,看到了一篇博文,但其内容与iOS人机交互指南最新版内容不符. 故此,在 ...