阅读 3944

两个小优化,webpack打包速度飞起来

webpack打包速度优化-js

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

本文github地址

优化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-loader']
        },
...
复制代码

优化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
在这里插入图片描述

gayhub

文章分类
前端
文章标签