23_webpack_TreeShaking
什么是TreeShaking
TreeShaking,是一个术语,表示消除死代码(dead_code)
JS的Tree Shaking 对JS进行TreeShaking是源自打包工具rollup
这是因为TreeShaking依赖于ESModule的静态语法分析
webpack2正式内置支持了ES2015模块,和检测未使用模块的能力
在webpack4正式扩展了这个能力,并且通过package.json的sideEffects属性作为标记,告知webpack在编译时,哪些文件可以安全的删除掉
webpack5中,也提供了对部分CommonJS的tree shaking支持
webpack实现Tree Shaking
实际上webpack实现Tree Shaking采用了两种不同的方案
usedExports:通过标记某些函数是否被使用,之后通过Terser来进行优化
sideEffects:跳过整个模块/文件,直接查看该文件是否有副作用
usedExports
将mode设置为development模式
为了可以看到usedExports带来的效果,我们需要设置为development模式
因为在production模式下,webpack默认的一些优化会带来很大的影响
设置usedExports为true和false对比打包后的代码
在usedExports设置为true时,会有一段注释:unused harmony export mul;
usedExports:标注(魔法注释)出来哪些函数是没有被使用到的,结合terser一起使用如:
(
__unused_webpack_module,
__webpack_exports__,
__webpack_require__
) => {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ sum: () => /* binding */ sum,
/* harmony export */
});
// usedExports:目的就是标注出来哪些函数是没有被使用的
// 在这里多了一个魔法注释,会被Terser解析,相当于告诉terser这个函数并没有被使用,他就会进行TreeShaking,效果就是这个函数会被直接删除掉
/* unused harmony export mul */
function sum(num1, num2) {
return num1 + num2;
}
function mul(num1, num2) {
return num1 * num2;
} /***/
},
minimize设置true
usedExports设置为false时,mul函数没有被移除
usedExports设置为true时,mul函数被移除了
所以他们是结合来使用的
sideEffects
sideEffects用于告知webpack compiler哪些模块是有副作用的
使用:在package.json中添加属性sideEffects
当为true时:表示任何模块都是有副作用的(默认)
当为false时:表示任何模块都是没有副作用的(告知webpack可以安全的删除未用到的exports)
如果我们希望保留,可以设置为数组
演示:
true
当我有一个format.js,只有如下两个函数
在main.js文件中导入:import "./format";,实则我并没有用到里面的任何函数,但是webpack在打包的时候会保留format.js相关的代码
false
如:我的format.js文件中有副作用,在main.js文件中导入:import "./format";
但是在打包后的文件,不会保留format.js相关的任何代码,那么我们在使用window对象中的属性的时候就会显示undefined
还有就是通过import语法导入的css文件最终也不会被包含在打包的文件中
数组
用于告知webpack哪个模块有副作用,那么在打包的时候,就会包含相关的代码
我们一般很少去使用数组的形式去配置该属性那么css文件的问题该如何解决?
CSS实现Tree Shaking
上面我们学习的都是关于JS的Tree Shaking,那么CSS是否也可以进行Tree Shaking
CSS的Tree Shaking需要借助于一些其他的插件
在早期的时候,我们会使用PurifyCss插件来完成CSS的Tree Shaking,但是目前该库已经不再维护了
目前我们可以使用另外一个库来完成CSS的Tree Shaking:PurgeCSS,也是一个帮助我们删除未使用的CSS的工具
安装:
npm i purgecss-webpack-plugin -D
使用:
const PurgePlugin = require("purgecss-webpack-plugin");
const glob = require("glob");
const resolveApp = require("./path"); plugins: [
new CleanWebpackPlugin({}),
new MiniCssExtractPlugin({
filename: "css/[name].[contenthash:8].css",
}),
new CssMinimizerWebpackPlugin(),
new PurgePlugin({
paths: glob.sync(`${resolveApp("./src")}/**/*`, { nodir: true }),
safelist() {
return {
standard: ["body", "html"],
};
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
],
paths:表示要检测那些目录下的内容需要被分析
默认情况下,purgecss会将我们的html标签的样式移除掉,如果我们希望保留,可以添加一个safelist的属性
purgecss也可以对less文件进行处理(所以他是对打包后的css进行tree shaking操作)
懒加载(import函数)也是没有问题的
HTML文件的压缩
其实我们的html-webpack-plugin插件还有很多的属性,提供我们进行优化
new HtmlWebpackPlugin({
template: "./index.html",
// 注入:对打包的js和css文件进行一个注入
// true,默认值
// false:不进行注入
// body:注入到body里面,这里只针对于js文件,css文件本来就是写在head里面的
inject: true,
// 当文件没有发生任何改变的时候默认使用之前的缓存
cache: true,
// 是否对html文件进行压缩,通常会设置为对象模式
minify: {
// 是否要移除注释
removeComments: true,
// 是否要移除多余的属性,就像input标签上如果你加上了type="text"他是没有任何的意义的就会给你删除该属性
removeRedundantAttributes: true,
// 是否删除一些空属性,如id=""没有意义
removeEmptyAttributes: true,
// 折叠空格
collapseWhitespace: true,
// 移除Link标签中的type属性
removeStyleLinkTypeAttributes: true,
// 对html中的style标签中的样式进行压缩
minifyCSS: true,
// 对html中的script中的js代码压缩
// true,只压缩不丑化
// 对象形式:对代码进行丑化
minifyJS: {
mangle: {
toplevel: true,
},
},
},
最新文章
- SPI基础知识
- 如何给CentOS安装字体库
- Qt常用命令收集
- PHP Execute Command Bypass Disable_functions
- [Mugeda HTML5技术教程之9]使用元件
- Java异常分类 转载
- 如何在IIS6,7中部署ASP.NET网站(转载)
- 1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏
- PHP 获取系统信息,PHP 获取服务器详细信息
- 从java1到java9每个版本都有什么新特性?
- innobackupex: fatal error: no ‘innodb_buffer_pool_filename’解决方法
- RocketMQ源码 — 七、 RocketMQ高可用(2)
- Python_socket_UDP
- Python3学习十四
- Python_随机序列生成_白噪声
- HIHOcoder 1441 后缀自动机一·基本概念
- Javascript-string-Array
- grep命令.md
- meshconverters
- 苏州Uber优步司机奖励政策(4月2日~4月3日)