-
Terser
Terser
是一个JavaScript
的解释(Parser
)、Mangler
(绞肉机)/Compressor
(压缩机)的工具集;早期我们会使用uglify-js
来压缩、丑化我们的JavaScript
代码,但是目前已经不再维护,并且不支持ES6+
的语法;Terser
是从uglify-es fork
过来的,并且保留它原来的大部分API以及适配uglify-es
和uglify-js@3
等;也就是说,Terser
可以帮助我们压缩、丑化我们的代码,让我们的bundle
变得更小。webpack
打包当mode是production的时候默认已经帮们使用了Terser
,如下图 所以一般我们做项目开发的时候没有必要去特殊的配置Terser
,应为webpack已经做的足够好了(webpack还通过其他插件的配合吧代码压缩做到了有些Terser
不能做到的压缩,所以往往自己配置的Terser
没有webpack提供的压缩效果那么好),如果公司项目要求需要这一块的特殊设置也可以参考一下网站设置自定义的Terser
github.com/terser/ters… -
CSS的压缩
CSS压缩通常是去除无用的空格等,因为很难去修改选择器、属性的名称、值等;使用到的插件是
css-minimizer-webpack-plugin
;这个需要单独安装安装指令如下:
npm install css-minimizer-webpack-plugin -D
webpack配置如下:
打包结果:(就是清除了所有的空格) -
Tree Shaking
-
什么是
Tree Shaking
Tree Shaking
就是删除文件中未使用的代码,从而达到体积优化的效果 -
webpack
实现Tree Shaking
采用了两种不同的方案-
usedExports
:通过标记某些函数是否被使用,之后通过Terser
来进行优化的; 需要结合Terser
一起使用,通过代码注释的方式告诉Terser
那些代码是可以移除的(unused harmony export mul
)如果需要测试需要看效果需要将webpack
mode改成development应为在production模式下已经做了无用代码消除的操作(个人感觉这样设置用处不是很大,所以这里就不做太多的演示了,有兴趣的同学可以自己试一下) -
sideEffects
:跳过整个模块/文件,直接查看该文件是否有副作用;(副作用:就是有些文件导入了,但是并没有使用导出的对象,但是如果文件中修改了全局对象之类的东西就会影响到整个项目,这就带来了副作用)使用方式:在
package.json
中设置sideEffects
的值,如果设置成为false
,就是告知webpack
可以安全的删除未用到的exports
;,也可以传入数组如图所示 这样index.js
文件的所有代码都不会被打包同样的如果公司的项目没有什么特殊的需求只要将 webpack 的模式改成
production
webpack会帮我们消除无用的代码
-
-
CSS实现Tree Shaking
主要是借助
PurgeCss
插件来实现Tree Shaking,首先需要安装对应插件安装命令:
yarn add purgecss-webpack-plugin -D
具体webpack配置如下图: 打包结果如下图所示:
-
-
Scope Hoisting
主要作用是对作用域进行提升,并且让 webpack 打包的代码更小,运行更快。模式
production
会自动启用Scope Hoisting
,development
模式下需要使用webpack内置的plugin启用如下图:
new webpack.optimize.ModuleConcatenationPlugin();
-
HTTP压缩
HTTP压缩是一种内置在服务器和 客户端之间的,以改进传输速度和带宽利用率的方式;
主要实现方式: 兼容压缩格式的浏览器在发送请求的时候就高速服务器,该浏览器兼容的格式,然后服务器会直接返回对应的压缩文件并且在响应头信息中告诉浏览器传输文件的格式
浏览器告诉服务器支持格式截图
服务器告知浏览器截图:
- 目前的几种压缩格式:
compress
– UNIX的“compress”程序的方法(不推荐大多数应用使用,应该使用gzip或deflate)deflate
– 基于deflate算法的压缩,使用zlib数据格式封装;gzip
– GNU zip格式(定义于RFC 1952),是目前使用比较广泛的压缩算法;br
– 一种新的开源压缩算法,专为HTTP内容的编码而设计;
- Webpack对文件压缩(这里只是对文件压缩,如果实现浏览器拉取也是压缩文件,需要服务器配置)
- 安装插件:
yarn add compression-webpack-plugin -D
- 配置
- 打包结果
发现此时打包文件冲床两个文件一个是源文件,一个是压缩后的文件,一般会将两个文件都上传到服务器,如果浏览器不支持压缩格式就可以直接返回源文件,压缩文件也上传服务器的原因是,nginx
首先检查是否存在请求静态文件的gz结尾的文件,如果有则直接返回该gz文件内容。没有的话则需要服务器进行压缩,所以上传压缩文件也可以减轻服务器cpu的负担
- 安装插件:
- 对代码进行压缩
可以直接使用HtmlWebpackPlugin
插件,其中可以配置minify
参数默认会使用html-minifier-terser
插件代码进行压缩 同样的在模式production
下默认已经启用
- 目前的几种压缩格式:
-
封装Library
打包自己的库文件具体带包代码如下: 打包配置如下:
使用方式: 直接通过cdn方式或者npm包管理方式集成然后引入调用即可