webpack 性能优化

技术分享  / 倒序浏览   ©

#楼主# 2020-4-14

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
优化构建速度(可用于生产环境)


  • 优化babel-loader(明确打包范围范围、清除范围)
  • IngorePlugin(克制某些模块引用,减小体积)
  • noParse (克制打包某些东西,提高打包速度)
  • happyPack  多进程打包js,提高速度
  • ParallelUglifyPlugin  多进程压缩代码,只用于生产环境
优化构建速度(不可用于生产环境)


  • 自动革新
  • 热更新
  • DiiPlugin
优化产出代码

思路


  • 体积更小
  • 合理分包,不重复加载
  • 速度更快、内存使用更少
做法


  • 小图片base64编码
  • bundle加hash (产出文件后缀加hase8位,缓存)
  • 懒加载(import语法 返回promise对象,和vue异步组件、路由原理一样)
  • 提取公共代码
  • IngorePlugin
  • 使用cdn加速
  • 使用production  自动压缩代码
  • Scope Hosting
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

张小弛

新手猿

  • 主题

    8

  • 帖子

    8

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