H5 页面视频播放

什么是副作用代码

webpack 2.x 开始就支持了Tree-Shaking特性，该特性利用了 ES6 的模块依赖，如果严格按照 ES6 的模块化开发，一般情况下它是很好用的。但是如果遇到副作用代码的话，情况就不一样了：

1
2
3
4
// a.js
export const a = () => {
  console.log('This is a module.');
};
1
2
3
4
5
// b.js
export const b = () => {
  console.log('This is b module.');
};
console.log(b);
1
2
3
4
// index.js
import { a } from './a.js';
import { b } from './b.js';
a();

b.js模块虽然没被index.js模块引用，但b.js 模块采用被打包进来，这是因为b.js模块包含了副作用代码console.log(b);。出于打包安全考虑，而webpack默认是不会自己删除带有副作用代码的模块，只有开发者才知道需不需要这些副作用的代码。

如何解决

  • package.json指定模块
  • module.rules指定模块

package.json 设置

package.json的sideEffects属性有两种设置方式:

  1. 直接设置为false：
1
"sideEffects": "false"

这种方式是告诉 webpack，所有代码模块里没有副作用代码，可以安全地删除未用到的模块，所以上面的b.js模块不会被包含进来，副作用代码console.log(b);也不会被执行。

  1. 显式指定那些模块有副作用代码：
1
2
3
"sideEffects": [
  "!b.js"
]

sideEffects是一个数组列表，而且遵循相对路径、绝对路径和glob 模式。这种方式则是告诉 webpack，不需要b.js模块，即使它有副作用代码。

module.rules指定模块

在 webpack 的rules配置，也可配置带有副作用代码的模块：

1
2
3
4
5
6
7
8
module: {
  rules: [
    {
      include: path.resolve('./', 'b.js'),
      sideEffects: false,
    },
  ],
},

上面这种方式则是告诉 webpack，我不需要这个模块了，即使它有副作用代码，另外这种方式的设置优先级比package.json高。

[本文谢绝转载，谢谢]

分类: 技术
粤ICP备2022084378号