ng2 项目加速构建:Speeding the build - Christian-Yang/Translate-and-save GitHub Wiki
源文章地址:https://github.com/mgechev/angular-seed/wiki/Speeding-the-build-up
Speeding the build up
加快 build up(构建)
TypeScript performs compile-time type checking over all your files. The build invokes the tasks which cleans the dist directory and performs transpilation of the TypeScript files on each change. Obviously, there are places for improvements.
typescript进行编译时类型检查你所有的文件。build构建将会执行的任务有,清理dist目录,并且编译每一个改变的TypeScript文件。显然,有改进的地方。
TYPED_COMPILE_INTERVAL config option
类型-编译-间隔 配置选项
The project build configuration now exposes a field called TYPED_COMPILE_INTERVAL. By default, this is set to 0, meaning a fully typed TypeScript compilation will be executed after each file change is saved. Changing this value in your project.config.ts can dramatically speed up the TypeScript compilation task.
项目build配置现在暴露了一个field字段叫做TYPED_COMPILE_INTERVAL。默认,情况下设置为0,这意味着当文件改变被保存的时候,一个完整的TypeScript类型编译将会被执行。改变这个值在你的project.config.ts就能够动态的加速TypeScript的编译任务。
For example, setting TYPED_COMPILE_INTERVAL=5; means that a fully typed compile will be performed when running npm start. Then, the next 5 changes will trigger a cached, typeless compilation (using gulp-cached and isolatedModules). The next compile will be a fully typed compile, then 5 more typeless compiles, and so on.
例如,设置TYPED_COMPILE_INTERVAL=5;意味着一个完整的类型编译将会被执行当执行npm start的时候。而后,下一个5个改变将会触发一个缓存,
没有类型的编译(使用gulp-cached和isolateModues)。接下来将是一个完全式编译编译,然后5个无类型的编译,等等。
Finally, if a compile error is encountered at any time, the build will force fully typed compiler runs until the compile error is eliminated. Once any error(s) are fixed, the build then proceeds with alternating between typed and typeless compiles again.
最后,如果在任何时候遇到编译错误,则build将强制完全类型的编译器运行,直到编译错误被消除。一旦任何错误被修复,构建然后继续在类型化和非类型化编译之间交替。
This setup provides an acceptable balance between build speed and type checking. So don't set TYPED_COMPILE_INTERVAL to a value that is too large, since the longer the interval, the longer it may take for a typed compile to run and identify type errors.
此设置在生成速度和类型检查之间提供了一个可接受的平衡。所以不要typed_compile_interval为值太大,因为间隔时间越长,可能需要更长时间的一个类型的编译运行和发现类型错误。
isolatedModules
Using isolatedModules will lead to:
使用 isolatedModules 将会导致:
Compiles files seperately and doesn't check types, which causes a big speed increase. You have to use gulp-plumber and TypeScript 1.5+.
分别编译文件和不检查类型,导致一个大的速度增加。你可以使用gulp-plumber和TypeScript 1.5+
However, this way you're giving up the main feature of TypeScript - type checking. It is not recommended to enable this option for your production build, however, for development it could be a good strategy for increasing your build's speed. Most IDEs and text editors invoke the TypeScript compiler behind the scene and point out the type errors we did in our source files. In such case in order to speedup the build you can disable type checking in the build and let your text editor handles the rest.
然而,这样你放弃的TypeScript的主要特征---类型检查。不建议启用此选项为您的production build(生产构建),但是,为development开发,它可能是一个很好的策略,提高您的建设速度。大多数IDE和文本编辑器调都能进行编译,这样就指出了在我们的源代码文件中TypeScipt编译类型错误。
在这种情况下,为了加速构建,您可以在生成中禁用类型检查,并让您的文本编辑器处理其余部分。
In order to enable the isolatedModules config for your dev build override your build.js.dev tasks with the following:
// tools/tasks/project/build.js.dev.ts
import * as gulp from 'gulp';
import * as gulpLoadPlugins from 'gulp-load-plugins';
import {join} from 'path';
import {APP_SRC, APP_DEST, TOOLS_DIR} from '../../config';
import {templateLocals, makeTsProject} from '../../utils';
const plugins = <any>gulpLoadPlugins();
export = () => {
let tsProject = makeTsProject({
isolatedModules: true 【注意这里】
});
let src = [
'typings/browser.d.ts',
TOOLS_DIR + '/manual_typings/**/*.d.ts',
join(APP_SRC, '**/*.ts'),
'!' + join(APP_SRC, '**/*.spec.ts'),
'!' + join(APP_SRC, '**/*.e2e.ts')
];
let result = gulp.src(src)
.pipe(plugins.plumber())
.pipe(plugins.sourcemaps.init())
.pipe(plugins.typescript(tsProject));
return result.js
.pipe(plugins.sourcemaps.write())
.pipe(plugins.template(templateLocals()))
.pipe(gulp.dest(APP_DEST));
};
Disable linting tasks
禁用lint任务
Most text editors and IDEs run tslint behind the scene. This way, during development, we run linting (at least) twice:
大多数文本编辑器和IDE在幕后运行tslint。这样,在开发过程中,我们跑lint(至少)两次:
(1)Inside of the text editor/IDE
在文本编辑器/IDE内部
(2)By the gulp task build.dev
通过gulp任务build.dev
In order to speedup the build you can just comment the tslint and css-lint tasks and let your text editor/IDE takes care of pointing out the errors you did.
为了加快build构建,你可以提交tslint和CSS-lint任务,让你的文本编辑器或IDE照顾指出你的语法错误。
Use gulp-cached
使用gulp-cached
This keeps an in-memory cache of files (and their contents) that have passed through it. If a file has already passed through on the last run it will not be passed downstream. This means you only process what you need and save time + resources.
这保持了通过它的文件的内存缓存。 如果文件在上次运行时已经通过,则不会向下游传递。 这意味着你只需要处理你所需要的,节省时间+资源。
This means that files which haven't changed will not be processed, i.e. will not be stored onto the disk. The build has a clean task, which on each change of a file will remove dist/dev or dist/prod. This happens because we don't want to have files which have already been removed from your src directory existing in dist/ENV, since this can lead to unpredictable bugs.
这意味着没有改变的文件将不被处理,例如:没有被存储在磁盘上。构建有一个叫做clean的任务,在每次更改文件将删除dist/dev或dist/prod。
发生这种情况是因为我们不想有已经从您的src目录中删除的文件存在于dist/ENV目录中,因为这可能导致不可预测的错误。(意思就是说,src源代码目录中已经没有这个代码了,比如你删除了,但是如果没有清除掉上一次的build生成的文件,那么被删除的文件的对应的文件将还会在dist/env目录中)
In order to take advantage of gulp-cached you must disable the relevant clean.{ENV} task in gulpfile.ts (e.g. inside build.dev). Otherwise, only the changed (uncached) build output files will remain (since everything else is removed during clean). Finally, in your JS build task, separate your source files from your typings and then pipe your source files through gulp-cached:
为了利用gulp缓存的优势,您必须在gulpfile.ts(例如,build.dev内)禁用相关的"clean.{ENV}"任务。 否则,只有更改的(未缓存的)构建输出文件将保留(因为在清理期间删除其他内容)。 最后,在您的JS构建任务中,将您的源文件与您的输入分离,然后通过gulp缓存管道源文件:
// Inside tools/tasks/project/build.js.dev.ts
import * as merge from 'merge-stream';
//...
let typings = gulp.src([
'typings/browser.d.ts',
join(config.TOOLS_DIR + '/manual_typings/**/*.d.ts')]);
let projectFiles = gulp.src(src)
.pipe(plugins.cached());
let result = merge(typings,projectFiles)
.pipe(plugins.debug())
.pipe(plugins.plumber())
.pipe(plugins.sourcemaps.init())
.pipe(plugins.typescript(tsProject));
For further discussions on tuning the performance, take a look at this issue.
https://github.com/mgechev/angular-seed/issues/645