Reporter background

With the increase of business code, the compilation time of project code is also increasing, so some optimization is made under dev to address this pain point

Part ONE: Optimizing dev compile time

Optimization in the dev environment is the main train of thought of here, separate out a DLL configuration file, part of the project relies on packet write configuration files, the resulting a special DLL in the dev environment, the purpose of this kind of treatment is to reduce the development time of compilation time (ps: the test can improve compiling efficiency of about 50%), specific modification is as follows:

  • DLL configuration for standalone dev

Make a copy of the current dL.config. js file, rename it dL-dev.config.js for the development environment, and make the following changes:

// 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'. ] }}Copy the code
  • Modify the development environment configuration file webpack.dev.config.js

  • Added a package.json command to generate DLL files in dev environment separately
"scripts": {
  "dll-dev": "./node_modules/.bin/webpack --config dll-dev.config.js",}Copy the code

In the dev environment, this new command line generates DLL files and corresponding JSON mapping files, so as to save the compilation of some import package files under dev, thus reducing the overall compilation time of the project

npm run dll-dev
Copy the code

Part two: Upgrade the project to babel@7+

Upgrade package dependencies & remove redundancy

and

‘babel-preset-stage-2’ is deleted here as the stage preset is deleted in babel@7+ to avoid conceptual ambiguity and to prevent unforeseen problems due to the deletion or change of the proposal.

Other dependencies are upgraded from v@6+ to v@7+ with the latest official package name in babel@7+. Babel-plugin-import for antD on-demand loading also needs to be upgraded to 1.11.0 along with Babel, because the configuration syntax and resource directory names have been changed (see babel.config.js for details).

Modify the Babel configuration file

In babel@7+, a new configuration file, babel.config.js, was added to make the configuration file more flexible and suitable for the monorepo management that Babel uses, such as centralizing the configuration in all packages or creating configurations for each package individually, which we used here. Because you need to write some judgment logic in config to achieve a deeper separation between Dev and Pro

Ps: For details about the configuration, see 6.x vs. 7.x

The new Babel configuration file is as follows:

// 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
  }
}
Copy the code

Compile test comparison

Test comparison using the same computer and development environment

The compilation time before the upgrade is as follows:

The compiling time after the upgrade is as follows:

Before the upgrade, the saving time is as follows:

The saving time is as follows: