Webpack配置优化

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

webpack版本4.x

1、按需引入@babel/polyfill

• Polyfill是一块代码，用来为旧浏览器提供它没有原生支持的较新的功能。
• 当我们在入口文件中引入@babel/polyfill时，我们会将@babel/polyfill的所有功能全部打包，无论这些功能我们是否需要，这自然会造成增加打包时间和包的体积。最好的方案是仅加载我们需要用到的功能。
• 如何配置：在.babelrc文件中添加如下配置，安装core-js@2依赖

2、减少loader的作用模块

• webpack打包过程中，会使用loader来处理所依赖的模块，但是在我们使用第三方库的时候，那些模块往往是已经处理好的，所以我们无需对有些第三方库进行loader处理。
• 比如我们使用babel-loader来处理js文件时，可以仅对我们自己编写的业务模块进行loader的处理，从而大大减少打包时间。
• 配置方法也非常简单：

3、合理的配置source-map

• Source-map是一种映射关系。当项目运行后，如果出现错误，错误信息只能定位到打包后的文件中错误的位置。如果想查看在源文件中错误的位置，则需要使用映射关系，找到对应的位置。

• 开发环境下devtool配置为cheap-module-eval-source-map
• 生产环境下无需使用source-map，devtool配置为none

4、使用HappyPack插件

• 由于运行在node.js之上的webpack是单线程模型的，所以webpack需要处理的事情需要一件一件的做，不能多件事一起做。
• 我们需要webpack能同一时间处理多个任务，发挥多核cpu电脑的威力，HappyPack能让webpack做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。
• 如何使用HappyPack？

使用HappyPack插件需要注意两点

• 第一点：由于HappyPack对file-loader、url-loader支持的不太友好，所以不建议对该loader使用。
• 第二点：从测试结果可以看出，在开发环境下HappyPack对打包时间的优化并不明显，主要是因为测试的项目是一个非常简单的demo，用到的第三方模块并不多，所以在一些小型项目中，可以不需要HappyPack插件，在中大型项目中，HappyPack对打包时间的优化是非常可观的

5、对代码进行分割

• 默认情况下，webpack内置代码分割功能，但是默认仅仅为异步代码进行分割，所以我们需要修改默认配置，使webpack可以对同步代码和异步代码都进行分割。
• 如何配置？
• 为什么要进行代码分割？浏览器支持并行加载文件，将代码进行分割有利于提升文件的加载速度。
• 第三方模块一般不会发生变化，打包时第三方模块的文件名一般也不会变化，用户在访问页面时，就可以利用浏览器缓存减少文件的请求，从而提升页面的加载速度。

6、配置TreeShaking

• 配置TreeShaking的目的是为了在打包时删除未使用的代码，从而减少包的体积，达到优化的目的。
• 如何配置TreeShaking？
• 首先，TreeShaking只能删除es6模块的代码，所以在.babelrc文件配置中添加modules:false这行代码，确保compiler没有将ES6模块语法转换为CommonJS模块。
• 当一个模块有多个导出时，使用多个export进行导出，而不是使用export default导出一个对象。

7、使用DllPlugin插件，将react,react-dom,antd,lodash等模块单独打包

• 在项目开发过程中，有些模块一旦使用，就不会再发生变更，每次打包如果都将这些模块重新打包，就会造成时间消耗，理想情况下，将这些模块提前打包好，在对项目打包时，不再打包这些模块，从而提升打包速度，DllPlugin就是用来做这件事的。
• 如何配置？

写在最后

当然，webpack还有许多其他的优化手段：比如：

• 升级node和webpack的版本
• 减少使用不必要的插件和loader
• 使用异步的方式来加载组件
• 使用魔法注释的方式为异步组件添加preload属性来支持预加载
• 抽离组件样式到单独的文件里减少包的体积

Webpack配置优化是一个持续的过程，需要我们不断学习新的优化技巧，持续的降低打包时间和打包体积