webpack优化前端性能

一、webpack来优化前端性能
首先,用webpack优化前端性能是指优化webpack的输出结果,让打包的最终结果在浏览器运行快速高效。

  • 压缩代码:
    删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUhlifyPlugin来压缩JS文件,利用cssnano(css-loader?minimize)来压缩css

  • 利用CDN加速:
    在构建过程中,将引用的静态资源路径修改为CDN上对应的路径。可以利用
    webpack对于output参数和各种loader的publicPath参数来修改资源路径

  • Tree Shaking
    消除最终文件中未使用的代码。可以通过在启动webpack时追加参数–optimize-minimize来实现

  • Code Splitting
    将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利用浏览器缓存

  • 提供公共第三方库
    SplitChunksPlugin插件来进行公共模块抽取,利用浏览器缓存可以长期缓存这些无需频繁变动的公共代码

webpack treeShaking机制的原理

  • treeShaking也叫摇树优化,是一种通过移除多余代码,来优化打包体积的,生产环境默认开启
  • 可以在代码不运行的状态下,分析出不需要的代码
  • 利用es6模块的规范
    ES6 Module引入进行静态分析,故而编译的时候正确判断到底加载了那些模块
    静态分析程序流,判断哪些模块和变量未被使用或者引用,进而删除对应的代码

二、webpack如何实现持久化缓存

  • 服务端设置http缓存头(cache-control)
  • 打包依赖和运行时到不同的chunk,即作为splitChunk,因为他们几乎是不变的
  • 延迟加载:使用import()方式,可以动态加载的文件分到独立的chunk,以得到自己的chunkhash
  • 保持hash值的稳定:编译过程和文件内通的更改尽量不影响其他文件hash的计算,对于低版本的webpack生成的增量数字id不稳定问题,可用hashedModuledldsPlugin基于文件路径生成解决
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值