前端 | gulp 打包 require.js 模組依賴

weixin_34221276發表於2015-06-04
前端UIJS

背景

專案JS指令碼是使用 require.js 來組織

圖片描述

在依賴沒有打包之前，載入是這樣
圖片描述

請求太多，一個有潔癖的人肯定是受不了的，故需求就產生了，打包 require.js 模組程式碼依賴

工具

我使用 gulp 作為前端工作管理員，使用 amd-optimize 來打包require.js 模組依賴 有人說此外掛下載量太低，不敢用，我也就呵呵了，工具是用來解決問題的，不是給人看的,實在不行，檢視原始碼自己造個輪子也不錯

檔案結構

圖片描述

我是用上圖中的 test.js 作為打包入口檔案

test 程式碼如下：

require(["require-config"], function() {
    require([
        'xxxxxxx1',
        'xxxxxxx2',
        'xxxxxxx3',
        'xxxxxxx4',
    ]);
});

gulp 任務函式

var concatFile = require('gulp-concat')
  , uglifyJS = require('gulp-uglify')
  , shell = require('gulp-shell')
  , amdOptimize = require('amd-optimize');

gulp.task('bundle', function () {
  return gulp.src('./js/**/*.js')
    .pipe(amdOptimize('test', {
      configFile: './js/require-config.js',
      findNestedDependencies: true,
      include: false
    }))
    .pipe(concatFile('test.js'))
    // .pipe(uglifyJS('test.js'))
    .pipe(gulp.dest('./jsbuild/'));
});

執行任務之後，檔案已經打包指定目錄
注意： 任務函式中我沒有壓縮，用意等下解釋

問題

  • debug 環境下載入了 require-config.js
  • production 環境使用的是打包後的模組檔案，即 ./jsbuild 中的 test.js 沒有載入 require-config.js,至於原因：因為模組依賴已經打包到一個檔案中，已經沒有必要載入 require-config.js

但是生產環境測試發現：
圖片描述
發現還是有很多請求發生，也就是說打包沒有起到作用

檢視生成的 ./jsbuild/test.js 檔案，直接檢視最後幾行程式碼 就會發現
圖片描述

發現打包後的檔案中包含了 require-config.js 的內容，在外掛的配置選項中沒有發現去除包含 require.js 配置檔案的選項 【如果你發現了，請分享下，萬分感謝】

不得已採用 shell 處理，修改後的任務函式如下

gulp.task('isport:desk', function() {
  gulp.src('./js/**/*.js')
    .pipe(amdOptimize('test', {
      configFile: './js/require-config.js',
      findNestedDependencies: true,
      include: false
    }))
    .pipe(concatFile('test.js'))
    // .pipe(uglifyJS())
    .pipe(gulp.dest('./jsbuild/'))
    .pipe(shell([
      "sed '/require.config({/, $d' ./jsbuild/test.js > ./jsbuild/test-mini.js",
      "rm ./jsbuild/test.js"]));

  return gulp.src('./jsbuild/test-mini.js')
    .pipe(uglifyJS())
    .pipe(gulp.dest('./jsmini'));
});

執行任務後，在debug tools 中檢視結果

圖片描述
通過發現，乾淨了，心情舒暢了

後記

實話說這種方法打包並不是很完美，至於完美的方法一直在不斷的探索中

相關文章