webpack学习笔记--压缩代码reactnative开发
浏览器从服务器访问⽹页时获取的 JavaScript、CSS 资源都是⽂本形式的,⽂件越⼤⽹页加载时间越长。为了提升⽹页加速速度和减少⽹络传输流量,可以对这些资源进⾏压缩。压缩的⽅法除了可以通过 GZIP 算法对⽂件压缩外,还可以对⽂本本⾝进⾏压缩。
对⽂本本⾝进⾏压缩的作⽤除了有提升⽹页加载速度的优势外,还具有混淆源码的作⽤。由于压缩后的代码可读性⾮常差,就算别⼈下载到了⽹页的代码,也⼤⼤增加了代码分析和改造的难度。
下⾯来⼀⼀介绍如何在 Webpack 中压缩代码。
压缩 JavaScript
⽬前最成熟的 JavaScript 代码压缩⼯具是,它会分析 JavaScript 代码语法树,理解代码含义,从⽽能做到诸如去掉⽆效代码、去掉⽇志输出代码、缩短变量名等优化。
要在 Webpack 中接⼊ UglifyJS 需要通过插件的形式,⽬前有两个成熟的插件,分别是:
UglifyJsPlugin :通过封装 UglifyJS 实现压缩。
ParallelUglifyPlugin :多进程并⾏处理压缩,中有详细介绍。
由于 ParallelUglifyPlugin 在中介绍过就不再复述,这⾥重点介绍如何配置 UglifyJS 以达到最优的压缩效果。
UglifyJS 提供了⾮常多的选择⽤于配置在压缩过程中采⽤哪些规则,所有的选项说明可以在上看到。由于选项⾮常多,就挑出⼀些常⽤的拿出来详细讲解其应⽤⽅式:
sourceMap :是否为压缩后的代码⽣成对应的 Source Map,默认为不⽣成,开启后耗时会⼤⼤增加。⼀般不会把压缩后的代码的Source Map 发送给⽹站⽤户的浏览器,⽽是⽤于内部开发⼈员调试线上代码时使⽤。
beautify :是否输出可读性较强的代码,即会保留空格和制表符,默认为是,为了达到更好的压缩效果,可以设置为false。
comments :是否保留代码中的注释,默认为保留,为了达到更好的压缩效果,可以设置为false。
compress.warnings :是否在 UglifyJs 删除没有⽤到的代码时输出警告信息,默认为输出,可以设置为false以关闭这些作⽤不⼤的警告。
drop_console :是否剔除代码中所有的 console 语句,默认为不剔除。开启后不仅可以提升代码压缩效果,也可以兼容不⽀
持console语句 IE 浏览器。
collapse_vars :是否内嵌定义了但是只⽤到⼀次的变量,例如把var x = 5; y = x转换成y = 5,默认为不转换。为了达到更好的压缩效果,可以设置为false。
reduce_vars :是否提取出出现多次但是没有定义成变量去引⽤的静态值,例如把 x = 'Hello'; y = 'Hello' 转换成var a = 'Hello'; x = a;
y = b,默认为不转换。为了达到更好的压缩效果,可以设置为false。
也就是说,在不影响代码正确执⾏的前提下,最优化的代码压缩配置为如下:
const UglifyJSPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
plugins: [
// 压缩输出的 JS 代码
new UglifyJSPlugin({
compress: {
// 在UglifyJs删除没有⽤到的代码时不输出警告
warnings: false,
// 删除所有的 `console` 语句,可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只⽤到⼀次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引⽤的静态值
reduce_vars: true,
},
output: {
/
/ 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
}
}),
],
};
从以上配置中可以看出 Webpack 内置了 UglifyJsPlugin,需要指出的是 UglifyJsPlugin 当前采⽤的是⽽不是⽼的,这两个版本的UglifyJS 在配置上有所区别,看⽂档时注意版本。
除此之外 Webpack 还提供了⼀个更简便的⽅法来接⼊ UglifyJSPlugin,直接在启动 Webpack 时带上 --optimize-minimize 参数,
即 webpack --optimize-minimize ,这样 Webpack 会⾃动为你注⼊⼀个带有默认配置的 UglifyJSPlugin。本实例
压缩 ES6
虽然当前⼤多数 JavaScript 引擎还不完全⽀持 ES6 中的新特性,但在⼀些特定的运⾏环境下已经可以直接执⾏ ES6 代码了,例如最新版的
Chrome、ReactNative 的引擎 JavaScriptCore。
运⾏ ES6 的代码相⽐于转换后的 ES5 代码有如下优点:
⼀样的逻辑⽤ ES6 实现的代码量⽐ ES5 更少。
JavaScript 引擎对 ES6 中的语法做了性能优化,例如针对 const 申明的变量有更快的读取速度。
所以在运⾏环境允许的情况下,我们要尽可能的使⽤原⽣的 ES6 代码去运⾏,⽽不是转换后的 ES5 代码。
在你⽤上⾯所讲的压缩⽅法去压缩 ES6 代码时,你会发现 UglifyJS 会报错退出,原因是 UglifyJS 只认识 ES5 语法的代码。为了压缩 ES6代码,需要使⽤专门针对 ES6 代码的。
UglifyES 和 UglifyJS 来⾃同⼀个项⽬的不同分⽀,它们的配置项基本相同,只是接⼊ Webpack 时有所区别。在给 Webpack 接⼊ UglifyES 时,不能使⽤内置的 UglifyJsPlugin,⽽是需要单独安装和使⽤最新版本的。安装⽅法如下:
npm i -D uglifyjs-webpack-plugin@beta
Webpack 相关配置代码如下:
const UglifyESPlugin = require('uglifyjs-webpack-plugin')
plugins: [
new UglifyESPlugin({
// 多嵌套了⼀层
uglifyOptions: {
compress: {
// 在UglifyJs删除没有⽤到的代码时不输出警告
warnings: false,
// 删除所有的 `console` 语句,可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只⽤到⼀次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引⽤的静态值
reduce_vars: true,
},
output: {
// 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
}
}
})
]
}
同时,为了不让 babel-loader 输出 ES5 语法的代码,需要去掉. babelrc 配置⽂件中的 babel-preset-env ,但是其它的 Babel 插件,⽐
如 babel-preset-react 还是要保留,因为正是 babel-preset-env 负责把 ES6 代码转换为 ES5 代码。本实例
压缩 CSS
CSS 代码也可以像 JavaScript 那样被压缩,以达到提升加载速度和代码混淆的作⽤。⽬前⽐较成熟可靠的 CSS 压缩⼯具是,基于PostCSS。
cssnano 能理解 CSS 代码的含义,⽽不仅仅是删掉空格,例如:
margin: 10px 20px 10px 20px 被压缩成 margin: 10px 20px
color: #ff0000 被压缩成 color:red
还有很多压缩规则可以去其官⽹查看,通常压缩率能达到 60%。
把 cssnano 接⼊到 Webpack 中也⾮常简单,因为 css-loader 已经将其内置了,要开启 cssnano 去压缩代码只需要开启 css-loader 的minimize 选项。相关 Webpack 配置如下:
const path = require('path');
const {WebPlugin} = require('web-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module: {
rules: [
{
test: /\.css/,// 增加对 CSS ⽂件的⽀持
// 提取出 Chunk 中的 CSS 代码到单独的⽂件中
use: act({
// 通过 minimize 选项压缩 CSS 代码
use: ['css-loader?minimize']
}),
},
]
},
plugins: [
// ⽤ WebPlugin ⽣成对应的 HTML ⽂件
new WebPlugin({
template: './template.html', // HTML 模版⽂件所在的⽂件路径
filename: 'index.html' // 输出的 HTML 的⽂件名称
}),
new ExtractTextPlugin({
filename: `[name]_[contenthash:8].css`,// 给输出的 CSS ⽂件名称加上 Hash 值 }),
],
};
本实例
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论