1 减少 Webpack 打包时间
(1)优化 Loader
对于 Loader
来说,影响打包效率首当其冲必属 Babel
了。因为 Babel
会将代码转为字符串生成 AST
,然后对 AST
继续进行转变最后再生成新的代码,项目越大,转换代码越多,效率就越低。当然了,我们是有办法优化的
首先我们可以优化 Loader
的文件搜索范围
module.exports = {
module: {
rules: [
{
// js 文件才使用 babel
test: /\.js$/,
loader: 'babel-loader',
// 只在 src 文件夹下查找
include: [resolve('src')],
// 不会去查找的路径
exclude: /node_modules/
}
]
}
}
对于 Babel
来说,我们肯定是希望只作用在 JS
代码上的,然后 node_modules
中使用的代码都是编译过的,所以我们也完全没有必要再去处理一遍
当然这样做还不够,我们还可以将 Babel
编译过的文件缓存起来,下次只需要编译更改过的代码文件即可,这样可以大幅度加快打包时间
loader: 'babel-loader?cacheDirectory=true'