浅析webpack 如何优雅的使用tree-shaking（摇树优化）
1.什么是tree-shaking
webpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js，先如今，webpack 2也有类似的做法。
webpack 里的tree-shaking的到来不得不归功于es6规范的模块。为什么这么说，如今的前端模块规范很多，比较出流行的比如commonJS , AMD , es6 ，我简单的说一下commonJS和es6模块的区别。
commonJS 模块
commonJS的模块规范在Node中发扬光大，总的来说，它的特性有这几个：
1.动态加载模块
commonJS和es6的最大区别大概就在于此了吧，commonJS模块的动态加载能够很轻松的实现懒加载，优化用户体验。
2.加载整个模块
commonJS模块中，导出的是整个模块。
3.每个模块皆为对象
commonJS模块都被视作一个对象。
4.值拷贝
commonJS的模块输出和 函数的值传递相似，都是值的拷贝
es6 模块
1.静态解析
即在解析阶段就确定输出的模块，所以es6模块的import一般写在被引入文件的开头。
2.模块不是对象
在es6里，每个模块并不会当做一个对象看待
3.加载的不是整个模块
在es6模块中经常会看见一个模块中有好几个export 导出
4.模块的引用
es6模块中，导出的并不是模块的值拷贝，而是这个模块的引用
在结合es6模块和commonJS模块的区别之后，我们知道es6的特点是静态解析，而commonJS模块的特点是动态解析的，因此，借于es6模块的静态解析，tree-shaking的实现才能成为可能。
在webpack中，tree-shaking指的就是按需加载，即没有被引用的模块不会被打包进来，减少我们的包大小，缩小应用的加载时间，呈现给用户更佳的体验。
2.怎么使用tree-shaking
说了这么多那到底如何使用tree-shaking呢？
webpack默认es6规范编写的模块都能使用tree-shaking。这是什么意思呢？下面来看个例子。
首先奉上我的demo目录如下：
├─dist
└─index.html
├─node_modules
└─...
├─src
├─scripts
├─assets
├─webpack.config.js
└─package.json
dist用来存放打包好的代码
src相反的用来存放源文件
src里的scripts目录用来存放js脚本文件，assets用来存放静态资源文件
以下几条命令过后开始我们的tree-shaking之旅
npm install --save-dev webpack webpack-dev-server
webpack.config.js
const webpack = require('webpack')
const path = require('path')
module.exports = {
entry:'./src/scripts/main.js',
output:{
path:path.resolve(__dirname,'dist/'),
filename:'main.bundle.js'
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer:{
port:4200,
contentBase:path.resolve(__dirname,'dist/'),
historyApiFallback:true,
hot:true
}
}
接下来是main.js，直接引入了sayHello
import { sayHello } from './greeter.ts';
sayHello();
相应的main.js的依赖greeter.js
export function sayHello(){
alert('hello')
}
export function sayWorld(){
alert('world')
}
在dist目录下有个index.html 用来引入打包后的bundle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript" src="./main.bundle.js"></script> </body> </html>
以上就是整个demo的代码，接下来的事情我们直接webpack打包试试看
去掉打包后冗长的代码只看chunk传参的部分：
[
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__person__ = __webpack_require__(1);
Object(__WEBPACK_IMPORTED_MODULE_0__person__["a" /* sayHello */])();
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return sayHello; });
/* unused harmony export sayWorld */
function sayHello(){
alert('hello');
}
function sayWorld(){
alert('world');
}
/***/ })
/******/ ]
我们关注这一行
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return sayHello; });
实际上只return了一个sayHello。
因此我们现在只需要压缩一下整个Js代码，就能把没引用的sayWorld剔除。
键入以下命令进行压缩
webpack --optimize-minimize
由于压缩后的代码只有一行了，我们移步尾部：
function(e,n,r){"use strict";function t(){alert("hello")}r.d(n,"a",function(){return t})}]);
可以看到sayWorld函数已经被成功剔除。
我们启动webpack-dev-server
webpack-dev-server
在浏览器中输入
每次都需要在命令行里输入参数，岂不是很麻烦，还有没有其他更好的办法呢？
（1）我们可以把这串命令放入package.json的scripts字段，然后通过npm start来自动执行
（2）其实–optimize-minimize的底层实现是一个插件UglifyJsPlugin，因此，我们可以直接在webpack.config.js里配置它
在webpack.config.js里配置插件
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:'./src/scripts/main.js',
output:{
filename:'main.bundle.js',
path:path.join(__dirname,'dist')
},
plugins:[
new webpack.optimize.UglifyJsPlugin(), // <----------- 压缩js
new webpack.HotModuleReplacementPlugin()
],
devServer:{
port:4200,
historyApiFallback:true,
hot:true,
contentBase:path.join(__dirname,"dist/")
}
}
然后我们webpack打包
即看到同样的效果
function(e,n,r){"use strict";function t(){alert("hello")}r.d(n,"a",function(){return t})}]);
在tree-shaking触发打包后，仅仅是撇开了模块的引用，但还是要结合压缩工具来进行，这才是完整的一次tree-shaking
那如果是typescript该怎么使用tree-shaking呢？
3.如何在typescript里使用tree-shaking
要在webpack里使用ts，首先我们必须安装tsc
npm install --save-dev typescript
之后我们需要解析ts文件的loader
npm install --save-dev ts-loader
然后在webpack.config.js进行配置
const webpack = require('webpack')
const path = require('path')
module.exports = {
entry:'./src/scripts/main.ts',
output:{
path:path.resolve(__dirname,'dist/'),
filename:'main.bundle.js'
},
module:{
rules:[
{
test:/\.ts$/,
use:['ts-loader']
}
]
},
plugins:[
new webpack.optimize.UglifyJsPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer:{
port:4200,
contentBase:path.resolve(__dirname,'dist/'),
historyApiFallback:true,
hot:true
}
}
献上我的两份文件main.ts , greeter.ts （这两份文件除了后缀名基本没有改动）
main.ts
import { sayHello } from './greeter.ts';
sayHello();
greeter.ts
export var sayHello = function(){
alert('hello')
}
export var sayWorld = function(){
alert('world')
}
之后我们需要做的是，创建一个tsconfig.json的配置文件供tsc解析，这时，坑来了。
下面是我的tsconfig.json文件
{
"compilerOptions":{
"target":"es5",
"sourceMap":true
},
"exclude":[
"./node_modules"
]
}
好像没有什么不对
接着我们webpack
看下打包压缩后的代码的最后一部分：
"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.sayHello=function(){alert("hello")},n.sayWorld=function(){alert("world")}}]);
sayWorld居然还是存在！！！怎么回事，为什么没有被触发tree-shaking优化？
这是因为tsc编译后的代码为es5 ，而正因如此，tsc默认使用了commonJS的规范来加载模块，因此并没有触发tree-shaking，那我们要怎么做？
修改一下tsconfig.json，把target改为es6即可！
{
"compilerOptions":{
"target":"es6",
"sourceMap":true
},
"exclude":[
"./node_modules"
]
}
再次打包
看一下打包后的bundle
function(e,n,r){"use strict";r.d(n,"a",function(){return t});var t=function({alert("hello")}}]);
果然是触发了tree-shaking
开启webpack-dev-server
webpack-dev-server
可以看到成功打印hello
以上就是我对webpack tree-shaking的总结，希望对大家的学习有所帮助
相关推荐
-
Vue.js中用webpack合并打包多个组件并实现按需加载
前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能
-
Webpack 实现 AngularJS 的延迟加载
随着你的单页应用扩大,其下载时间也越来越长.这对提高用户体验不会有好处(提示:但用户体验正是我们开发单页应用的原因).更多的代码意味着更大的文件,直到代码压缩已经不能满足你的需求,你唯一能为你的用户做的就是不要再让他一次性下载整个应用.这时,延迟加载就派上用场了.不同于一次性下载所有文件,而是让用户只下载他现在需要的文件. 所以.如何让你的应用程序实现延迟加载?它基本上是分成两件事情.把你的模块拆分成小块,并实施一些机制,允许按需加载这些块.听起来似乎有很多工作量,不是吗?如果你使用 Webpa
-
Bootstrap Tree View简单而优雅的树结构组件实例解析
A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer. 这是Bootstrap Tree View在git上的简介. 注意simple.elegant,简单而优雅,我喜欢这两个词. 那么今天的实例是通过Bootstrap Tree View来制作
-
zTree树形插件异步加载方法详解
本文实例为大家分享了zTree树形插件异步加载,Struts2框架,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>异步加载</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/zTree_v
-
webpack中引用jquery的简单实现
1.首先需要添加项目中jquery的依赖 npm install jquery --save-dev 2.参考配置代码: var webpack = require("webpack"); var path = require("path"); module.exports = { entry:{ home:"./src/js/home.js", -- }, output:{ path:__dirname+"/dist/js"
-
浅析webpack 如何优雅的使用tree-shaking（摇树优化）
1.什么是tree-shaking webpack 2 的到来带来的最棒的新特性之一就是tree-shaking .tree-shaking源自于rollup.js,先如今,webpack 2也有类似的做法. webpack 里的tree-shaking的到来不得不归功于es6规范的模块.为什么这么说,如今的前端模块规范很多,比较出流行的比如commonJS , AMD , es6 ,我简单的说一下commonJS和es6模块的区别. commonJS 模块 commonJS的模块规范在Node
-
tree shaking对打包体积优化及作用
目录 背景 有啥用? 实践 前置准备 打包 sideEffects 副作用 sideEffects的使用 优化体积 背景 大家平时在查 webpack构建体积优化 ,可能都会查到 tree-shaking 这个东西,很多人看到这个东西,就会把它背下来,用来应付以后面试官可能会问到的情况. 但是,又有多少人去真的了解一下 tree-shaking 呢?自己去实践一下看 tree-shaking 到底起了哪些作用?对于我们的打包体积的优化又有多少呢? 有啥用? Tree Shaking中文含义是摇树
-
JS 加载性能Tree Shaking优化详解
目录 正文 什么是 Tree Shaking 寻找 Tree Shaking 的机会 防止 Babel 将 ES6 模块转换为 CommonJS 模块 留意 side effects 只导入你需要的 更复杂的情况 总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月,在 httparchive 上有统计显示——在移动设备上 JS 传输大小大约为 447 KB,桌面端 JS 传输大小大约为 495 KB,注意这仅仅是在网络中传输的 JS 文件大小,JS
-
webpack的tree shaking的实现方法
webpack的tree shaking util.js export const a = () => { console.log("a123456方法"); }; export const b = () => { console.log("b123456方法"); }; main.js import {a} from './utils'; a(); sideEffects 一般而言,上述代码,在 webpack 进行 tree shaking 能够不打
-
webpack4 CSS Tree Shaking的使用
本次课程的代码目录(如下图所示): 什么是tree-shaking webpack 2 的到来带来的最棒的新特性之一就是tree-shaking .tree-shaking源自于rollup.js,先如今,webpack 2也有类似的做法. webpack 里的tree-shaking的到来不得不归功于es6规范的模块.为什么这么说,如今的前端模块规范很多,比较出流行的比如commonJS , AMD , es6 ,我简单的说一下commonJS和es6模块的区别. 1. CSS 也有 Tree
-
浅谈Webpack4 Tree Shaking 终极优化指南
几个月前,我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4.我们的主要目标之一是利用 tree-shaking 的优势,即 Webpack 去掉了实际上并没有使用的代码来减少包的大小.现在,tree-shaking 的好处将根据你的代码库而有所不同.由于我们的几个架构决策,我们从公司内部的其他库中提取了大量代码,而我们只使用了其中的一小部分. 我写这篇文章是因为恰当地优化 Webpack 并不简单.一开始我以为这是一种简单的魔法,但后来我花了一个月的时间在网上搜索我遇到
-
Tree Shaking实现方法指南
目录 正文 方式一:JavaScript模拟 方式二:利用AST实现 正文 当使用JavaScript框架或库时,代码中可能会存在许多未使用的函数和变量,这些未使用的代码会使应用程序的文件大小变大,从而影响应用程序的性能.Tree shaking可以解决这个问题,它可以通过检测和删除未使用的代码来减小文件大小并提高应用程序性能. 接下来我们将通过两种方式实现Tree shaking 方式一:JavaScript模拟 1.首先,你需要使用ES6模块来导出和导入代码.ES6模块可以静态分析,从而使T
-
Unity Blend Tree动画混合树使用入门教程
介绍 在动画与动画的切换过程中,常因为两个动画之间的差距过大,而显得动画的切换很不自然. 这时候就需要动画混合树Blend Tree这个功能.使用混合树可以将多个动画混合在一起,例如在处理角色的移动中,走动画与跑动画切换的时候,在走动画与跑动画中生成多个过渡用的插值动画以达到平滑得切换的功能. 创建混合树 在Animator窗口的空白处右键,Create State > From New Blend Tree,然后双击Blend Tree进入混合树.笔者使用的是unity2019.4的版本,现在
-
webpack4.0打包优化策略整理小结
本文介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资料 当前依赖包的版本 1.优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件 从而缩小了loader加载搜索范围 高概率命中文件 module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, // 排除不处理的目录
-
简单谈谈关于Angular Cli打包的事
本文主要给大家介绍了关于Angular Cli打包的事,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.引言 Angular从开发再到生产环境部署都离不开Angular Cli工具集,而Angular Cli本质上是使用 Webpack(当前使用版本为2) 来打包资源. Webpack 本身并不复杂,略用过一点都清楚,只需要创建一个 webpack.config.js 的文件并简单的配置,就可以把一个复杂的应用所有文件全部打包成若干静态资源文件. 然而一个复杂的应用免不了使