小结:
prd环境下,webpack提供了两个优化项。

  1. 一个是tree-shaking:用于自动删除没有用到的代码;
  2. 一个是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",配置下生效。