小编Asa*_*atz的帖子

如何使用prefetchPlugin和analyze工具优化webpack的构建时间?

以前的研究:

正如webpack的wiki所说,可以使用分析工具来优化构建性能:

来自:https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

来自构建统计数据的提示

有一个分析工具可以显示您的构建,并提供一些提示如何优化构建大小和构建性能.

您可以通过运行webpack --profile --json> stats.json来生成所需的JSON文件


我生成stats文件(可在此处)将其上传到webpack的analize工具
,在Hints选项卡下我告诉我使用prefetchPlugin:

来自:http://webpack.github.io/analyse/#hints

长模块构建链

使用预取来提高构建性能.从中间预取模块.


我从里面挖出网页,找到prefechPlugin上唯一可用的文档是这样的:

来自:https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

对正常模块的请求,即使在需要之前解析和构建也是如此.这可以提高性能.尝试首先分析构建以确定聪明的预取点.



我的问题:

  • 如何正确使用prefetchPlugin?
  • 在Analyze工具中使用它的正确工作流程是什么?
  • 我怎么知道prefetchPlugin是否有效?我该怎么测量呢?
  • 从链中间预取模块意味着什么?

我真的很感激一些例子

请帮助我将这个问题作为下一个想要使用prefechPlugin和Analyze工具的开发人员的宝贵资源.谢谢.

optimization webpack

96
推荐指数
1
解决办法
2万
查看次数

角度UI路由器| $ stateParams不工作

好像$stateParams不行.像这样传递日期:

$state.go('state2', { someParam : 'broken magic' });
Run Code Online (Sandbox Code Playgroud)

params在目标状态被忽略

console.log('state2 params:', $stateParams); // return empty object {}
Run Code Online (Sandbox Code Playgroud)

