npm 包 fis3-postpackager-loader 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

在前端开发中，构建工具是必不可少的。而 FIS3 是一款优秀的前端构建工具。它以插件化的方式为前端开发提供完整的解决方案。而fis3-postpackager-loader 是一款 FIS3 中的插件，它的主要作用是将模块打包成 js 或 css 文件，并优化模块加载的方式，可以大大提升页面的加载速度和用户体验。

安装 fis3-postpackager-loader

使用 npm 进行安装，执行以下命令：

npm install -g fis3-postpackager-loader

配置 fis-conf.js

在 fis-conf.js（FIS3 配置文件）中添加以下代码：

fis.match('::package', {
    postpackager: fis.plugin('loader', {
        allInOne: true
    })
});

这个配置的意思是，所有的文件都会被打包成一个 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 文件指定加载方式，如下：

fis.match('*.js', {
    useSameNameRequire: true
});

fis.match('/modules/common.js', {
    useSameNameRequire: true,
    packTo: '/modules/all.js'
});

这里，useSameNameRequire 表示使用同名依赖加载方式，即通过 require('./a') 就可以加载 a.js。而 packTo 则表示将该文件打包到指定路径下。

示例代码

以下是使用 mod 打包方式的示例代码：

-- -------------------- ---- -------
-- --------
--- - - ---------------
--- - - ---------------

-------------
-------------

-- ----
---------------- - ---------- -
    ------------------- -----
--

-- ----
---------------- - ---------- -
    ------------------- -----
--

在 fis-conf.js 中添加以下代码：

-- -------------------- ---- -------
-- -- --- ----
---------------------- -
    ------------- -------------------- -
        ------------- -----
        --------- -
            --- -----------------
            ---- -----------------
        --
        -------------- -----
        ------------ -----
        ------------------ ----------------------------
        ----------------- ---------------------------
        -------------------- --------------------------------
    --
---

运行 fis3 release -d dist 就可以将代码打包成 all.js 和 all.css，并生成 dist 目录。

接着在 HTML 文件中添加以下代码：

-- -------------------- ---- -------
--------- -----
------
------
    ----- ----------------
    --------- --------------------------------
    ------------------------
-------
------
    ------ ------------------------ ---------
    -------------------------
    ------------------------------
-------
-------

在  处会自动插入 all.js 文件， 处会自动插入 all.css 文件。而在  处则会自动生成一个资源映射表，用于浏览器加载资源。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/63481