背景信息
前端项目中，随着业务越来越复杂，代码量自然会变得越来越大，如果不加以控制，很难进行维护和开发。而构建代码分离的加载器则显得尤为重要。其中，js-build-by-feature-map-loader是一款较为优秀的 npm 包。
本篇文章将为大家详细介绍使用 js-build-by-feature-map-loader 进行前端项目代码分离的具体步骤。
安装
使用 npm 可以很方便地安装本包，只需要在安装指令中添加以下内容即可：
npm install js-build-by-feature-map-loader --save-dev
在 package.json 文件中可以看到以下记录：
"devDependencies": {
"js-build-by-feature-map-loader": "^1.0.0"
},使用
以 Vue 项目为例，我们将演示如何使用 js-build-by-feature-map-loader 进行代码分离。
配置
在 vue.config.js 文件中添加如下配置：
-- -------------------- ---- -------
-------------- - -
------------- ------ -- -
-------------
-----------
--------------
--------------------------------------
-----------------------------------------
----------
----------- -
-------- -------------------- -----------------
------------ -------------------- ------------------ --------------------
------- ---------------- ----------------
-
--
------
-
-以上配置的核心在于 js-build-by-feature-map-loader 的参数 featureMap，它用来定义每个文件的功能和依赖，如：
'login': ['utils/validators', 'services/auth']
这里定义了“登陆”功能，依赖了 utils/validators 和 services/auth 这两个文件。
使用
使用 js-build-by-feature-map-loader 不需要改变源代码，只需按照功能引入即可。
例如，我们在 Vue 组件中需要引入 utils/validators，我们只需：
import { isValidEmail } from 'utils/validators';这里的 validators 实际上已经被代码分离到 login 功能中了，js-build-by-feature-map-loader 会根据配置文件自动将它们合并打包输出。
同样，如果在仪表板中使用了 components/chart，只需：
import { LineChart } from 'components/chart';这里的 chart 实际上已经被代码分离到 dashboard 功能中了，同样由 js-build-by-feature-map-loader 自动合并打包输出。
示例
以下示例来自于官方文档，建议自行实践一下。
-- -------------------- ---- -------
-- ---- --------
-------------- - -
------ ------------------------
------ ------------------------
------ -
----------- ---------------------------------------
--------- -
----- -----------------------------------------
-
--
---------- -
----------- -------------------------------------------
--------- -
------- -----------------------------------------------
--
----------- -
------ ------------------------------------------------
-
-
---- -------------------- ---- -------
-- - --- --------- - ----
-------------- - -
-------- -
-
----- --------
------ ---------------- --------------------------------- ------------------------------
--
-
----- ------------
------ ---------------- --------------------------------------- ---------------------------------- ----------------------------------------
-
-
---- -------------------- ---- -------
-- --
-------------- - -
------- -
------ --
----- --------
---- -
------- ---------------------------------
-------- -
----------- --------------------------
-
-
--
--
--在我的使用中，我发现很多固定的文件名都已经被 webpack 自带的代码分离功能实现，使用 js-build-by-feature-map-loader 的主要目的是为了将各种功能性代码按需打包，减小项目大小，便于维护。
总结
js-build-by-feature-map-loader 是一款十分实用的 npm 包，可以轻松实现前端项目的代码分离，提高代码的可读性和可维护性。应用场景十分广泛，对于 Vue、React 等主流前端框架均适用。
希望本文能够为那些需要使用这款工具的前端开发者提供极大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/184240