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$/] }