小结:
prd环境下,webpack提供了两个优化项。
- 一个是
tree-shaking
:用于自动删除没有用到的代码; - 一个是
scope hosting
:用于自动简化代码,减少变量;
下面通过例子理解一下这两个插件。
01 自动删除无用代码:tree-shaking
举个例子:
我有两个js文件,一个生成方法,一个使用方法:
bbb.js
let sum = (a, b) => {
return a + b + 'sum'
}
let minus = (a, b) => {
return a - b + 'minus'
}
export default {
sum,
minus,
}
aaa.js
import calc from './bbb'
console.log(calc.sum(1, 2))
aaa.js
中用到了bbb.js
里面的sum
方法,minus
方法是无人调用的废代码。
如果你采用开发环境打包,如下:
module.exports = {
mode: "development",//模式,两种模式,产线模式"production"、开发模式"development"。产线模式会把编译文件进行压缩优化,代码变成一行。
entry: "./src/aaa.js",//入口,相对路径
output: {
filename: "bundle.[hash:8].js",//打包后的文件名
path: path.resolve(__dirname, "dist"),//打包后的路径(文件夹路径),必须是绝对路径,"__dirname"指当前路径
},
}
打包出来的文件包含很多无用的代码。
npx webpack
查看文件:
//省略其他代码
……
var sum = function sum(a, b) {
return a + b + 'sum';
};
var minus = function minus(a, b) {
return a - b + 'minus';
};
/* harmony default export */ __webpack_exports__["default"] = ({
sum: sum,
minus: minus
});
//省略其他代码
……
你只需要将mode
配置改成production
就能删掉多余代码。
module.exports = {
mode: "production",//模式,两种模式,产线模式"production"、开发模式"development"。产线模式会把编译文件进行压缩优化,代码变成一行。
entry: "./src/aaa.js",//入口,相对路径
output: {
filename: "bundle.[hash:8].js",//打包后的文件名
path: path.resolve(__dirname, "dist"),//打包后的路径(文件夹路径),必须是绝对路径,"__dirname"指当前路径
},
}
运行:
npx webpack
查看文件:
!function(){"use strict";console.log(1+2+"sum")}();
//# sourceMappingURL=bundle.dc4cd913.js.map
发现代码非常精简,优化成只有一行代码。
原理
webpack内部添加了tree-shaking
插件,用于将没用的代码自动删除。
该配置只在mode: "production",
配置下生效。
02 自动省略可简化的代码:scope hosting
举个例子:
aaa.js文件中添加如下代码:
let s1 = 1;
let s2 = 2;
let s3 = 3;
let s4 = 4;
console.log(s1 + s2 + s3 + s4)
mode: "development",
配置下,
打包输出文件(bundle.js
)代码如下:
……
console.log(_bbb__WEBPACK_IMPORTED_MODULE_0__.default.sum(1, 2));
var s1 = 1;
var s2 = 2;
var s3 = 3;
var s4 = 4;
console.log(s1 + s2 + s3 + s4);
……
如果改成mode: "production",
配置,
打包输出文件(bundle.js
)代码如下:
console.log(10);
会发现代码所有变量都被优化成了具体的值,并进行计算输出结果。
原理
这是因为webpack内部使用的 scope hosting
插件。
该插件作用是:作用域提升
可以在打包时自动省略可以简化的变量,这样就无需声明多个变量。
该配置只在mode: "production",
配置下生效。
暂无评论