工程优化暨babel升级小记

小记背景

随着业务代码的增多，项目代码的编译时长也在增多，遂针对这个痛点在dev下作些优化

第一部分：优化dev编译时间

这里优化的主要思路是在dev环境下，单独出来一个dll配置文件，将项目中的部分依赖包写入配置文件，最终生成一个在dev环境下专用的dll文件，这样处理的目的是减小开发时的编译时间（ps：经测试能够提高50%左右的编译效率），具体修改以下：

• 独立dev的dll配置

拷贝一份当前的dll.config.js文件，并重命名为开发环境专用dll-dev.config.js,并进行以下修改：

// dll-dev.config.js
module.exports = {
  entry: {
    vendor: [
      'moment',
      'nprogress',
      'cookie_js',
      'echarts',
      'jsbarcode',
      'lodash',
      'lodash-decorators',
      'isomorphic-fetch',
      'antd',
      'react',
      'react-dom',
      'react-router',
      'react-router-redux',
      'redux',
      'redux-fetch-elegant',
      'redux-logger',
      'redux-thunk'
      ...
    ]
  }
}

• 修改开发环境配置文件webpack.dev.config.js

• 增长一条package.json命令,用于单独生成dev环境下的dll文件

"scripts": {
  "dll-dev": "./node_modules/.bin/webpack --config dll-dev.config.js",
}

dev环境下执行这条新的命令行生成dll文件以及对应的json映射文件，以便省去dev下一些import进来的包文件编译，从而减小工程的总体编译时长

npm run dll-dev

第二部分：工程升级到babel@7+

升级package依赖包 & 去除冗余

and

这里删除了'babel-preset-stage-2'，由于为了不概念模糊不清以及防止出现因为提案的删除或变动而致使不可预见问题，故而babel@7+中删除了阶段预设。

其余依赖包从v@6+升级到v@7+，并采用babel@7+中的最新官方包名称。
用于antd按需加载的babel-plugin-import也须要跟着babel进行升级到1.11.0，由于配置语法和资源的目录名称都改变了(详见babel.config.js)。

修改babel配置文件

在babel@7+中，增长了一个新的配置文件babel.config.js，这样可让配置文件变得更加灵活，更适合babel所采用的monorepo管理，好比能够将配置集中在全部包中、也能够为每个包单首创建配置，咱们这里采用这个配置文件，由于须要在config里写一些判断逻辑，以实现dev和pro的更深层次隔离

ps:详细的配置官方说明详见6.x vs 7.x

新的babel配置文件以下：

// babel.config.js
module.exports = function (api) {
  api.cache(true)
  const presets = [
    '@babel/preset-env',
    '@babel/react'
  ]
  const plugins = [
    ['@babel/plugin-transform-runtime', {
      'helpers': false,
      'regenerator': true
    }],
    ['@babel/plugin-proposal-class-properties', { 'loose': true }],
    ['import', {
      'libraryName': 'antd',
      'libraryDirectory': 'lib',
      'style': 'css'
    }, 'ant']
  ]
  return {
    presets,
    plugins
  }
}

编译测试对比

使用同一台电脑及开发环境进行测试比较

升级前执行编译耗时以下：

升级后执行编译耗时以下：

升级前进行修改保存耗时以下：

升级后进行修改保存耗时以下：