likes
comments
collection

Webpack配置优化

作者站长头像
站长
· 阅读数 16

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

webpack版本4.x

1、按需引入@babel/polyfill

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

Webpack配置优化

2、减少loader的作用模块

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

Webpack配置优化

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?

Webpack配置优化

使用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导出一个对象。

Webpack配置优化

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

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

Webpack配置优化

Webpack配置优化

写在最后

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

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

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