[TOC]
- 压缩优化r.jsgulpgulp-requirejsgulp-requirejs-optimizegruntgrunt-contrib-requirejs
压缩优化
开发时候的模式,各个模块其实都被加到了head部分,然后变成单独的请求,对于开发环境,我们有一个优化的重点,就是减少请求数。所以我们要使用工具,将开发环境的js文件进行合并压缩。
r.js
官方提供的一个优化工具,推荐自己再写一个build.js文件。比如:
({ baseUrl: "./", name: "scripts/config", mainConfigFile: "scripts/config.js", out: "main-built.js", optimize: "none"})
然后使用r.js -o build.js, 就可以进行文件的合并了。但这里是所有文件都在本地的情况。且压缩的是require依赖部分,实际请求数还是两个,另一个是require.js本身。如果需要合并为一个,再进行一次concat操作。
build.js使用的选项可以在all configuration options查询。
gulp
gulp-requirejs
项目地址:gulp-requirejs。目前处于out-of-date状态。
使用方法:
var gulpRequire = require('gulp-requirejs');// optimize requireJSgulp.task('optimize', function() { gulpRequire({ baseUrl: "src", include: ['scripts/config'], mainConfigFile: "src/scripts/config.js", out: "main-built.js", optimize: "none" }) .pipe(gulp.dest('dist/'));});
gulp-requirejs-optimize
项目地址:gulp-requirejs-optimize。
grunt
grunt-contrib-requirejs
项目地址:grunt-contrib-requirejs
使用方法:
grunt.loadNpmTasks('grunt-contrib-requirejs');requirejs: { compile: { options: { baseUrl: "path/to/base", mainConfigFile: "path/to/config.js", name: "path/to/almond", // assumes a production build using almond out: "path/to/optimized.js" } }}
