专栏首页vue学习16、webpack从0到1-tree shaking

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、小结

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • axios的封装、代理转发、数据mock

    Ewall
  • axios的封装与请求

    Ewall
  • 8、webpack从0到1-基本的plugins

    参考链接: webpack-html-webpack-plugin html-webpack-plugin output-management

    Ewall
  • Binary Search Tree 以及一道 LeetCode 题目

    由于对于 Binary search tree 不理解,所以绕了点弯路,要解这道题,必须理解什么是 binary search tree。我们来看一下定义:

    大江小浪
  • SAP CDS view单元测试框架Test Double介绍

    Part1 – how to test odata service generated by CDS view

    Jerry Wang
  • mysql的“Got error 28 from storage engine”错误

    个人博客:https://suveng.github.io/blog/​​​​​​​

    suveng
  • 欧洲信用卡终端机仍存在严重漏洞

    当美国准备转向使用“芯片和密码”模型的信用卡交易时,欧洲还在开心的使用传统的更加安全的人工方式进行交易。但是,欧洲现在的信用卡交易方式出现问题是迟早的事。 摘...

    FB客服
  • ksoap2:实现gzip压缩发送request data

    版权声明:本文为博主原创文章,转载请注明源地址。 https://blog.csdn.net...

    用户1148648
  • CNCF网研会(视频+PDF):YAML是可选的:探索应用程序开发者的Kubernetes选项

    这次演讲的重点是可用性,以及当前的工具,例如kubectl和YAML,如何不能满足应用程序开发者的目标。会谈到NetApp在ALM方面的工作,也会谈到生态系统的...

    CNCF
  • 重磅 | 自动驾驶计算机视觉研究综述:难题、数据集与前沿成果(附67页论文下载)

    选自arXiv 机器之心编译 参与:李亚洲、微胖、黄小天、蒋思源 近日,德国马克斯普朗克智能系统研究所(Max Planck Institute for Int...

    机器之心

扫码关注云+社区

领取腾讯云代金券