webpack打包后引用cdn的js_工程化之webpack极致优化至2.8 s

前言

在上一篇文章中，我们从零搭建了一个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加载文件

当我们在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，接下来，我们先对这两个库先进行打包

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地址[https://github.com/create-react-cli/react-template]

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

工程化相关实践

?搭建前端监控平台之数据上报 ?手把手带你入门前端工程化 ❤️ 交流讨论 欢迎关注公众号 「秋风的笔记」，主要记录日常中觉得有意思的工具以及分享开发实践，保持深度和专注度。回复"好友"可加微信，秋风的笔记常年陪伴你的左右。