4

背景

拥有一个包含 100 多个 Javascript 和 HTML 模板文件的项目。使用脚本加载器 (yepnope) 直接从我们的开发环境加载文件，以便在开发过程中，可以将小的更改保存到文件中，并在刷新浏览器后立即看到。

问题

起初这很好用，但现在项目变得更大了，浏览器加载所有文件需要很长时间。对于我们的生产环境，我们可以将所有文件连接在一起，但开发环境也需要快速，以加快开发过程并减少开发人员的挫败感。

问题

寻找某种解决方案，使我们能够保留当前的文件组织，但可能将文件作为一个大文件传送到浏览器。我不确定这将如何工作。这样的解决方案是否会在每次检测到源文件中的更改时更新某种派生文件，或者将所有内容保存在一个大文件中，但允许文件在 IDE 中导航，就好像它是一个目录结构一样？

目前我们使用 PyCharm。

非常感谢！

4

2 回答 2

3

您肯定应该连接您的 javascript 文件。提供许多文件真的很糟糕。我现在使用的是Grunt。它是一个 nodejs 任务运行器。我们有两个环境

  • development/local - 在本地环境中 Grunt 连接文件，但不要缩小它们。它还在每个文件上方添加了一个信息性注释，因此如果您在 DevTools 中看到一些错误，您需要滚动一下以查看确切的文件
  • 生产 - 最终文件被缩小并删除评论。

使用这种方法，我们仍然将所有内容拆分到不同的文件中，但只提供一个文件。我们实际上不仅将 Grunt 用于 javascript，还用于 html 模板、CSS、生成缓存清单和主 index.html 文件。这是我们的 package.json 文件的样子：

{
  "name": "project",
  "version": "0.0.1",
  "description": "project",
  "repository": {},
  "devDependencies": {
    "grunt": "0.4.1",
    "grunt-contrib-concat": "0.3.0",
    "grunt-contrib-watch": "0.4.4"
  }
}

还有我们的 Gruntfile.js：

module.exports = function(grunt) {

    grunt.initConfig({
        // contcatenation
        concat: {
            // javascript
            js: {
                src: ['src/**/*.js'],
                dest: 'bin/scripts.js',
                options: {
                    process: function(src, filepath) {
                        // do something here
                        return "\n/* " + filepath + " */\n" + src;
                    }
                }
            },
            // CSS
            css: {
                src: ['src/**/*.css'],
                dest: 'bin/styles.css',
                options: {
                    process: function(src, filepath) {
                        return src;
                    }
                }
            },
            // HTML templates
            html: {
                src: ['src/**/*.html', '!src/index.html'],
                dest: 'tmp/templates.html',
                options: {
                    process: function(src, filepath) {
                        return src;                     
                    }
                }
            }
        },
        // custom task for generating index.html (it's a single page app)
        'generate-index': {
            index: {
                src: '<%= concat.html.dest %>',
                dest: 'bin/index.html',
                template: 'src/index.html'
            }
        },
        // custom task for generating cache manifest file
        'generate-manifest': {
            manifest: {
                dest: 'bin/cache.manifest'
            }
        },
        // watching all the files and performa the specific tasks
        watch: {
            js: {
                files: ['<%= concat.js.src[0] %>'],
                tasks: ['concat:js', 'generate-manifest']
            },
            css: {
                files: ['<%= concat.css.src[0] %>'],
                tasks: ['concat:css', 'generate-manifest']
            },
            html: {
                files: ['<%= concat.html.src[0] %>'],
                tasks: ['concat:html', 'generate-index', 'generate-manifest']
            },
            img: {
                files: ['bin/img/**/*.png', 'bin/img/**/*.jpg', 'bin/img/**/*.gif'],
                tasks: ['generate-manifest']    
            }
        }
    });

    // loading modules
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadTasks('tasks');

    // grunt.registerTask('default', ['concat', 'less']);
    grunt.registerTask('default', ['concat', 'generate-index', 'generate-manifest', 'watch']);

}
于 2013-09-17T06:52:08.683 回答
1

一件事是JavaScript Source Maps，它允许您提供一个大文件，以及它们如何组合的信息。如果浏览器支持源地图，它将显示缩小和组合文件，就好像它没有被缩小和组合一样。为此，它使用源映射的信息加载原始源文件。从我所见，原始文件仅在需要时才加载（显示在脚本视图中）。

您可以做的另一件事是使用expire例如一天的标题并在您的断言前加上内部版本号。如果在代码更改时重新构建代码，则会生成新的内部版本号。这样，只有在完成更改时才会重新加载 js 代码，否则会从浏览器缓存中读取。这样，只有更改后的初始加载会变慢，但测试页面会再次运行流畅。

于 2013-09-17T06:58:35.963 回答