工程优化暨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 } }

编译测试对比

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

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

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

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

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

thead > tr > th {
text-align: left;
border-bottom: 1px solid;
}

table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
padding: 5px 10px;
}

table > tbody > tr + tr > td {
border-top: 1px solid;
}

blockquote {
margin: 0 7px 0 5px;
padding: 0 16px 0 10px;
border-left: 5px solid;
}

code {
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
font-size: 14px;
line-height: 19px;
}

body.wordWrap pre {
white-space: pre-wrap;
}

.mac code {
font-size: 12px;
line-height: 18px;
}

pre:not(.hljs),
pre.hljs code > div {
padding: 16px;
border-radius: 3px;
overflow: auto;
}

/** Theming */

.vscode-light,
.vscode-light pre code {
color: rgb(30, 30, 30);
}

.vscode-dark,
.vscode-dark pre code {
color: #DDD;
}

.vscode-high-contrast,
.vscode-high-contrast pre code {
color: white;
}

.vscode-light code {
color: #A31515;
}

.vscode-dark code {
color: #D7BA7D;
}

.vscode-light pre:not(.hljs),
.vscode-light code > div {
background-color: rgba(220, 220, 220, 0.4);
}

.vscode-dark pre:not(.hljs),
.vscode-dark code > div {
background-color: rgba(10, 10, 10, 0.4);
}

.vscode-high-contrast pre:not(.hljs),
.vscode-high-contrast code > div {
background-color: rgb(0, 0, 0);
}

.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}

.vscode-light table > thead > tr > th {
border-color: rgba(0, 0, 0, 0.69);
}

.vscode-dark table > thead > tr > th {
border-color: rgba(255, 255, 255, 0.69);
}

.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
border-color: rgba(0, 0, 0, 0.18);
}

.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
border-color: rgba(255, 255, 255, 0.18);
}

.vscode-light blockquote,
.vscode-dark blockquote {
background: rgba(127, 127, 127, 0.1);
border-color: rgba(0, 122, 204, 0.5);
}

.vscode-high-contrast blockquote {
background: transparent;
border-color: #fff;
}
-->

code {
color: #C9AE75; /* Change the old color so it seems less like an error */
font-size: inherit;
}

/* Page Break : use

to insert page break
-------------------------------------------------------- */
.page {
page-break-after: always;
}
-->