聊聊 webpack 打包如何压缩包文件大小
想必很多人都经历过做完一个项目后,再打包发现某些文件非常大,导致页面加载时很慢,这就很影响用户体验了,所以在我经历了一些打包后,讲讲如何有效地缩小包体积,加快页面的首屏渲染
动态 polyfill
相信很多项目都会用到polyfill 那么一整个polyfill 会占据很多的空间,这个时候需要使用动态polyfill来解决这个问题了:
在 index.html
文件中引入:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
你可以打开 https://cdn.polyfill.io/v2/polyfill.min.js
在最新的浏览器中,会发现他并没有什么polyfill,而如果你开启移动端的模式,并且重新刷新页面的话,可以发现他又多了一些方法;
这个就是动态polyfill 他会根据浏览器标头来返回不同的polyfill
这里放下他的文档:
https://cdn.polyfill.io/v2/docs/
webpack 插件
使用过 vue-cli 创建的项目,应该都能看到,这些插件,在build/webpack.prod.conf.js
文件中可以观察到这些插件,使用 react 项目的可以照着配,使用一下相同的插件;
使用哪些请自行酌情判断,我来简介一些主要插件的作用:
- extract-text-webpack-plugin 用于将 CSS 从主应用程序中分离
- optimize-css-assets-webpack-plugin 压缩提取出的css,解决extract-text-webpack-plugin CSS重复问题
- CommonsChunkPlugin 将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用
- uglifyjs-webpack-plugin 压缩js代码 需要说明的是可以在上面加上去除
console.log
的选项,也是可以有效减少包体积 - ModuleConcatenationPlugin 作用域提升,对于压缩代码有一些效果,但不是很大
在这里附上所有插件的说明:
https://webpack.docschina.org/plugins/
先上我的项目里打包后的文件体积,该项目使用 vue-cli 构建:
可以看到占体积最大的是 vendor.js 这个文件
这个项目所占的文件基本是所用的包的代码,如 vue ,vuex,vue-router,element-ui等文件的 js 代码
dll 插件
我在之前搜索压缩代码的博客时,经常也会看到 dll 插件能够压缩体积,但是经过实践证明,这个结论是错误的;
他的作用只是加快 run build 和 run dev 的速度,但是,相较于使用 cdn 加速,是一点优势都没有,下面来看
添加 dll 之后的文件大小:
添加优化 js 代码后的文件大小:
通过图片看到文件是压缩了,但是仍然还没有我正常情况下的文件小,也许是我优化的问题,但是再优化,最多也就是和正常情况差不多,仍然没有压缩体积的作用;
可以得出结论 DllPlugin 基本上是只用于开发环境的;
使用 cdn 加速
目前来说这是最好的一个方法了;
可以先使用 analys 分析一下, vendor 里最大占用的插件是什么,根据结果选择;
比如 我的项目中 element-UI 和 Vue 的 js 文件是占据第一和第二的大小的,所以需要将这2个文件使用 cdn 加速来替代;
需要注意的是使用 cdn 的文件不要太多,尽量不超过3个文件
可以使用免费的bootcdn 加速 http://www.bootcdn.cn/
方法很简单,在 index.html 里面添加 cdn 地址:
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.3.7/index.js"></script>
<div id="app"></div>
</body>
需要注意要将文件放在前面一点
在build/webpack.base.conf.js 文件的
module.exports里添加
:
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT'
},
在 main.js和任何引用过Vue 文件的地方:删除 import Vue from 'vue',如果有一个没有删,那么打包时还会把文件引用的;
并且删除 import ElementUI from 'element-ui' 和 Vue.use(ElementUI)
如果添加了eslint 那么可能会报错 可以使用 const Vue = window.Vue来去除报错,
如果仍需要在 main.js 里使用 element 的话可以通过window.ELEMENT来引用;
这个地方我说错了,关于 Vue和 element 的 import 不用修改
但是要保证 externals
和 main.js
中引入的是一样的
比如:
externals: {
'element-ui': 'ELEMENT'
},
和
import ELEMENT from 'element-ui'
需要对应
前车之鉴,还望各位周知
打包后可以有效减小包体积:
Gzip加速
这个方法的压缩代码能力是非常恐怖的,压缩率可达70%,不过需要了解的是需要服务器开启 gzip 加速才管用,我没使用这个方法,不排除他会对服务器会造成一定的压力;
总结
如果需要polyfill的话,可以使用动态polyfill来替代,如果服务器支持 Gzip 加速且不担心服务器压力的话,那么可以使用 Gzip 来加速,否则使用 cdn 加速主要文件的方法来压缩代码,当然首先你也需要添加 webpack 插件来优化 js 代码;
聊聊 webpack 打包如何压缩包文件大小的更多相关文章
- webpack打包性能优化
1. 使用 gzip 压缩打包后的 js 文件 这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中 var CompressionWebp ...
- webpack打包和gulp打包工具详细教程
30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...
- dependencies、devDependencies、webpack打包 的区别与联系
为什么要在dependencies.devDependencies中声明依赖? 答:保证任何人在(或者你自己在其他设备上)对这个项目进行修改(开发)时,通过npm install就能获取同样的开发环境 ...
- 前端项目模块化的实践2:使用 Webpack 打包基础设施代码
以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...
- 浅析webpack打包输出内容
当我们执行npm run bundle的时候输出了很多信息,那么这些信息都是什么意思呢 Hash: 221e7fd2e8bf82149df7 Version: webpack 4.30.0 Time: ...
- webpack打包学习
从上图我们可以看出,webpack 可以将多种静态资源 js.css.sass文件等转换成一个静态文件,以此可以减少页面的请求,从而提高浏览器响应速度 1.安装开发依赖包 npm install we ...
- 使用webpack打包ThinkPHP的资源文件
使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...
- 【原】使用webpack打包的后,公共请求路径的配置问题
在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...
- Webpack打包进阶
说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...
随机推荐
- 洛谷 P1280 尼克的任务 (线性DP)
题意概括 线性资源分配的问题,因为空闲的时间大小看后面的时间(反正感觉这个就是个套路)所以从后往前DP. 转移方程 如果当前时刻没有工作 f[i]=f[i+1]+1 如果当前时刻有工作 f[i]=ma ...
- Python pygame库的应用
今天想用pygame库写一个击打外星人飞船的python程序 这个游戏的效果是操纵一个位于屏幕底端的飞船,通过上下左右控制飞船移动方向,按空格发射子弹.游戏中击杀一批飞船后进入下一关卡.每一关卡击打飞 ...
- BZOJ 4006 Luogu P3264 [JLOI2015]管道连接 (斯坦纳树、状压DP)
题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=4006 (luogu)https://www.luogu.org/probl ...
- 线程间的通信----wait/notify机制
wait/notify机制 实现多个线程之间的通信可以使用wait.notify.notifyAll三个方法.这三个方法都是Object类的方法.wait():导致当前线程等待,直到另一个线程调用此对 ...
- leetcode算法学习----逆波兰表达式求值(后缀表达式)
下面题目是LeetCode算法:逆波兰表达式求值(java实现) 逆波兰表达式即后缀表达式. 题目: 有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式.同 ...
- Redis3.0集群方案分析
在Redis3.0集群出来之前,大家都对作者antirez寄予厚望,因为Redis从来没有让我们失望过.现在Redis3.0集群出来了,网上出了很多评论文章,都说他的功能多么强大,包括下面这张图是彻底 ...
- 非常适合新手的jq/zepto源码分析02
function isPlainObject(obj) { return isObject(obj) && !isWindow(obj) && Object.getPr ...
- php 类型转换
PHP数据类型转换 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: •(int).(integer):转换成整形 •(float).(double).(real):转换成浮点型 •(s ...
- Spring技术内幕:Spring AOP的实现原理(五)
7.Advice通知的实现 AopProxy代理对象生成时,其拦截器也一并生成.以下我们来分析下Aop是怎样对目标对象进行增强的.在为AopProxy配置拦截器的实现中,有一个取得拦截器配置过程,这个 ...
- 开发汉澳sinox64位,对接汉澳矩阵电脑
汉澳矩阵电脑刚刚不久前提出,即使全然设计出了汉澳矩阵电脑线路图,要在上面执行操作系统必须有矩阵操作系统. 汉澳sinox64位操作系统并非矩阵操作系统,仅仅是更为接近. 汉澳矩阵电脑假设插有16个矩阵 ...