当前位置：首页 > React > 正文

Webpack 4 下 React 脚手架打包性能优化实战

作者：性能诊所

时间：2026-10-23

浏览：368

本文基于 Webpack v4 特性，对 React 脚手架进行打包性能优化。主要涵盖样式文件分离、第三方资源（React/antd）通过 externals 或 DLL 方式剥离、开发环境区分及热更新配置。针对 Webpack 4 升级中遇到的插件兼容报错，提供了版本锁定解决方案，并展示了公共代码提取与优化后的配置细节。

文章目录

Webpack 4 React 项目优化背景

在前文介绍 Webpack v4 特性的基础上，本文将这些知识应用于实践，针对此前构建的一个 React 项目脚手架进行打包性能的优化处理。

优化方向概览

本次优化的主要方向包括以下几个方面：

  1. 样式文件分离处理
  2. 第三方依赖资源分离
  3. 区分开发与生产环境配置
  4. 启用模块热更新机制
  5. 提取并复用公共代码

样式分离与插件兼容处理

具体实施步骤如下：


npm install extract-text-webpack-plugin -D

配置文件为 webpack.config.js

首先，将 CSS、Less 以及 Sass 文件从主打包 bundle 中单独分离出来，以减少主包体积。


+ let cssExtract = new ExtractTextWebpackPlugin({
+ filename: 'css.css',
+ allChunks: true
+ });
+ let sassExtract = new ExtractTextWebpackPlugin('sass.css')
+ let lessExtract = new ExtractTextWebpackPlugin('less.css')

在 webpack.config.js 中单独添加对应的处理规则，具体配置如下：

  1. test 属性用于匹配需要处理的文件扩展名正则表达式
  2. include 和 exclude 用于手动指定必须处理的文件夹路径，或屏蔽不需要处理的目录

{
 test: /\.css$/,
 use: cssExtract.extract({
 fallback: "style-loader",
 use: ['css-loader?minimize','postcss-loader'],
 publicPath: "/dist"
 }),
 include:path.join(__dirname,'./src'),
 exclude:/node_modules/
},
{
 test: /\.scss$/,
 use: sassExtract.extract({
 fallback: "style-loader",
 use: ["css-loader?minimize","sass-loader"],
 publicPath: "/dist"
 }),
 include:path.join(__dirname,'./src'),
 exclude:/node_modules/
},
{
 test: /\.less$/,
 loader: lessExtract.extract({
 use: ["css-loader?minimize", "less-loader"]
 }),
 include:path.join(__dirname,'./src'),
 exclude:/node_modules/
},

配置完成后运行 webpack 命令时，控制台报错提示：

compilation.mainTemplate.applyPluginsWaterfall is not a function

Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

经排查发现，这是由于 Webpack 已升级至 v4 版本，但相关的插件（如 extract-text-webpack-plugin）未同步升级所致。

解决方法是安装指定兼容版本的依赖包：


"html-webpack-plugin": "^3.0.4"
"extract-text-webpack-plugin": "^4.0.0-beta.0"

此外，配置 resolve 字段

指定 extensions 后，在 require 或 import 模块时即可省略文件扩展名，Webpack 会依次尝试添加配置的扩展名进行匹配


resolve: {
 //引入模块的时候，可以不用扩展名
 extensions: [".js", ".less", ".json"],
 alias: {//别名
 "bootstrap": "bootstrap/dist/css/bootstrap.css"
 }
}

关于文件监听配置

在纯 webpack 模式下使用 watch 选项，若使用 webpack-dev-server 则无需此配置，可将 watch 设为 false


watchOptions: {
 ignored: /node_modules/,
 aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作，防止文件更新太快导致编译频率太高
 poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化，默认每秒询问1000次
}

第三方资源与公共代码分离策略

接下来处理公共代码的提取与分离


optimization: {
 splitChunks: {
 cacheGroups: {
 commons: {
  chunks: "initial",
  minChunks: 2,
  maxInitialRequests: 5, // The default limit is too small to showcase the effect
  minSize: 0 // This is example is too small to create commons chunks
 },
 vendor: {
  test: /node_modules/,
  chunks: "initial",
  name: "vendor",
  priority: 10,
  enforce: true
 }
 }
 }
 }

目标是将 React、react-dom 以及 antd 等公共代码进行分离，避免重复打包

方法一：使用 externals 配置

在 HTML 页面中直接引入第三方资源库，并在配置中使用 externals 防止将某些 import 的包打包到最终的 bundle 中。这些扩展依赖将在运行时从外部获取。


