什么是 react-intl-optimizer？
react-intl-optimizer 是一个优化 react-intl 国际化包的工具，它可以通过识别项目中只使用了部分语言文字而只输出相关语言的代码，从而减小了打包后的代码体积。
使用前的准备工作
在项目中安装 react-intl 和 react-intl-optimizer 两个 npm 包：
npm install react-intl react-intl-optimizer
如何使用 react-intl-optimizer？
- 初始化一个 intlConfig 文件，并配置相关语言支持。
-- -------------------- ---- ------- ------ - ------------- - ---- ------------- ------ -- ---- ---------------------------- ------ -- ---- ---------------------------- ------ -- ---- ---------------------------- --------------------- ------ -------- ----- ---------- - - --- ----------------------------- --- ----------------------------- --- ----------------------------- -- ------ ------- -----------
- 在项目入口文件中设置 intl 工具以及 react-intl-optimizer 基础代码，获取当前用户的语言选择：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------------- -------------- ---- -------------
------ ------ ---- ---------------
------ ----------- ---- -----------------------
-- ----------------------
---------------------------------------
-- -----------
----- ------ - ------------------------------ -- ------------------------- -- -----
-- ---------
----- ---- - -------------------- --- -- - ---- - -------------------- --- -- - ---- - -----
--- ---------
--- -
-------- - -------------
-- ---------- -- ---------------------------- --- -- ----- ---------
- ----- ----- -
------------------ ----------- ------- -------------------------
-------- - -----------
-
----- ------ - ------------------------
-- --------------
-------------------------- -------------------------- ------ ------
-------------------------------------
----------------
------------- ------------- --------------------
---- --
----------------
-------------------------------
--- 在项目打包时，使用 react-intl-optimizer 进行优化：
-- -------------------- ---- -------
----- ----------- - --------------------------------
----- ------- - -------------------
----- ------------- - ---------------------------
----- ------ - ------------------------
----- --------- - --- -----------
------ ------------------------------
------- -----------------------------------
----- -------
------------ -----
---
-------------- - -
------ ------------------- ------------------
------- -
----- ----------------------- ---------
--------- ------------
----------- ----
--
------- -
------ -
- ----- -------- -------- --------------- ---- ---------------- --
- ----- --------- -------- --------------- ---- ---------------- --
--
--
-------- -
--- ----------------------------------
--- ----------------------
----------------------- -----------------------------
---
--------------
--- ------------------------------------------------------ ---------
--- -------------------------------------------
--
------------- -
------------ -
------------ -
-------- -
----- -------------------------
----- ----------
------- ------
--
--
--
--
-- -- -------------------- -----------------
------------- -
--------- -----
---------- ----------------------
--
--示例代码
IntlProvider 部分：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ---------------- - ---- -------------
------ - ------------ ------ - ---- ----------
------ --------- ---- ---------------------
------ --------- ---- ---------------------
------ --------- ---- ---------------------
------ - --------- - ---- -----------------------
-- ----------------------
---------------------------------------
----- ------ - ------------------------------ -- ------------------------- -- -----
----- ---- - -------------------- --- -- - ---- - -------------------- --- -- - ---- - -----
--- ---------
--- -
-------- - -----------------------------------
-- ---------- -- ---------------------------- --- -- ----- ---------
- ----- ----- -
------------------ ----------- ------- -------------------------
-------- - ----------
-
----- ------ - ------------------------
-- --------------
-------------------------- -------------------------- ------ ------
----- ------- ------- --------- -
------------------ -
-------------
---------- - - --------- -------------- ---------- ----------------------------------- --
--------------- - ---------------------------
-
------------- -
----- ------ - ---------------------------------- -- -----
------------------------------ --------
-------------------------
-
-------- -
----- - ---------- - ------ ------ -- --------- - -------- - - - -----------
------ -
---- -------------
---- ------------------ --- ------------- ----------- ----- ---------- -
----- ------------------------ ------------------------------------- ---------------- ---------
------
----------------- ------------------------ --
----------------- --------------------- --
------
--
-
-
------ ------- --------webpack 部分：
-- -------------------- ---- -------
----- - --------- - - --------------------------------
----- ------- - -------------------
----- ------------- - ---------------------------
----- ------ - ------------------------
----- --------- - --- -----------
------ --------------------------------
------- -----------------------------------
----- -------
------------ -----
---
-------------- - -
------ ------------------- ------------------
------- -
----- ----------------------- ---------
--------- ------------
----------- ----
--
------- -
------ -
- ----- -------- -------- --------------- ---- ---------------- --
- ----- --------- -------- --------------- ---- ---------------- --
--
--
-------- -
--- ----------------------------------
--- ----------------------
----------------------- -----------------------------
---
--------------
--- ------------------------------------------------------ ---------
--- -------------------------------------------
--
-- -- -------------------- -----------------
------------- -
--------- -----
---------- ----------------------
--
--结语
通过 react-intl-optimizer 工具的使用，我们可以轻易地对项目中的 react-intl 代码进行优化，从而减小项目打包后的体积，提升项目的加载速度和用户体验。在项目开发中，我们应该积极地使用相关的工具和技术，因为它们可以为我们的工作带来很多便利和收益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e7d9381d61a3540b3c