简介
在前端开发中，构建工具是必不可少的。而 FIS3 是一款优秀的前端构建工具。它以插件化的方式为前端开发提供完整的解决方案。而fis3-postpackager-loader 是一款 FIS3 中的插件，它的主要作用是将模块打包成 js 或 css 文件，并优化模块加载的方式，可以大大提升页面的加载速度和用户体验。
安装 fis3-postpackager-loader
使用 npm 进行安装，执行以下命令：
--- ------- -- ------------------------
配置 fis-conf.js
在 fis-conf.js（FIS3 配置文件）中添加以下代码：
---------------------- -
------------- -------------------- -
--------- ----
--
---这个配置的意思是，所有的文件都会被打包成一个 all.js 文件或 all.css 文件，同时代码会被压缩，从而提升页面速度。
细节说明
打包方式
fis3-postpackager-loader 有以下几种打包方式：
allInOne: 所有的文件都会被打包成一个all.js文件或all.css文件。async: 将所有文件拆分成几个块，页面会先加载必要的文件，然后再异步加载剩下的文件。例如，你有一个页面需要加载三个js文件，它们是a.js，b.js，c.js，a.js是必要的，而b.js和c.js可以异步加载，那么该页面最终会加载两个文件all_async.js和all_async.css。mod: 将文件根据模块归类，然后分别打包。
设置路由
fis3-postpackager-loader 还可以设置路由，即对于某些特定的 js 文件或 css 文件指定加载方式，如下：
----------------- -
------------------- ----
---
------------------------------- -
------------------- -----
------- -----------------
---这里，useSameNameRequire 表示使用同名依赖加载方式，即通过 require('./a') 就可以加载 a.js。而 packTo 则表示将该文件打包到指定路径下。
示例代码
以下是使用 mod 打包方式的示例代码：
-- --------
--- - - ---------------
--- - - ---------------
-------------
-------------
-- ----
---------------- - ---------- -
------------------- -----
--
-- ----
---------------- - ---------- -
------------------- -----
--在 fis-conf.js 中添加以下代码：
-- -- --- ----
---------------------- -
------------- -------------------- -
------------- -----
--------- -
--- -----------------
---- -----------------
--
-------------- -----
------------ -----
------------------ ----------------------------
----------------- ---------------------------
-------------------- --------------------------------
--
---运行 fis3 release -d dist 就可以将代码打包成 all.js 和 all.css，并生成 dist 目录。
接着在 HTML 文件中添加以下代码：
--------- -----
------
------
----- ----------------
--------- --------------------------------
------------------------
-------
------
------ ------------------------ ---------
-------------------------
------------------------------
-------
-------在 <!--SCRIPT_PLACEHOLDER--> 处会自动插入 all.js 文件，<!--STYLE_PLACEHOLDER--> 处会自动插入 all.css 文件。而在 <!--RESOURCEMAP_PLACEHOLDER--> 处则会自动生成一个资源映射表，用于浏览器加载资源。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/63481