demo目录结构如下:
-demo
- --img
- --css
- --js
- -- -- utils_part1.js
- -- -- utils_part2.js
- -- -- ... ...
- -- -- utils_partN.js
- -- -- func1.js
- -- -- func2.js
- -- -- ... ...
- -- -- funcN.js
- -- -- a.js
- -- -- b.js
- --a.html
- --b.html
- --build.js
- --require.js
- --r.js
a.html引导a.js,b.html引导b.js,其中
a.js: define(['utils_part1',...,'utils_partN','func6'], function(...){...});
b.js: define(['utils_part1',...,'utils_partN','func3','func5','func6'],
build.js:
({
appDir: './',
baseUrl: 'js',
dir: '../dist',
paths: {
jquery: 'empty:'
},
modules: [
{
name: 'b'
},
{
name: 'c'
}
]
})
r.js -o build.js:
- js/a.js
js/utils_part1.js
js/utils_part2.js
... ...
js/utils_partN.js
js/func1.js
- js/b.js
js/utils_part1.js
js/utils_part2.js
... ...
js/utils_partN.js
js/func3.js
js/func5.js
js/func6.js
我的问题是:打包之后的 a.js
文件和 b.js
文件 都使用了 utils_part1.js
~ utils_partN.js
, 如果另有 c.js
, d.js
...... 那么浏览器上每访问一个 js 文件都要重复加载 utils_part1.js
~ utils_partN.js
这部分代码。
build.js 要怎么写才能将 utils_*
打包为一个文件而复用呢?
翻出答案了:
测试如下