小记背景
随着业务代码的增多，项目代码的编译时长也在增多，遂针对这个痛点在 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
}
}
编译测试对比
使用同一台电脑及开发环境进行测试比较
升级前执行编译耗时如下：
升级后执行编译耗时如下：
升级前进行修改保存耗时如下：
升级后进行修改保存耗时如下：