新搭了一套前端开发代码框架，使用Typescript。
webpack相关配置如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| {
test: /\.(j|t)sx?$/,
loader: 'ts-loader',
include: SRC_PATH,
options: {
transpileOnly: true, //只转译，不检查
getCustomTransformers: () => ({
//获取或者说定义自定义的转换器
before: [
tsImportPluginFactory({
libraryName: 'antd', //对哪个模块进行按需加载
libraryDirectory: 'es', //按需加载的模块，如果实现按需加载，必须是ES Modules
style: 'css' //自动引入它对应的CSS
})
]
}),
compilerOptions: {
module: 'es2015'
}
}
}
|
使用ts-loader来进行ts的相关编译工作。
然后打包的时候我疯了。。
现在代码量并不大，只是引了一个我们自己的组件库 47638ms有些太夸张。必须进行优化！
1.使用babel-loader替代ts-loader
babel7中有包来解析ts,安装
1
| "@babel/preset-typescript": "^7.9.0",
|
使用的.babelrc如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| {
"presets": [
[
"@babel/preset-env",
{
"corejs": 3,
"useBuiltIns": "usage"
}
],
"@babel/preset-typescript", //解析ts
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-runtime",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
"@babel/plugin-syntax-dynamic-import",
]
}
|
webpack配置 修改为
1
2
3
4
5
| {
test: /\.(j|t)sx?$/,
include: SRC_PATH,
loader: 'babel-loader'
},
|
打包时间降为15015ms，打包速度加快了70%.
2.使用happypack
Webpack是允许在NodeJS中的，它是单线程模型的，因此webpack在构建文件时，比如js，css，图片及字体时，它需要一个一个去解析和编译，不能同时处理多个任务。特别当文件数量变多后，webpack构建慢的问题会显得更为严重。因此HappyPack出现了，它能让webpack同时处理多个任务，它将任务分解给多个子进程去并发执行，子进程处理完成后再将结果发送给主进程中。
HappyPack的基本原理：在webpack构建过程中，我们需要使用Loader对js，css，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大的，且这些转换操作不能并发处理文件，而是需要一个个文件进行处理，HappyPack的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间。
安装
webpack相关配置
引入
1
2
3
| const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
|
1
2
3
4
5
6
| rules:
{
test: /\.(j|t)sx?$/,
include: SRC_PATH,
use: ['happypack/loader?id=babel'] //id为plugin中配置的 HappyPack的id
},
|
1
2
3
4
5
6
7
8
| plugin:
new HappyPack({
id: 'babel',
loaders: [{
loader: 'babel-loader?cacheDirectory'
}],
threadPool: happyThreadPool
}),
|
打包时间减少了1s左右，优化的不是那么明显，因为项目中现在文件数量还较少。
参考Bumblebee-react
持续更新，未完待续。。。
