search

flytam / blog

blog | 公众号 Geek技术前线
https://blog.flytam.vip
25 stars 2 forks source link

两个小优化，webpack打包速度飞起来 #6

Open flytam opened 5 years ago

flytam commented 5 years ago

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项目使用上面的即可。

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

ZhaoTim commented 4 years ago

厉害！