react实现异步插件_react+webpack4搭建前端项目（三）打包优化

前言

react+webpack4搭建前端项目分为三个章节。链接如下。目的是实现从零搭建一个react后台管理系统

webpack配置的讲解

这是第三章，webpack打包优化

主要从以下几个方面进行：

react路由的异步加载

css处理

使用mini-css-extract-plugin把css从bundle包中抽取

使用optimize-css-assets-webpack-plugin压缩css代码

使用postcss-loader，autoprefixer对浏览器兼容性的css代码加前缀

js的处理

使用uglifyjs-webpack-plugin代码压缩

拆包，js的bundle包的提取(拆包)

前言

注意antd版本"antd": "^3.8.3",，高版本的antd官方把图标库也构建到release包，所以导致打包变得很大，仅仅icon图标库就有几百KB，请看下图。如果遇到这个问题，请降低antd的使用版本到3.8.3以前

下边打包优化的基础代码请点击 源码1.0.3。有不熟悉的同学可以看一下，下载该版本1.0.3，在项目根目录执行 npm run dev；同时切换到mock目录，执行 npm run dev，打开http://localhost:8081即可看到效果

主要实现的功能如下图：

简历管理的查询，删除，修改：

用户模块的查询，修改：

用户模块的添加：

首先我们看一下没有优化前的js包大小，执行npm run build

这时候打包出的文件只有三个

index.html模板文件

reset.min.css是从静态目录copy进去的

app.1a9adec2b6012290869f.js是我们利用webpack打包生成的。这里边包括项目中的所有js代码，css代码以及图片data资源

工欲善其事必先利其器，我们先安装两个非常有用的webpack插件

npm install -D clean-webpack-plugin webpack-bundle-analyzer

复制代码clean-webpack-plugin 在打包的时候会删除之前的打包目录

webpack-bundle-analyzer 在打包结束的时候，会启动启动一个服务在浏览器查看打包的大小和包含的内容等

修改webpack.prod.config.js，在plugins属性下添加

new CleanWebpackPlugin(),

new BundleAnalyzerPlugin(),

复制代码

开始打包优化

路由的异步加载

我们知道想文件的异步加载需要使用import("xxx")，或者require.ensure这种方法适用webapck1.x 2.x。所以这里采用import("xxx")。

在vue中实现路由的异步加载很简单，通过()=>import("xxx")就可以，那么在react中我们也可以这样异步加载

我们这里实现路由的异步加载借助react-loadable插件

1、首页编写一个loadable.js实现异步加载组件

import Loadable from 'react-loadable';

const LoadableComponent = (component) => Loadable({

loader: component,

loading: ()=>null,

});

export default LoadableComponent;

复制代码

2、修改路由组件的加载方式

把container/index.js文件组件的直接导入

import BlogIndex from "@/blog"

import ResumeIndex from "@/resume"

import UserIndex from "@/user"

复制代码

改成使用react-loadable插件包装一层加载组件的方式

import LoadableComponent from "@/loadable"

const BlogListPage = LoadableComponent(()=>import("./pages/list"))

const AddBlogPage = LoadableComponent(()=>import("./pages/add"))

复制代码

接着修改user/index.js，blog/index.js，把路由组件改成异步加载，改完之后测试一下打包如下图

这时候已经把异步加载的路由组件单独打包到其它单独的文件。从922k减小到487k。

你会发现1.a64085be1c517b7e1ef2.js单独打包出来的200多k，可以看到下图包含了antd的组件，这也证明antd按需加载的使用成功

css处理

把css从bundle包中的抽取

在webpack4.x之前我们使用extract-text-webpack-plugin压缩抽取css。

在webpack4.x我们需要使用mini-css-extract-plugin插件进行抽取css，mini-css-extract-plugin详细使用文档

修改webpack.base.config.js对css，less文件的处理，如下

{

test: /\.css$/,

use:[

{

loader:MiniCssExtractPlugin.loader,

options:{

hmr: utils.isDev(), // 开发的时候，修改css热更新，但是试了下不起作用

reloadAll:true,

}

},

// {

// loader: 'style-loader', // 创建 // MiniCssExtractPlugin 有冲突，所以删掉

// },

{

loader: 'css-loader', // 转换css

options: { importLoaders: 1 }

}

]

},

