当项目不仅仅包含.js或.json文件,还包含其他类型文件(如.ts、.vue、.css)作为模块时,配置resolve.extensions可以不必要的文件搜索提高性能。
src/index.ts
import { someFuction } from './module'
someFuction()
src/module.ts
import {otherSomeFuction} from './othermodule'
export const someFuction = otherSomeFuction
src/othermodule.ts
export const otherSomeFuction = () => {
console.log('otherSomeFuction...')
}
优化前
webpack.config.js
const config = {
entry: './src/index.ts',
output: {
filename: 'main.js'
},
mode: 'development',
resolve: {
extensions: [ '.js', '.json', '.jsx', '.tsx', '.ts'],
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
}
}
module.exports = config;
优化后
webpack.config.js
const config = {
entry: './src/index.ts',
output: {
filename: 'main.js'
},
mode: 'development',
resolve: {
extensions: [ '.ts', '.tsx', '.js', '.jsx', '.json'],
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
}
}
module.exports = config;
可以看到优化resolve.extensions的顺序,简单的三个小模块的打包就带来了1508-1467=41ms的性能提升