应用场景：项目使用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的更多相关文章

  1. webpack优化 -- compression-webpack-plugin 开启gzip

    webpack优化 -- compression-webpack-plugin 开启gzip 打包的时候开启gzip可以大大减少体积,非常适合于上线部署.下面以vue-cli2.x项目为例,介绍如何在 ...

  2. Webpack 打包优化之速度篇

    在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...

  3. Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  4. Vue发布过程中遇到坑，以及webpack打包优化

    前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...

  5. webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）

    如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...

  6. 记一次webpack打包优化

    未进行打包优化的痛点: 随着项目的不断扩大,引入的第三方库会越来越多,我们每次build的时候会对所有的文件进行打包,耗时必定很长,不利于日常开发. 解决思路: 第三方库我们只是引入到项目里来,一般不 ...

  7. webpack打包优化之外部扩展externals的实际应用

    目录 前言 externals定义 用法 string array object function regex 实际案例 打包时间 打包之后包的大小 浏览器加载 需要注意 参考 前言 使用vue-cl ...

  8. [转] Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  9. 基于CommonsChunkPlugin，webpack打包优化

    前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.但是打包的文件还是很大,特别是 ...

随机推荐

  1. MD5状态变量，为什么是A=0x67452301,B=0xefcdab89,C=0x98badcfe,D=0x10325476这几个变量

    找到过一篇答复: 3.3 Step 3. Initialize MD Buffer A four-word buffer (A,B,C,D) is used to compute the messag ...

  2. C#后台代码获取程序集资源文件

    资源会被打包在程序集内部. 选择这种生成方式后,该资源文件会被嵌入到该应用的程序集中,就是说打开生成的应用程序目录是看不到这个文件的. 可以用相对于当前的XAML文件的相对Uri访问,<Imag ...

  3. [BeiJing wc2012]连连看（建模，最小费用最大流）

    前言 突然发现自己在图论①被dalao吊着打... Solution 看到数据范围1000,感觉可以直接枚举连边,然后新建两个点就好了. 注意要拆点,不然可能会死循环(过来人) 代码实现 #inclu ...

  4. 【文文殿下】[AH2017/HNOI2017]礼物

    题解 二项式展开,然后暴力FFT就好了.会发现有一个卷积与c无关,我们找一个最小的项就行了. Tips:记得要倍长其中一个数组,防止FFT出锅 代码如下: #include<bits/stdc+ ...

  5. 对"某V皮"N服务器节点的一次后渗透测试

    i春秋作家:jasonx 前言:由于这个VPN节点服务器是之前拿到的,一直没时间做进一步渗透,昨天看到我蛋总表哥发红包,然后我运气爆表抢了个运气王,再加上好久没发文章了,所以就抽空测试下咯. 0×01 ...

  6. D02-R语言基础学习

    R语言基础学习——D02 20190423内容纲要: 1.前言 2.向量操作 (1)常规操作 (2)不定长向量计算 (3)序列 (4)向量的删除与保留 3.列表详解 (1)列表的索引 (2)列表得元素 ...

  7. 将Python项目打包成EXE可执行文件（单文件，多文件，包含图片）

    解决 将Python项目打包成EXE可执行文件(单文件,多文件,包含图片) 1.当我们写了一个Python的项目时,特别是一个GUI项目,我们特备希望它能成为一个在Windows系统可执行的EXE文件 ...

  8. 基础I/O接口与操作

    C语言中的文件接口 1 打开文件 FILE * fopen(const char * path,const char * mode) 参数:path:文件路径 mode:打开文件的方式 返回值:成功返 ...

  9. Vue2.5开发去哪儿网App 城市列表开发

     一,城市选择页面路由配置                                                                                        ...

  10. .NET跨平台实践：再谈用C#开发Linux守护进程 — 完整篇

    Linux守护进程是Linux的后台服务进程,相当于Windows服务,对于为Linux开发服务程序的朋友来说,Linux守护进程相关技术是必不可少的,因为这个技术不仅仅是为了开发守护进程,还可以拓展 ...