• 机构投资者应合理审慎报价 2019-07-16
  • “2018上影之夜”姜文等为“谢晋经典电影回顾展”揭幕 2019-07-10
  • 交大钱学森学院举行毕业典礼 14毕业生赴世界排名前百大学读研 2019-07-10
  • 西安市:构建“五方联动”社会治理新格局 2019-06-23
  • IP定向--云南频道--人民网 2019-06-23
  • 育儿十大坎 新手妈妈快快get起来 2019-06-21
  • 吉林:让更多农村孩子参加少年宫活动 2019-06-21
  • 美国发起贸易战,我们要让世界知道美元、美债并不可靠 2019-06-05
  • 紫光阁中共中央国家机关工作委员会 2019-05-31
  • 监察体制改革后 湘西半年72名公职人员主动交代问题 2019-05-12
  • 媒体宣传报道重庆日报 王国平:扮靓重庆两江四岸” 让城市有机更新 2019-04-26
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2019-04-16
  • 14名消防员日巡逻28公里 洗冷水澡 2019-04-10
  • 靶壕有了“蓝军”,百发百中的“神枪手”练起来 2019-04-10
  • 不是秀强大了,别人就会来做朋友,这逻辑不对 2019-04-01
  • 频道栏目
    神奇公式秒杀全国11选5 > 程序开发 > web前端 > HTML/CSS > 正文
    webpack4js构建速度优化-flashback-SegmentFault思否
    2019-05-11 22:05:10           
    收藏   我要投稿

    请注意:本文主要是针对 webpack4 的 js 构建速度做优化。

    用一句话总结本文,就是给 js 构建流程加 cache,让任务并行。

    babel-loader

    神奇公式秒杀全国11选5 www.2zfa.com 首先第一个主角 babel-loader,给babel-loader 加一个参数即可cacheDirectory: true。相关的配置还有 cacheIdentifier 和 cacheCompression,cacheIdentifier 是给 cache 配一个标识,cacheCompression 是babel-loader 默认会以 gzip 去压缩,如果你的文件量非常大可以尝试设为 false。

    thread-loader

    什么,光有 cahche 还是不够快吗,谁让你一次要改那么多文件。cache 只能在第一次构建之后起作用,而且第一次构建本身也依旧是耗时的事情。那么我们请出第二个主角 thread-loader,这货看名字就知道是干嘛的吧。简单说就是让你的多核 cpu 按一定配置来参与到打包流程中。加进来之后 js rule 的配置就变成以下

    rules: [
      {
        test: /\.js$/,
        include: /(src)/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: os.cpus().length
            }
          },
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [['es2015', { modules: false }], 'stage-0', 'react']
            }
          }
        ]
      },

    workers 的数量就是参与编译的 cpu 核心数量。thread-loader 的参数大致可以分为 workers 和 pool 两类:

    workerParallelJobs 一个 worker 进程中并行执行工作的数量,默认20 workerNodeArgs 额外的 node.js 参数 ['--max-old-space-size', '1024'] poolTimeout 闲置时定时删除 worker 进程,默认为 500ms poolParallelJobs 一个 pool 的并行任务数

    如果项目的 css 文件也很多其实不妨为 css 也加上 thread-loader。

    uglifyjs-webpack-plugin

    js 完成编译之后通?;够嵊幸桓?uglify 的过程,这里如法炮制即可

    optimization: {
        minimizer: [
          new UglifyJsPlugin({
            cache: '.uglifyJsCache',
            parallel: os.cpus().length,
            uglifyOptions: {}
          })
       ]
    }

    是不是很熟悉,加一个 cache 和 parallel 就可以了。

    好了,本文到这里就结束了。如果本文对你有帮助不妨点个赞,如果有问题,非?;队刺致郏ㄗ詈么洗耄?。本文没有加时间的对比,因为我觉得没有什么意义,不同项目大小和参数设置会带来完全不同的效果。本文的方式适不适合你的项目,加一下试试就知道了。

    点击复制链接 与好友分享!回本站首页
    相关TAG标签
    上一篇:[打包优化]从0到1搭建element后台框架优化篇-前端小东西-SegmentFault思否
    下一篇:【前端刷题笔记02】字节跳动2019面试题-一只想做全栈的猫-SegmentFault思否
    相关文章
    图文推荐
    点击排行

    关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 神奇公式秒杀全国11选5

    版权所有: 神奇公式秒杀全国11选5--致力于做实用的IT技术学习网站

  • 机构投资者应合理审慎报价 2019-07-16
  • “2018上影之夜”姜文等为“谢晋经典电影回顾展”揭幕 2019-07-10
  • 交大钱学森学院举行毕业典礼 14毕业生赴世界排名前百大学读研 2019-07-10
  • 西安市:构建“五方联动”社会治理新格局 2019-06-23
  • IP定向--云南频道--人民网 2019-06-23
  • 育儿十大坎 新手妈妈快快get起来 2019-06-21
  • 吉林:让更多农村孩子参加少年宫活动 2019-06-21
  • 美国发起贸易战,我们要让世界知道美元、美债并不可靠 2019-06-05
  • 紫光阁中共中央国家机关工作委员会 2019-05-31
  • 监察体制改革后 湘西半年72名公职人员主动交代问题 2019-05-12
  • 媒体宣传报道重庆日报 王国平:扮靓重庆两江四岸” 让城市有机更新 2019-04-26
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2019-04-16
  • 14名消防员日巡逻28公里 洗冷水澡 2019-04-10
  • 靶壕有了“蓝军”,百发百中的“神枪手”练起来 2019-04-10
  • 不是秀强大了,别人就会来做朋友,这逻辑不对 2019-04-01
  • 2019排列三开奖号码 双色球红球遗漏 梭哈大爷表情包 福建快3走势一定牛 中国福利彩票走势 码报生肖卡 内部透露一肖一码中特 吉林快三官方开奖时间 江苏快三网上彩乐乐 福建省体彩开奖官方网站 胜分差单注 新疆喜乐彩奖金 雪缘园nba比分直播网 陕西省体育彩票双色球 在线真人龙虎斗