<script src="https://cdn.bootcss.com/react/16.4.0-alpha.0911da3/cjs/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/cjs/react-dom-server.browser.production.min.js"></script>
externals: { 'react': 'React', 'react-dom': 'ReactDOM', // 提出ant design的公共资源, }

方法二：使用 DLL 插件

DLL 机制在前文已有提及，但在实际打包后一直出现资源加载问题

Webpack 4 React 项目优化背景

后来发现原因是 HTML 页面中并未引入生成的 DLL 资源文件（此前误以为 Webpack 会自动在页面中注入）

需要在 index.html 文件中手动引入生成的 DLL 脚本：


<script src="./vendor/react.dll.js"></script>

至此，资源分离配置成功。以下是相关代码片段：

基础配置文件 webpack.base.js


var path = require('path');
var webpack = require('webpack');
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')

let cssExtract = new ExtractTextWebpackPlugin({
 filename: 'css.css',
 allChunks: true
});
let sassExtract = new ExtractTextWebpackPlugin('sass.css')
let lessExtract = new ExtractTextWebpackPlugin('less.css')

module.exports = {
 entry:'./src/index.js',
 output: {
 path: path.resolve(__dirname, './dist'),
 filename: 'bundle.[hash:8].js',
 publicPath: ''
 },
 resolve: {
 //引入模块的时候，可以不用扩展名
 extensions: [".js", ".less", ".json"],
 alias: {//别名
 "bootstrap": "bootstrap/dist/css/bootstrap.css"
 },
 modules: [path.resolve(__dirname, 'node_modules')]
 },
/* externals: {
 'react': 'React',
 'react-dom': 'ReactDOM',
 // 提出ant design的公共资源
 //'antd': 'antd',
 },*/
 devtool: 'source-map',
 devServer: {
 contentBase:path.resolve(__dirname,'dist'),
 publicPath: '/',
 port: 8080,
 hot:true,
 compress:true,
 historyApiFallback: true,
 inline: true
 },
 watch: false, //只有在开启监听模式时，watchOptions才有意义
 watchOptions: {
 ignored: /node_modules/,
 aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作，防止文件更新太快导致编译频率太高
 poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化，默认每秒询问1000次
 },
 optimization: {
 splitChunks: {
 cacheGroups: {
 commons: {
  chunks: "initial",
  minChunks: 2,
  maxInitialRequests: 5, // The default limit is too small to showcase the effect
  minSize: 0 // This is example is too small to create commons chunks
 },
 vendor: {
  test: /node_modules/,
  chunks: "initial",
  name: "vendor",
  priority: 10,
  enforce: true
 }
 }
 }
 },
 module: {
 rules:[
 {
 test: /\.js$/,
 use: {
  loader:'babel-loader',
  options: {
  presets: ['env','es2015', 'react'],
  }
 },
 include:path.join(__dirname,'./src'),
 exclude:/node_modules/
 },
 {
 test: /\.css$/,
 use: cssExtract.extract({
  fallback: "style-loader",
  use: ['css-loader?minimize','postcss-loader'],
  publicPath: "/dist"
 }),
 include:path.join(__dirname,'./src'),
 exclude:/node_modules/
 },
 {
 test: /\.scss$/,
 use: sassExtract.extract({
  fallback: "style-loader",
  use: ["css-loader?minimize","sass-loader"],
  publicPath: "/dist"
 }),
 include:path.join(__dirname,'./src'),
 exclude:/node_modules/
 },
 {
 test: /\.less$/,
 loader: lessExtract.extract({
  use: ["css-loader?minimize", "less-loader"]
 }),
 include:path.join(__dirname,'./src'),
 exclude:/node_modules/
 },
 {
 test: /\.(html|htm)/,
 use: 'html-withimg-loader'
 },
 {
 test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/,
 use: {
  loader:'url-loader',
  options:{
  limit: 5 * 1024,
  //指定拷贝文件的输出目录
  outputPath: 'images/'
  }
 }
 }
 ]
 },
 plugins: [
 //定义环境变量
 new webpack.DefinePlugin({
 __development__: JSON.stringify(process.env.NODE_ENV)
 }),
 new CleanWebpackPlugin(['dist']),
 cssExtract,
 lessExtract,
 sassExtract,
 new HtmlWebpackPlugin({
 title: 'React Biolerplate by YuanYuan',
 template: './src/index.html',
 filename: `index.html`,
 hash: true
 }),
 new webpack.DllReferencePlugin({
 manifest: path.join(__dirname, 'vendor', 'react.manifest.json')
 }),
 new CopyWebpackPlugin([{
 from: path.join(__dirname,'vendor'),//静态资源目录源地址
 to:'./vendor' //目标地址，相对于output的path目录
 }]),
/* new webpack.optimize.CommonsChunkPlugin({
 name: 'common' // 指定公共 bundle 的名称。
 + })*/
 new webpack.HotModuleReplacementPlugin(), // 热替换插件
 new webpack.NamedModulesPlugin() // 执行热替换时打印模块名字
 ]
};

主配置文件 webpack.config.js


const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');//用来合并配置文件
const base = require('./webpack.base');
let other = '';

//console.log(process.env.NODE_ENV )
if (process.env.NODE_ENV == 'development') {
 other = require('./webpack.dev.config');
} else {
 other = require('./webpack.prod.config');
}
//console.log(merge(base, other));

module.exports = merge(base, other);
webpack.prod.config.js

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
 output: {
 filename: 'bundle.min.js',
 },
 plugins: [
 new UglifyJSPlugin({sourceMap: true})
 ]
}

原始脚手架项目地址

Webpack 4 React 项目优化背景

优化后的脚手架项目地址

Webpack 4 React 项目优化背景

经过上述优化，打包速度得到提升，打包文件结构更加细化，改造顺利完成。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

怎么优化 React 应用性能？避免不必要的重渲染

怎么利用 Nuxt.js useHead 优化 SEO 与元数据管理

JS混淆常见手段解析：字符串加密与控制流平坦化还原思路

JavaScript能在浏览器中直接获取MAC地址吗

JavaScript策略模式：用对象映射替代if-else分支

相关文章
Node.js 结合 Express-fileupload 与 React 实现文件上传教程
使用Yarn构建Webpack与React项目种子
在 React 或 Vue 项目中封装使用 JS 节流防抖
原生JS操作DOM与Vue/React虚拟DOM的本质区别
怎么在 Vue 或 React 项目中正确集成 animate.js
Vue或React项目中为何不建议直接使用JS刷新页面
React与Vue框架选型对比：基于JavaScript前端开发视角
SPA 应用中怎么正确销毁 hls.js 实例以防止内存泄漏
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法