我有一个正在使用grunt进行构建和部署的工作requirejs项目.如果根本不使用优化,那么构建工作没有问题,我得到一个大的js文件来在生产中部署它.
我遇到的问题是,我有一些外部框架(如angularJS),我已经有了它的最小化/优化版本,并且不想再次优化它.
目前没有优化我通过我的gruntfile中的单独路径配置包含此框架的缩小版本.而在我的普通main.js中,我有非缩小版本用于开发.
现在我想使用优化器来优化我自己的代码,但是不要优化外部框架.但是外部框架应该包含在生成的大javascript文件中.基本上我想告诉优化器他应该在某些情况下使用原始文件.
我可以这样做吗？
我只找到了一个全局排除选项,因此有些模块根本不包含在生成的优化js中.
这是我的咕噜声配置:
requirejs: {
compile: {
options: {
baseUrl: "<%= pkg.folders.jsSource %>",
name: "../external-libs/almond-0.1.1",
include: "main",
mainConfigFile: "<%= pkg.folders.jsSource %>/main.js",
out: "<%= pkg.folders.build + pkg.name + '-' + pkg.version %>/js/main.js",
//logLevel: 0,
optimize: "uglify2",
//optimize: "none",
paths: {
'angular':'../external-libs/min/angular-1.0.4',
'jquery':'../external-libs/min/jquery-1.7.2',
'jquery.mobile':'../external-libs/min/jquery.mobile-1.2.0',
'adapter': '../external-libs/min/jquery-mobile-angular-adapter-1.2.0',
'moment': '../external-libs/moment-1.6.2.min',
'iscroll': '../external-libs/min/iscroll-4.2.5',
'iscrollview': '../external-libs/min/jquery.mobile.iscrollview-1.2.6',
'add2Home': '../external-libs/min/add2home',
'config/config': "config/<%=configDatei%>"
}
}
}
},
这是main.js的相关部分:
require.config({
paths:{
'angular':'../external-libs/angular-1.0.4',
'jquery':'../external-libs/jquery-1.7.2',
'jquery.mobile':'../external-libs/jquery.mobile-1.2.0',
'adapter': '../external-libs/jquery-mobile-angular-adapter-1.2.0',
'moment': '../external-libs/moment-1.6.2.min',
'iscroll': '../external-libs/iscroll-4.2.5',
'iscrollview': '../external-libs/jquery.mobile.iscrollview-1.2.6',
'add2Home': '../external-libs/add2home'
},
shim:{ …我是ngrx/store的初学者,这是我使用它的第一个项目.
我已经使用ngrx/store成功设置了我的角度项目,并且我可以在初始化主要组件后调度一个加载操作,如下所示:
ngOnInit() {
this.store.dispatch({type: LOAD_STATISTICS});
}
我已设置一个效果,以便在调度此操作时加载数据:
@Effect()
loadStatistik = this.actions.ofType(LOAD_STATISTICS).switchMap(() => {
return this.myService.loadStatistics().map(response => {
return {type: NEW_STATISTICS, payload: response};
});
});
我的减速机看起来像这样:
reduce(oldstate: Statistics = initialStatistics, action: Action): Statistik {
switch (action.type) {
case LOAD_STATISTICS:
return oldstate;
case NEW_STATISTICS:
const newstate = new Statistics(action.payload);
return newstate;
....
虽然这有效,但我无法理解如何使用路由器防护,因为我目前只需要调度一次LOAD_ACTION.
此外,组件必须调度LOAD操作,加载初始数据对我来说听起来不对.我希望商店本身知道它需要加载数据,我不必先调度一个动作.如果是这种情况,我可以删除组件中的ngOnInit()方法.
我已经查看了ngrx-example-app,但我还没有真正了解它是如何工作的.
编辑:
添加一个返回ngrx-store observable的解析防护后,该路由不会被激活.这是决心:
@Injectable()
export class StatisticsResolver implements Resolve<Statistik> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Statistik> {
// return Observable.of(new Statistik());
return this.store.select("statistik").map(statistik => {
console.log("stats", statistik); …当我在webpack项目中导入像momentjs这样的库时,webpack也会自动包含所有可选的依赖项.对于我这样做的时刻:
import * as moment from 'momentjs'
我将200kb添加到我的捆绑包中,因为这会自动包含所有可能的区域设置.区域设置为150kb,库本身仅为50kb.在这个问题中,它描述了如何在ContextReplacementPlugin的帮助下在webpack配置中排除这些依赖关系.
如何在我无法直接访问webpack配置的angular-cli项目中执行此操作(除非我弹出具有其他副作用的配置).