{

test: /\.less$/,

use: [

{

loader:MiniCssExtractPlugin.loader,

options:{

hmr: utils.isDev(), // 开发的时候，修改less热更新但是试了下不起作用

reloadAll:true,

}

},

// {

// loader: 'style-loader',

// },

{

loader: 'css-loader',

},

{

loader: 'less-loader', // 编译 Less -> CSS

}

],

},

复制代码

因为style-loader和MiniCssExtractPlugin.loader有冲突，在配置的时删除了style-loader对样式的处理，测试打包结果如下

此时已经成功把css样式从bundle抽离出。bundle包从487k减小到381k。

压缩css代码

我们打开任意一个打包后的css文件，发现css代码没有压缩。所以我们需要对css压缩。安装optimize-css-assets-webpack-plugin，optimize-css-assets-webpack-plugin详细使用文档

npm install -D optimize-css-assets-webpack-plugin

复制代码

在webpack.prod.config.js添加optimization`属性(webpack4.x的代码压缩和拆包都在这里处理，这是和webpack3.x的不同)

optimization: {

// 压缩css

minimizer: [

new OptimizeCSSAssetsPlugin({

cssProcessorOptions: {

discardComments: { removeAll: true } // 移除注释

}

})

]

}

复制代码

测试打包：

对比一下两次打包的css文件大小，已经有一定的减小或者打开打包后的css文件代码也压缩了，这就代表压缩成功。

但是我们发现js的bundle包变大了，这是为什么呢？ 因为我们重写了optimization属性的minimizer，会把webpack自带的压缩方式给覆盖掉，这里需要我们自己定义js的压缩方式。

js代码压缩

这里和webpack3.x一样使用uglifyjs-webpack-plugin插件，uglifyjs-webpack-plugin详细使用文档，安装

npm install -D uglifyjs-webpack-plugin

复制代码

然后在minimizer属性下添加下边代码

// 自定义js优化配置，将会覆盖默认配置

new UglifyJsPlugin({

parallel: true, //使用多进程并行运行来提高构建速度

sourceMap: false,

uglifyOptions: {

warnings: false,

compress: {

unused: true,

drop_debugger: true,

drop_console: true,

},

output: {

comments: false // 去掉注释

}

}

})

复制代码

重新测试打包比较和之前的js文件的大小一样！到此我们对css的处理告一段落！

js处理

代码压缩上边已经讲过啦，这里不在赘述

拆包

在webpack3.x的时候我们都是用webpack内置的CommonsChunkPlugin来拆包。webpack4.x发生了很大变化。

webpack4.x要想进行拆包，需要先对splitChunks有一定的了解。splitChunks就算你什么配置都不做它也是生效的，源于webpack有一个默认配置，这也符合webpack4的开箱即用的特性。

splitChunks的默认配置如下

splitChunks: {

// async表示只从异步加载得模块(动态加载import())里面进行拆分

// initial表示只从入口模块进行拆分

// all表示以上两者都包括

chunks: "async",

minSize: 30000, // 大于30k会被webpack进行拆包

minChunks: 1, // 被引用次数大于等于这个次数进行拆分

// import()文件本身算一个

// 只计算js，不算css

// 如果同时有两个模块满足cacheGroup的规则要进行拆分，但是maxInitialRequests的值只能允许再拆分一个模块，那尺寸更大的模块会被拆分出来

maxAsyncRequests: 5, // 最大的按需加载(异步)请求次数

// 最大的初始化加载请求次数,为了对请求数做限制，不至于拆分出来过多模块

// 入口文件算一个

// 如果这个模块有异步加载的不算

// 只算js，不算css

// 通过runtimeChunk拆分出来的runtime不算在内

// 如果同时又两个模块满足cacheGroup的规则要进行拆分，但是maxInitialRequests的值只能允许再拆分一个模块，那尺寸更大的模块会被拆分出来

maxInitialRequests: 3,

automaticNameDelimiter: '~', // 打包分隔符

name:true,

cacheGroups: {

// 默认的配置

vendors: {

test: /[\\/]node_modules[\\/]/,

priority: -10

},

// 默认的配置，vendors规则不命中的话，就会命中这里

default: {

minChunks: 2, // 引用超过两次的模块 -> default

priority: -20,

reuseExistingChunk: true

},

},

}

复制代码

打包测试，和不添加splitChunks打包结果一致

因为默认是async，只从异步加载的模块拆分。可以看到只有app.js是入口文件(同步加载)没有对app.js进行拆分。这个项目使用react-loadable异步加载，本项目中有7个组件采用这种方式加载。但是从打包结果可以看异步加载的组件拆分出来10个chunk。那么是为什么呢？

使用webpack-bundle-analyzer分析可以看出有三个chunk是异步组件引用antd中的组件进行拆分出来的chunk。

假如我们把chunks:async改成chunks: "initial"进行打包测试：

打包结果如下图

打包结果完全不同，因为app.js是同步加载，app.js被拆分，此时发现app.js非常小。相反拆分出来的vendors~app.4fd9181b8f618e9fcac6.js比较大，这是因为这个chunk包含项目入口文件包含的所有第三方库。而异步加载的7个组件最终打包出来的还是7个chunk，这些异步加载的组件打包出来的每个chunk包含除了vendors~app.4fd9181b8f618e9fcac6.js打包进去的第三方库以外的代码和组件本身代码。

那么同学们会想了，把chunks:initial改成chunks: "all"会是什么结果呢？那么我们进行测试一下

打包结果如下图

我们知道all不仅从同步组件拆分，还从异步加载中拆分。

从打包结果看，是对initial和async的合并。即把异步组件拆分，也把同步组件拆分。

那么结论来了，因为本项目包含异步加载，需要对异步组件和同步组件同时拆分，所以此项目采用chunks: "all"进行bundle的拆分。如果项目中同步加载的组件chunk不大，可以不对同步加载组件进行拆分，使用chunks:async。当然如果项目中异步加载的组件chunk不大，也可以不对异步加载组件进行拆分，使用chunks:initial。当然也可以混用，对于缓存组单独设置

既使采用chunks: "all"的方式我们发现。拆分出来venders~app.js的chunk(node_modules的第三方库)也比较大。随着第三方插件使用的增多这个chunk会变的越来越大。所以我们这里对他进行拆分。也就是把node_modules中使用的插件也拆分成不同的chunk

我们拆包的策略是按照体积大小、共用率、更新频率重新划分我们的包，使其尽可能的利用浏览器缓存。

分析项目的插件，可以按几下分类插件

UI组件库(antd)

基础插件(react，react-dom，react-router-dom，mobx，axios等等)

这些都是更新频率非常低，公用率高，提及大，所以单独抽取。只要这些包不更新，拆包的chunk文件名就不会变。就一直缓存在浏览器

接下来我们根据这个分类拆包，增加cacheGroups茶包的规则

antdui: {

priority: 2,

test: /[\\/]node_modules[\\/](antd)[\\/]/, //(module) => (/antd/.test(module.context)),

},

// 拆分基础插件

basic: {

priority: 3,

test: /[\\/]node_modules[\\/](moment|react|react-dom|react-router|react-router-dom|mobx|mobx-react|axios)[\\/]/,

}

复制代码

打包测试：

这里已经成功拆分出来antdui~app.js，basic~app.js。使用webpack-bundle-analyzer分析可以精确的看到antd，moment|react|react-dom|react-router|react-router-dom|mobx|mobx-react|axios插件被拆分。

不知道同学们有没有发现问题？

1、打包的hash都是一样的，而且每次打包的hash还都不一样。

解决方法,

output添加

chunkFilename: utils.assetsPath("js/[name].[chunkhash].js")

复制代码

new MiniCssExtractPlugin(options)初始化参数

chunkFilename: utils.assetsPath('css/[id].[chunkhash].css'),

复制代码

2、venders~app.js不见了

antdui~app.js，basic~app.js只是拆分了antdui|moment|react|react-dom|react-router|react-router-dom|mobx|mobx-react|axios这些插件。还有其它的node_modules的插件会被拆分到venders~app.js。这里需要知道maxInitialRequests这个属性的作用了。

maxInitialRequests：最大的初始化加载请求次数,为了对请求数做限制，不至于拆分出来过多模块

入口文件算一个

如果这个模块有异步加载的不算

只算js，不算css

通过runtimeChunk拆分出来的runtime不算在内

如果同时又两个模块满足cacheGroup的规则要进行拆分，但是maxInitialRequests的值只能允许再拆分一个模块，那尺寸更大的模块会被拆分出来

由此发现，加载app.js的时候有三个文件会同步加载app.js，antdui~app.js，basic~app.js。

需要把maxInitialRequests的值修改成更大，修改成5

maxInitialRequests: 5,

复制代码

打包测试如下图：

查看结果venders~app.js从app.js中拆分出来啦。

react+webpack4+react-router5+react-loadable+mobx系列文章