码:

    var app = angular.module('app', [
     'ui.router'
    ]);

    app.config(function($stateProvider) {
      $stateProvider
            .state('state1', {
                url: '',
                templateUrl: 'state-1.html',
                controller : function ($scope, $state, $stateParams) {
                  $scope.go = function () {
                    $state.go('state2', { someParam : 'broken magic' });
                  };

                  console.log('state1 params:', $stateParams);
                }
            })
            .state('state2', {
                url: 'state2',
                templateUrl: 'state-2.html',
                controller : function ($scope, $state, $stateParams) {
                  $scope.go = function () {
                    $state.go('state1', …
Run Code Online (Sandbox Code Playgroud)

angularjs angular-ui-router

30
推荐指数
3
解决办法
7万
查看次数

webpack中"pragma style"的含义是什么?

devtool配置文档中,他们说:

前缀@,#或#@将强制执行pragma样式.(默认为#,推荐)

这是什么意思?

webpack

28
推荐指数
2
解决办法
2417
查看次数

gulp中乙烯基缓冲液和gulp-streamify的目的是什么?

正如文档所述,它们都处理将非流插件转换为流.

我试着理解的是,如果我可以.pipe()在某些东西上使用这个方法,那么这不是说它是一个流吗?

如果是这样,我该怎么转换成什么?


乙烯基源流示例:

(来自:https://www.npmjs.com/package/vinyl-buffer)

var browserify = require('browserify')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var uglify = require('gulp-uglify')
var size = require('gulp-size')
var gulp = require('gulp')

gulp.task('build', function() {
  var bundler = browserify('./index.js')

  return bundler.pipe()
    .pipe(source('index.js'))
    .pipe(buffer()) // <---------------------- why?
    .pipe(uglify())
    .pipe(size())
    .pipe(gulp.dest('dist/'))
})
Run Code Online (Sandbox Code Playgroud)


gulp-streamify示例:

(来自:https://www.npmjs.com/package/vinyl-source-stream)

var source = require('vinyl-source-stream')
var streamify = require('gulp-streamify')
var browserify = require('browserify')
var uglify = require('gulp-uglify')
var gulp = …
Run Code Online (Sandbox Code Playgroud)

javascript node.js-stream gulp

20
推荐指数
2
解决办法
6438
查看次数

一起使用create-react-app和Sublimelinter ESlint

我使用facebook的create-react-app,故意隐藏所有配置设置,并给我们留下一个可爱的简单文件结构

一个可爱的文件结构

那很棒!但是有一个非常烦人的事情出现了:

SublimeLinter不再有效,因为.eslintrc配置文件不再位于项目的根目录下.

关键点

  • 我知道我可以在根目录下放另一个.eslintrc文件,但我希望能够在一个地方设置我的规则

  • 我知道可以npm eject将整个项目结构放在前面,但我想保持简单.否则它变成另一个样板

  • 我注意到在package.json中 package.json中的线索

我已经尝试过了什么?

我想到的方向是改变:

"eslintConfig": {
   "extends": "./node_modules/react-scripts/config/eslint.js"
}
Run Code Online (Sandbox Code Playgroud)

至:

"eslintConfig": {
   "extends": "./.eslintrc.js"
}
Run Code Online (Sandbox Code Playgroud)

但它似乎需要所有的eslint-plugins(它们神奇地隐藏起来node_modules)所以我不确定它是正确的方式.

任何见解?

sublimelinter sublimetext3 reactjs eslint

13
推荐指数
1
解决办法
2416
查看次数

angularjs | 日期输入未显示ng-model值

日期输入未显示用户更改日期之前的日期

// showing the date
<p>{{someDate | date}}</p>

// not showing the date. instead showing mm/dd/yyyy.  
// but value will change when use change is
<input type="date" ng-model="someDate">
Run Code Online (Sandbox Code Playgroud)

jsbin中的示例代码

它正在使用版本1.3.0-beta.3,但是

我需要它在稳定版本1.2.14上工作.可能吗?

angularjs

11
推荐指数
1
解决办法
2万
查看次数

如何在create-react-app上调试jest单元测试?

我使用create-react-app,我想调试我的单元测试

正如Jest文档所述,使用此命令可以进行调试:

node --debug-brk --inspect ./node_modules/.bin/jest -i [any other arguments here]
Run Code Online (Sandbox Code Playgroud)

不幸的是,它不适用于create-react-app.我得到了这个错误:

node --debug-brk --inspect ./node_modules/.bin/jest -i
Debugger listening on port 9229.
Warning: This is an experimental feature and could change at any time.
To start debugging, open the following URL in Chrome:
    chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980/inspector.html?experiments=true&v8only=true&ws=localhost:9229/node
Debugger attached.
module.js:457
    throw err;
    ^

Error: Cannot find module '/Users/asafkatz/dev/newmaps/node_modules/.bin/jest'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Timeout.Module.runMain [as _onTimeout] (module.js:590:10)
    at tryOnTimeout (timers.js:232:11)
    at Timer.listOnTimeout (timers.js:202:5)
Waiting for the debugger …
Run Code Online (Sandbox Code Playgroud)

debugging jestjs create-react-app

10
推荐指数
3
解决办法
7353
查看次数

在创建它时引用javascript对象proprty(使用它)

你能解释一下为什么这个对象不理解'这个'吗?

var circle = {
                radius : 20,
                x : 100 - this.radius / 2,
                y : 100 - this.radius / 2,
             }

console.log(circle.x) // returns NaN, why?
Run Code Online (Sandbox Code Playgroud)

javascript oop

4
推荐指数
1
解决办法
120
查看次数

在AppFog上,如何查看终端上的控制台日志(node.js)

我希望能够从AppFog上的node.js应用程序中看到终端中的控制台日志.如果没有它就很难调试.

我在文件中看到了一种叫做隧道的东西,这就是我要找的东西吗?
如果是的话,你能解释一下怎么做吗?

下面的截图来自我的本地机器:如何从AppFog实例中看到类似的输出?

控制台登录终端

编辑: @Vadim提到他的回答命令

af logs <your_app_name>
Run Code Online (Sandbox Code Playgroud)

它看起来像预期的那样工作,但它在几秒后停止记录,
如何告诉它继续观看?

deployment debugging console node.js appfog

4
推荐指数
1
解决办法
3016
查看次数

ember.js | 在一个组件操作上通知其他组件

Ember的指南组件部分有一个Post Summary Component的演示,点击一个Post Summery标题打开它下面的内容.

我想添加功能以同时关闭任何其他打开的帖子摘要.

我的问题的目的是理解ember如何在不牺牲隔离的情况下在组件之间说话.

我想到的解决方案是:

  1. 有一些包装组件以某种方式处理它

  2. 触发像'post-summery:open'这样的事件并让其他组件靠近它(但是它可以使用相同的组件与app上的其他地方碰撞以进行不同的使用)

这是文档中的原始演示:http: //jsbin.com/uyibis/1/edit

这就是我用jQuery实现行为的方法:http: //jsbin.com/eremon/2/edit

var $ contents = $('.content').hide();

$(document).on('click','.title',function(){

$ contents.hide();
$(本).接下来( '内容')显示().

});

在此输入图像描述

ember.js

4
推荐指数
1
解决办法
3705
查看次数

将ES6 Map与Flow类型一起使用

我正在努力绕过流程,我努力使其与ES6兼容 Map

考虑以下简单情况(现场演示):

// create a new map
const m = new Map();

m.set('value', 5);

console.log(m.get('value') * 5)
Run Code Online (Sandbox Code Playgroud)

流抛出:

console.log(m.get('value') * 5)
               ^ Cannot perform arithmetic operation because undefined [1] is not a number.
References:
[LIB] static/v0.72.0/flowlib/core.js:532:     get(key: K): V | void;
                                                               ^ [1]
Run Code Online (Sandbox Code Playgroud)

我也尝试过:

const m:Map<string, number> = new Map();

m.set('value', 5);

console.log(m.get('value') * 5)
Run Code Online (Sandbox Code Playgroud)

但是我遇到了同样的错误

我相信这是因为flow认为值也可以是数字以外的其他值,因此我尝试使用严格的setter和getter(live demo)包装地图:

type MyMapType = {
    set: (key: string, value: number) => MyMapType,
    get: (key: string) => number
}; …
Run Code Online (Sandbox Code Playgroud)

dictionary flowtype es6-map

4
推荐指数
1
解决办法
1458
查看次数