【webpack优化篇】如何让你的项目打包更快呢?

2,003 阅读5分钟

前言

在上一篇文章中,我们从零搭建了一个react的基础项目,其核心是webpack的配置,但是我们的webpack只是进行了基础的配置,保证了打包成功和项目的运行。如果我们想要打包更快呢?

基于上一篇文章中的webpack,这一篇文章就教你如何优化webpack的配置。

PS:上一篇文章看这里👉从零搭建一个自己的react框架

webpack的优化实践

  • purgecss-webpack-plugin

删除无用的css
我们先准备一份css文件和jsx文件(咱们就用上一篇文章中的)

  • jsx
  • css

仔细观察上面的css文件,发现最后一个(.llllas)在jsx中是没有的,根据我们的意思,它应该被删除掉,下面我们开始配置

首先,安装插件purgecss-webpack-plugin

npm install purgecss-webpack-plugin --save-dev
yarn add ...
cnpm install ...

我们要注意的是,这个插件需要配合mini-css-extract-plugin插件一起使用

第二步,使用

最后,yarn build,我们来看一下效果


我们在打包好的css文件中已经搜索不到llllas样式了。

就这样,我们学会了第一个优化webpack配置的方法。

  • image-webpack-loader

图片压缩工具

我们要在file-loader之前使用image-webpack-loader,使用方法:


因为,我们只在生产环境下进行了压缩图片的操作,所以,我们现在看开发环境下和生产环境下的打包结果:

  • 开发环境
  • 生产环境

从这里,可以很清晰的看到,svg图片被压缩了

PS:这里压缩图片的配置是直接复制的npm官网上对image-webpack-loader使用介绍。

  • CDN加载文件

昨天的文章写到这里,今天早上就看到webpack团队发布了webpack5.0的版本,咱们也要善始善终。把这一篇文章写完🐶

当我们在HTML页面用script标签引入一个cdn,而且呢在写react的时候我们也要引入,像这样(假如引入了jquery)


在这种情况下,webpack依然会将jquery重新打包

我们并不希望打包cdn引入文件,因为这会造成main.bundle.js文件体积臃肿,在一定程度上会影响页面的渲染速度

所以,我们需要进行以下配置

我们再打包一下~


这时候,jquery部分的源代码已经不见了~

我们至此完成了第三步优化操作

  • Tree-shaking

将没用的代码删除,在生产环境下会自动tree-shaking

我们来看一下下面的代码:

  • calc.js
  • hello.js
  • App.jsx

在这一段代码中,hello.js只是引用了而并没有使用,所以我们期望在打包的时候不会打包hello.js部分的代码。接下来,我们分别在开发环境下和生产环境下打包,这时候发现,无论开发环境还是生产环境,依然会打印出来hello.js函数内的内容

这时候,我们需要去配置不使用副作用,所以在package.json文件中:

但是,我们发现,当这样配置以后,在生产环境下

css样式出现了问题,这是由于这样配置以后,因为我们引入css文件时import ./App.css,它会默认认为css也是副作用,就不会导入css

所以,需要我们更改package.json的配置,像下面这样:

这时候,再次在生产环境下运行项目,发现已经不再打印hellocss的样式也变得正常了

  • DllPlugin

在写react项目过程中,经常要引入第三方库,这样,在每次重新构建的时候,会非常浪费性能,所以,为了节约构建时间,我们可以先将第三方库打包成一个动态链接库,以后构建的时候直接去查找构建好的库

我们在index.js中使用了第三方库reactreact-dom,接下来,我们先对这两个库先进行打包

1、在build文件夹下创建webpack.dll.js

2、在package.json里面配置命令

3、在项目中引用动态链接库

4、使用

// 首先打包好第三方库
npm run build:dll
// 第二步,将项目打包
npm run build

5、效果:

  • 使用DllPlugin打包前
  • 使用DllPlugin打包后

可以清楚的看到打包时间缩短,达到了优化的目的

  • 动态加载

顾名思义,动态加载就是我们需要加载的时候再去加载某些文件

  • 页面加载完成的时候
  • 点击按钮之后

我们看到,只有当我们点击按钮的时候才会加载index.js文件,它不会再页面启动的时候就去加载,这样节省了页面的加载时间

  • 打包分析工具

安装webpack-bundle-analyzer插件并使用

效果如下

  • happypack

happypack插件可将代码多线程打包,所以,我们可以将不同的逻辑交给不同的线程来处理

使用happypack前

使用happypack后

我们可以看到,打包时间明显缩短了,所以happypack是一个很好的提高打包速度的手段

总结

以上,就是本篇博客介绍的一些优化手段,其实对于每个不同的项目,配置的webpack是不一样的,所以,我们要根据这些webpack的基础知识,去配置适合自己项目的webpack。

本篇博客中所有代码片段已上传至github

react-template的github地址

上述文章如有不对之处,还请大家积极指出来,让我们一起学习,共同在前端的路上越走越远,越来越🐂

最后,分享一下我的微信公众号,欢迎大家前来关注~