r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。
就是写一个配置文件,将页面需要的js组件文件合并到一个,然后require.js 直接引用合并压缩后的文件就可以了,只需要加载一个文件。
准备
r.js 下载一个r.js文件放到目录中
node.js 本地需要安装node.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 文件时,表示成功了。
然后将 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 合并压缩的实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章: