webpack优化篇：如何让你的项目打包更快呢？

前言

在上一篇文章中，咱们从零搭建了一个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的配置，像下面这样：

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

• DllPlugin

在写react项目过程当中，常常要引入第三方库，这样，在每次从新构建的时候，会很是浪费性能，因此，为了节约构建时间，咱们能够先将第三方库打包成一个动态连接库，之后构建的时候直接去查找构建好的库

咱们在index.js中使用了第三方库react、react-dom，接下来，咱们先对这两个库先进行打包

一、在build文件夹下建立webpack.dll.js

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

三、在项目中引用动态连接库

四、使用

// 首先打包好第三方库
npm run build:dll
// 第二步，将项目打包
npm run build
复制代码

五、效果：

• 使用DllPlugin打包前

• 使用DllPlugin打包后

  

能够清楚的看到打包时间缩短，达到了优化的目的

• 动态加载

顾名思义，动态加载就是咱们须要加载的时候再去加载某些文件

• 页面加载完成的时候

• 点击按钮以后

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

• 打包分析工具

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

效果以下

• happypack

happypack插件可将代码多线程打包，因此，咱们能够将不一样的逻辑交给不一样的线程来处理

使用happypack前

使用happypack后

咱们能够看到，打包时间明显缩短了，因此happypack是一个很好的提升打包速度的手段

总结

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

本篇博客中全部代码片断已上传至github

react-template的github地址

上述文章若有不对之处，还请你们积极指出来，让咱们一块儿学习，共同在前端的路上越走越远，愈来愈🐂

最后，分享一下个人微信公众号，欢迎你们前来关注~