美文网首页
webpack实践(6)--tree shaking

webpack实践(6)--tree shaking

作者: kim_jin | 来源:发表于2019-06-25 15:14 被阅读0次

添加一个通用模块

假设我们在项目中添加一个新的通用模块的文件math.js,并且导出了两个函数:

项目目录 math.js

然后我们将模式设置为development来确定bundle 是未压缩版本。

webpack.config.js

然后对现在的index.js的文档进行修改:

index.js

注意,我们没有从 src/math.js模块中 import另外一个 square方法。这个函数就是所谓的“未引用代码(dead code)”,也就是说,应该删除掉未被引用的export。现在运行npm script npm run build,并查看输出的bundle

bundle.js

上面的没有使用的square方法虽然没有使用过,但是他还是被打在了包里面。

将文件标记为 side-effect-free(无副作用)

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]
}

"./src/some-side-effectful-file.js"这个文件将会被自动的打到保重,进行优化的时候,不会将它删除。

相关文章

网友评论

      本文标题:webpack实践(6)--tree shaking

      本文链接:https://www.haomeiwen.com/subject/gmxtcctx.html