首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >两个配置修改,让你的webpack打包速度飞起来

两个配置修改,让你的webpack打包速度飞起来

作者头像
flytam
发布2020-01-14 17:54:37
2.3K0
发布2020-01-14 17:54:37
举报
webpack打包速度优化-js

公司前端项目由于一些原因,很多业务都是放在同一仓库内(例如业务a、b、c,对应目录app/a app/b app/c),并且是用同一套webpack的配置进行打包,每次构建的时候通过传入特定的参数打包指定的业务

优化1 使用babel7,@babel/preset-typescript替代ts-loader

使用babel7并且使用@babel/preset-typescript代替ts-loader。一方面,babel7拥有着更快的速度,另一方面,ts-loader默认是会读取ts-config的,于是每次构建的时候ts-loader都会去检查全有业务的类型(即使我们只打包a业务)。

需要注意的是升级babel7后,相关包名都变成@babel前缀,并且stage-x不再支持(大概原因是stage-x每年都会有变,有的提案可能被废弃导致有的语法被移除,但是却很多项目可能使用了,换成单独配置相关语法特性),需要转对应。以及,@babel/preset-typescript不在支持namespace 详情

迁移指南

    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",

一版而言对于react项目使用上面的即可。

  • @babel/core babel的核心库
  • @babel/plugin-proposal-class-properties 写react非常实用的类的箭头函数绑定
  • @babel/plugin-proposal-decorators 装饰器语法
  • @babel/preset-env es6+转换
  • @babel/preset-react react jsx支持
  • @babel/preset-typescript ts支持

babel7新增了babel.config.js型的配置,对比.babelrc.babelrc是从每一个文件向上查找配置的,babel.config.js则不会。

// babel.config.js

module.exports = function(api) {
  api.cache(true)

  const presets = [
    [
      '@babel/preset-env',
      {
        modules: false
      }
    ],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ]
  const plugins = [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]

  return {
    presets,
    plugins
  }
}

// webpack.js
...
        {
          test: /\.(jsx?|tsx?)$/,
          exclude: ['node_modules'],
          use: ['babel-babel']
        },
...
优化2 happypack

happypack 是 webpack 的一个插件,目的是通过多进程模型,来加速代码构建。(这个提升还是很明显的)

使用happypack加载babel-loader

let HappyPack = require('happypack')
let os = require('os')
let happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
...
        {
          test: /\.(jsx?|tsx?)$/,
          exclude: ['node_modules'],
          use: ['happypack/loader?id=babel']
        },
...
...
    plugins: [
      new HappyPack({
        id: 'babel',
        loaders: [
          {
            loader: 'babel-loader'
          }
        ],
        threadPool: happyThreadPool
      })]
...

优化前

dev babel6+ts-loader 56806ms

在这里插入图片描述
在这里插入图片描述

build babel6+happypack 29758ms

在这里插入图片描述
在这里插入图片描述

优化后 dev babel7+happypack 9576ms

在这里插入图片描述
在这里插入图片描述

build babel7+happypack 23838ms

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • webpack打包速度优化-js
    • 优化1 使用babel7,@babel/preset-typescript替代ts-loader
    • 优化2 happypack
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档