webpack 性能优化一

                         Webpack 性能优化（一）

一、优化开发体验，提高开发效率

1.优化构建速度。如果项目很庞大的时候，构建的耗时会变得很长，每次等待构建的耗时加起来是个很大的数目
2.优化使用体验。通过自动化完成一些重复的工作，让我们更急专注解决问题本身

二、优化输出质量。给用户呈现更好的网页

1.减少首屏加载的时间（白屏和首屏的计算）
2.提升流畅度，也就是代码的性能

缩小文件的搜索范围

（1）根据导入的语句寻找导入的文件
（2）根据导入的文件使用loader去处理文件

优化loader配置(test, include, exclude)
eg: module: {
rules:{
test: /.js$/,
use: [‘babel-loader?cacheDirectory’],
include: path.resolve(__dirname, ‘src’)
}
}
注意： babel-loader 支持缓存转换出的结果，通过cacheDirectory开启
我们可以适当调整项目的目录结构，以便在配置loader时通过include缩小命中的范围

优化resolve.modules配置（直接在绝对路径查找，减少查询）

resolve: {
module: [path.resolve(__dirname, ‘node_module’)]
}

优化resolve.mainFields配置（第三方模块查询入口–main）

resolve: {
module: [path.resolve(__dirname, ‘node_module’)],
mainField: [‘main’]
},

优化resolve.alias配置(直接使用单独的js文件，因为一般发布的npm包都有两套代码，例如react.js,有套commomJS规范的模块化代码，一套把它所有代码打包打包到一个文件的，默认使用模块化的，会一直递归查找我们需要的文件)

resolve: {
module: [path.resolve(__dirname, ‘node_module’)],
mainField: [‘main’],
alias: {
‘react’: path.resolve(__dirname, ‘./node_modules/react/dist/react.min.js’)
}
},
注意： 但是这样会影响Tree-Shaking去除无效代码的优化，之后再讲

优化resolve.extensions配置(查询后缀是否存在)

resolve: {
module: [path.resolve(__dirname, ‘node_module’)],
mainField: [‘main’],
alias: {
‘react’: path.resolve(__dirname, ‘./node_modules/react/dist/react.min.js’)
},
extensions: [‘js’]
}
注意： 1. 尝试列表尽可能小，不要将不存在的写在列表里
2.频率出现最高的文件后缀要优先放在最前面
3.在项目中写导入语句尽可能带上后缀名，避免寻找过程

优化modeule.noParse配置（对于一些没有模块化的文件忽略解析处理，但是要注意忽略的模块中无import,require,define等模块化的语句）

resolve: {
module: [path.resolve(__dirname, ‘node_module’)],
mainField: [‘main’],
alias: {
‘react’: path.resolve(__dirname, ‘./node_modules/react/dist/react.min.js’)
},
extensions: [‘js’],
noParse: [/react.min.js$/]
}