介绍
在前端工程化中,Webpack 4.0 是一个非常常见的打包工具,它支持导入非 JavaScript 文件,如图片、样式等,并且可以进行 Tree-Shaking 优化,以减小打包后的文件体积。Tree-Shaking 技术是通过静态分析代码中未被使用的部分,从编译后的 JavaScript 中精简掉这些未使用的部分,从而减小代码体积。下面将介绍在 Webpack 4.0 中如何使用 Tree-Shaking 以及其优缺点。
如何使用
- 安装 Webpack 4.0
首先,如果你还没有安装 Webpack 4.0,可以在终端中输入以下命令:
npm install webpack --save-dev
- webpack.config.js 配置
在 webpack.config.js 文件中,可以通过以下两种方式开启 Tree-Shaking:
方式一:通过配置 mode 为 production,Webpack 4.0 自动开启 Tree-Shaking。
// webpack.config.js module.exports = { mode: 'production' };
方式二:手动设置 optimization 配置项中的 minimize 和 usedExports 为 true。
// webpack.config.js module.exports = { optimization: { minimize: true, usedExports: true, }, };
示例代码
下面以一个简单的 ES6 模块为例,例如一个包含两个函数的工具函数库:
my-utils.js:
export function add(a, b) { return a + b; } export function subtract(a, b) { return a - b; }
app.js:
import { add } from './my-utils'; console.log(add(1, 2));
通过运行 Webpack 打包后,得到的 app.js 代码如下:
-- -------------------- ---- ------- ------------ - --- - - --- -------- ---- - -- ------ ------ ------------- --- - - ---- - - -- -- -- --- -------- -- -- ------ -------------------- -- ---------- --- --- - --- ---------- - --- - -- --- - -- --- - ----------- -- -- - ------ -- -- ------------------------ -- - ----------- --- ---- - --- -- --- - ----------- - ----------- -- ------ ------ -- ------------------ -- ------------------------ ------------------- - ------ -------- --- ------------------------ ------------- - ------ -- --- -- --- - ----------- -- - -- -- - - -- -- - ------ - - -- ------ -- -- -- - - -- -------- -- ------ - -- - -- ------------- ------ -- --- - - -------------------- -- -------- ------------------------ ---------- - ----------- --- ------ - --- - - - -- -------- -- ------ -- --- ---- - -- -- ------ -- ----------- - ------ ----- ------------ ---- ------ -- -- --- - ----------- - --- - - - -- ------------ - ---------- - ------ ---------- - - ---------- - ------ -- -- ------ ------ ---- --- -- -- --- - ----------- -- - ------ --------------------------------------- --- -- --- - --- ----- - --- -------------- -- -- - ------- --- - - ----- ------ ------ ---------- - ------ ---- --- -- ----------- -- - --- - ----------- -- - ------ - - -- -- ----
可以看到,Tree-Shaking 技术验证了 app.js 中只使用了 my-utils.js 工具函数库中的 add 函数代码,并将其独立输出,subtract 函数代码则被删除。
优缺点
优点
减小文件体积:Tree-Shaking 可以排除无用的代码,从而减小最终打包后的文件体积。
优化加载速度:由于减小了文件体积,因此也减小了文件加载的时间。
缺点
需要一些配置:开启 Tree-Shaking 需要进行一些配置,在一些特殊的情况下可能出现失效的情况,需要针对不同的需求进行调整。
不适用于所有情况:Tree-Shaking 适合于工具函数库或者通过 NPM 引入的第三方库,如果是手写的业务逻辑代码,则会有一定的限制。
结论
Webpack 4.0 中的 Tree-Shaking 技术是一项非常有价值的优化技术,可以有效减小打包后的文件体积,优化网页加载速度,适用于工具函数库或者通过 NPM 引入的第三方库。在实际应用中,需要注意配置的一些细节和一些特殊情况下的调整。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6752a35d8bd460d3ad96c0ee