为了账号安全,请及时绑定邮箱和手机立即绑定

16、webpack从0到1-tree shaking

tree shaking,这个还是一个比较重要的一个东西吧,可以大大的优化你的项目。
git仓库:webpack-demo

1、是什么?

  • 我们首先从字面意思上来理解一下,tree shaking翻译一下就是摇树罗,摇树的时候就会把不必要的枯枝烂叶给摇下来,同理,到代码中,tree shaking就是把没有用到的代码shaking掉。

  • tree-shaking只有使用es6的模块化规范才有效,如果你使用commonJs模块化规范是搞不了tree-shaking的,为什么?

因为ES6模块是运行时加载(静态加载),即可以在编译时就完成模块加载,使得编译时就能确定模块的依赖关系,可以进行可靠的静态分析,这就是tree shaking的基础。
CommonsJs必须在跑起来运行的时候才能确定依赖关系,所以与不能tree-shaking
– 参考阮大神的讲解–>Module 的语法
概述

2、配置开发环境

  • 如果你看要tree-shaking的一个具体的效果,那么你需要在mode:development中,因为在生产环境的时候,webpack会自动帮我们做tree-shaking

  • 示例代码可以直接看官网的,大概就这么几个配置:

  • 设置usedExports为true

mode: 'development',
optimization: {
  usedExports: true,
},
  • package.json中设置下sideEffects,也可以是一个数组如"sideEffects": ["*.css"]就表示所有引入的css文件不做tree-shaking
{
  "name": "webpack-easy-demo",
+ "sideEffects": false,
}
  • 这里配置好了就ok了,但是有个最大的问题是什么,看官网是这么说的:

Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of the popular Babel preset @babel/preset-env - see the documentation for more details).
要确保没有编译器把es6的语法转换为require这种commonJs的这种写法,但是babel的这个@babel/preset-env配置的默认行为就是如此。

  • 我们配置使用bable配置es6的时候就要使用了这个,如此一来,岂不凉了?为了不让babeles6import/expot转为commonJs规范的require写法,我们需要这样:
{
   loader: "babel-loader",
   options: {
     presets: [
        [
          "@babel/preset-env",
          {
            useBuiltIns: "usage",
            corejs: { version: 3, proposals: true },
+           // 禁止将import/export转为require写法
+           modules: false
          }
        ]
      ]
   }
}

3、配置生产环境

  • 配置生产环境就很简单了。
    • mode设置为production
    • 设置下sideEffects;
    • 设置下bable配置modules: false

4、小结

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
7084
获赞与收藏
266

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消