常用webpack优化的方法

1. webpack简介

webpack 是一个模块打包器。webpack的主要目标是将 JavaScript 文件打包在一起,
打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)
或包裹(package)任何资源(resource or asset)。

在日常开发工作中,我们除了会使用webpack以及会编写它的配置文件之外,我们还需要了解一些关于webpack性能优化的方法,这样在实际工作就能够如虎添翼,增强自身的竞争力。

2. 浅谈webpack打包的原理

1. webpack打包之后的文件

1. 在打包后的文件中我们去看是一个自执行函数
2. 参数是通过对象形式去传递的
    key:文件路径  value:是一个函数执行当前文件
    eval 执行字符串代码
    由多个相互依赖的文件,最终打包成一个文件
3. 通过__webpack_require__ 通过递归的方式不停调用自己 最终形成一个文件

3. webpack打包优化

我认为有以下几方面:

1. 自带的优化
    tree-sharking :依赖关系的解析-->不用的代码不打包(注意:生产环境才会有效)
    scope-hoisting :作用域提升(变量直接可以取到的结果不会打包到代码中)
2. 自己写的优化
    速度
      happypack:多线程打包(注意:体积比较小打包的时候 比较慢)
    体积
      moment:时间插件引入很多语言包不需要的
           Igno rePlugin就会把不需要的语言包删掉

    html cdn 地址 jquery
    npm i jquery
    这些文件打包的时候打包到压缩文件中体积爆炸
    externals:{//不打包jQuery
        'jquery':'$'
    }
    modules:{
        noParse:/jquery/,
        ...
    }
    优雅代码程序
    autoprefixer :加载前缀
    babel-loader :插件引入
    终极大招:动态链接库
        把一些提取出来的包:react/react-dom
        放到一个单独的文件打包,最后可以放到cdn上,速度更快了。

  • 2
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力的小萌新

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值