现在大部分 react 项目都是基于 create-react-app 初始化的，对于普通的项目，使用默认的 webpack 配置完全够用。今天讲讲 create-react-app 的使用技巧和源码分析。
如何加速构建
代码写多了会发现 webpack 每次启动都很慢，可以通过删除配置、添加多线程处理来优化体验。
去除 eslint-loader
eslint-loader 的功能是将 eslint 检测的内容显示到命令行，如果确保写的代码没有问题，可以去除掉。去除之后 webpack-dev-server 开启速度明显提升。
去除上面的代码
使用 thread-loader 或者 happypack
thread-loader 会将后面的 loader 放置在一个 worker 池里面运行，以达到多线程构建。每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制，请在高开销的loader中使用。
{
test: /\.(js|ts)x?$/i,
use: [
'thread-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
],
exclude: /node_modules/,
},
happypack 通过多线程并发加速构建过程，不过包作者现在很少维护了，推荐用 thread-loader。配置略微复杂，而且对复杂的 js less 配置不太友好。
**exports.plugins = [
new HappyPack({
id: 'jsx',
threads: 4,
loaders: [ 'babel-loader' ]
}),
new HappyPack({
id: 'styles',
threads: 2,
loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
})
];
exports.module.rules = [
{
test: /\.js$/,
use: 'happypack/loader?id=jsx'
},
{
test: /\.less$/,
use: 'happypack/loader?id=styles'
},
]**
偷懒的话选择 thread-loader 就好了，加一行代码。
react-app-rewired 和 customize-cra
如果不想 eject 项目怎么办？
react-app-rewired 可以在不 eject 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置，然后你将拥有 create-react-app 的一切特性，且可以根据你的需要去配置 webpack 的 plugins, loaders 等，推荐配合 customize-cra 一起使用。
使用方法
yarn add react-app-rewired customize-cra -D
更改 package.json
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
在根目录下创建 config-overrides.js 文件，然后改成你想要的的配置
const {
override,
addDecoratorsLegacy,
disableEsLint,
addBundleVisualizer,
addWebpackAlias,
adjustWorkbox
} = require("customize-cra");
const path = require("path");
module.exports = override(
// enable legacy decorators babel plugin
addDecoratorsLegacy(),
// disable eslint in webpack
disableEsLint(),
// add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
// add an alias for "ag-grid-react" imports
addWebpackAlias({
["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
}),
// adjust the underlying workbox
adjustWorkbox(wb =>
Object.assign(wb, {
skipWaiting: true,
exclude: (wb.exclude || []).concat("index.html")
})
)
);
定制化使用
添加 less
create-react-app 中默认开启了 sass 预处理器编译，想使用 less 需要手工添加。另外对于 css modules ，其内置的做法是对这类文件使用 /\.module\.(scss|sass)$/ 或者 /\.module\.css$/ 检测。如果想要直接对 .css 或 .less 开启 css modules ，需要针对 src 和 node_modules 写两套 loader 处理规则，原因是 node_modules 下的文件不需要开启 css modules。
create-react-app 内置规则
安装 less 相关依赖
yarn add less less-loader -D
对 src 文件夹下面的 less、css文件进行处理，并开启 css modules，这里要注意下，这个配置不针对 node_modules 下的样式文件，node_modules 下的不需要开启 css modules，否则会出问题。
// webpack.config.js
{
test: /\.(le|c)ss$/i,
use: [
isProd
? {
loader: MiniCssExtractPlugin.loader,
}
: 'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: isProd ? '[hash:base64]' : '[path][name]__[local]--[hash:base64:5]',
},
},
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
},
},
].filter(Boolean),
include: srcPath,
},
对 node_modules 的配置
{
test: /\.(le|c)ss$/i,
use: [
isProd
? {
loader: MiniCssExtractPlugin.loader,
}
: 'style-loader',
'css-loader',
{ loader: 'less-loader', options: { javascriptEnabled: true } },
].filter(Boolean),
include: [/node_modules/],
},
源码分析总结
terser-webpack-plugin
较新版本的脚手架中使用 terser-webpack-plugin 压缩 js 代码，uglifyjs 已经不再推荐使用。
terser 这样介绍：uglify-es不再维护，并且 uglify-js 不支持 ES6+ 语法。
简单使用
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};
file-loader 置于末尾，文件会被自动编译到 static/media 目录下
在 webpack.config.js 中，file-loader 是在 oneOf 的数组中的最后一个，表示任何一个文件如果没有命中前面的任何一个 loader，则归 file-loader 接管了。exclude 表示除了这些它都会处理，默认会重命名文件，并复制到 build/static/media/ 目录下。
另外代码中也给出了提示，不要在 file-loader 后面添加 loader，因为所有的剩余文件都会被 file-loader 处理掉
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
file-loader 和 url-loader 的区别
看看 use-loader 的配置，会发现 options.name 和 file-loader 一致，其实 file-loader 是 url-loader 的退化版本，也就是当文件大小是小于 10000 byte 时，url-loader 会将文件转换成 base64 编码插入到 html 中，不作为独立的一个文件，这样可以减少页面发起的请求数，如果超过这个大小，则使用 file-loader 将文件重命名并复制到 build/static/media 目录下。
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit, // 内置的是 10000 byte
name: 'static/media/[name].[hash:8].[ext]',
},
},
momentjs 冗余多语言文件
如果有用到 ant design 或直接使用了 momentjs，默认会把多语言的包(node_modules/moment/local/*.js)全部打进来，导致包体积增加，但是我们不会用到这么多语言，所以需要排除掉。
plugins:[
...,
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]
env
create-react-app 可以通过 .env.xxx 来预置一些参数到 process.env 中。具体源码在 react-scripts/config/env.js 中。
核心代码
// 从以下文件中加载配置
const dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`, // 推荐本地使用
`${paths.dotenv}.${NODE_ENV}`, // .env.production 或者 .env.development
NODE_ENV !== 'test' && `${paths.dotenv}.local`, // 推荐本地使用
paths.dotenv, // .env
].filter(Boolean);
// 将 .env 文件的设置应用到 process.env 中
dotenvFiles.forEach(dotenvFile => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
path: dotenvFile,
})
);
}
});
以 REACT_APP_ 开头的将会通过 new webpack.DefinePlugin(env.stringified) 注入到全局的 process.env 中。
// env.js
const REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// 预置的两个
NODE_ENV: process.env.NODE_ENV || 'development',
PUBLIC_URL: publicUrl,
}
);
// Stringify all values so we can feed into Webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}
所以你可以愉快的设置一些变量
// .env
REACT_APP_IS_ENV_FILE=TRUE
// .env.development
REACT_APP_IS_DEV_ENV_FILE=TRUE
// .env.local
REACT_APP_IS_LOCAL_ENV_FILE=TRUE
浏览器中打印
babel-preset-react-app
babel-preset-react-app 是 create-react-app 下面的一个包，它是 create-react-app 默认的 babel preset，可以用来处理 js 和 ts 。这样就不需要额外的配置 ts-loader，另外它内置支持了 ts 的一些功能（装饰器等），可以很方便的使用。
在我们的 webpack 配置中引入 babel-preset-react-app 可以简化配置。
欢迎大家关注我的掘金和公众号，算法、TypeScript、React 及其生态源码定期讲解。
