require.js 加载 vue组件 r.js 合并压缩的实例(2)

r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。

就是写一个配置文件,将页面需要的js组件文件合并到一个,然后require.js 直接引用合并压缩后的文件就可以了,只需要加载一个文件。

准备

r.js 下载一个r.js文件放到目录中

node.js 本地需要安装node.js

require.js 加载 vue组件 r.js 合并压缩的实例

这里我们将r.js 放到js文件中,建立一个build.js 配置文件

然后说下build.js 的配置

build.js

({ baseUrl:'../vue-module/', paths:{ 'header':'tq-header', 'footer':'tq-footer', 'imgview':'tq-img-view', 'vue':'../lib/vue', }, name:'script', out:'main.js' })

我这里比较简单

baseUrl 设置基目录

paths 模块的引用

name 主模块的引用

out 输入位置

然后控制台 定位到r.js目录下 node r.js -o build.js 命令进行合并压缩,当目录下出现main.js 文件时,表示成功了。

require.js 加载 vue组件 r.js 合并压缩的实例

然后将 index.html 中 data-main 原来的script.js改成 main.js 打开就好了

<script src="https://www.jb51.net/lib/require.js" data-main="js/main.js"></script>

以上所述是小编给大家介绍的require.js 加载 vue组件 r.js 合并压缩的实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdsdw.html