- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们在尝试迁移到 webpack 项目时遇到了困难,该项目目前基于 requirejs。
在尝试使用 webpack 复制当前项目状态几周后,我们遇到了性能问题。
我们使用的是 webpack 版本 2.3.3。
目前我们有 240 个模块和 58 个 block 。
我们的问题是,当我们以watch模式启动webpack进行开发(或使用webpack-dev-server)时,每次修改文件时,我们都必须等待大约10秒。
这是我们的 webpack 开发配置:
{
context: path.resolve(__dirname),
entry: {
'app-std': [
'main',
'plugins/base-component',
'controllers/base-controller',
'widgets/base-widget',
'usertiming'
]
},
output: {
path: path.resolve('./dist/js'),
filename: '[name].js',
publicPath: '/js/'
},
resolve: {
modules: ['public/js', 'node_modules'],
alias: {
'uuid': path.resolve(__dirname, 'public/vendor/uuid.js/dist/uuid.core.js'),
'jsLogger': 'js-logger',
'jqueryCookie': 'js-cookie',
'jqueryValidation': path.resolve(__dirname, 'node_modules/jquery-validation/dist/jquery.validate.js'),
'jQueryXDomainRequest': 'jquery-ajax-transport-xdomainrequest',
'dust': 'dustjs-linkedin',
'dust.core': 'dustjs-linkedin',
'dustHelpers': 'dustjs-helpers',
'bootstrapSelect': 'bootstrap-select',
'bootstrapDropDown': path.resolve(__dirname, 'node_modules/bootstrap/js/dropdown.js')
}
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
options: {
presets: [['es2015', { modules: false }]/*, 'react'*/],
plugins: ['syntax-dynamic-import'],
cacheDirectory: true
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('local')
}
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
devtool: 'cheap-module-eval-source-map',
devServer = {
https: true,
port: 7070,
host: '0.0.0.0',
headers: { 'Access-Control-Allow-Origin': '*' }
},
stats: {
chunks: true,
chunkModules: true,
modules: true
}
}
这些是初始构建的统计数据:
6185ms building modules
65ms sealing
2ms optimizing
1ms basic module optimization
12ms module optimization
7906ms advanced module optimization
1ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
12ms module reviving
2ms module order optimization
3ms module id optimization
2ms chunk reviving
6ms chunk order optimization
9ms chunk id optimization
22ms hashing
0ms module assets processing
214ms chunk assets processing
2ms additional chunk assets processing
1ms recording
0ms additional asset processing
0ms chunk asset optimization
2ms asset optimization
192ms emitting
如果我们修改其中一个模块,webpack 会触发重建,我们会得到以下数字:
38ms building modules
38ms sealing
1ms optimizing
1ms basic module optimization
1ms module optimization
7470ms advanced module optimization
1ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
3ms module reviving
0ms module order optimization
4ms module id optimization
3ms chunk reviving
1ms chunk order optimization
4ms chunk id optimization
14ms hashing
0ms module assets processing
1ms chunk assets processing
1ms additional chunk assets processing
0ms recording
0ms additional asset processing
1ms chunk asset optimization
0ms asset optimization
1ms emitting
在这两种情况下,高级模块优化步骤消耗了大部分时间。我不明白为什么在非生产版本中有高级优化,而且我也不知道为什么要花这么多时间。
我想知道是否有任何方法可以更深入地研究这个耗时的步骤,以及是否可以在开发模式下禁用该优化。
谢谢!
最佳答案
经过一些(更多)挖掘,我们最终得到了一个欺骗 webpack 的hack。在我们的系统中,我们有数十个异步加载的 block 和几个分散的循环依赖项,这导致很多 block 有很多父项。因此,主要耗时的任务是执行内置的RemoveParentModulesPlugin。由于模块链很长,许多 block 有许多父级,因此该插件需要做额外的工作。
我们的解决方案是(仅在开发模式下)添加一个新的自定义插件,该插件删除每个模块的父模块,因为在本地计算机中运行应用程序时我们不需要这种优化。
这是我们自定义插件的代码,以防将来有人发现它有用:
function AvoidParentModulesOptimizationPlugin() {}
AvoidParentModulesOptimizationPlugin.prototype.apply = function(compiler) {
compiler.plugin('compilation', function(compilation) {
compilation.plugin(["optimize-chunks-basic", "optimize-extracted-chunks-basic"], function(chunks) {
// We cheat webpack to think there are no parents to optimize
// so recompilation time is quite low on development mode
chunks.forEach(function(chunk) {
chunk.parents = [];
});
});
});
};
关于webpack - webpack 构建时间缓慢(高级模块优化),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43341878/
对于相当简单的表结构,即。人员、标准和 PersonCriteria(组合表),我现在设置了一个查询,选择所有符合所有选定条件的人。 此时查询本身看起来像这样: SELECT p.PersonID
我在使用高级 SQL 查询时遇到了一些问题,而且我已经有很长时间没有使用 SQL 数据库了。我们使用 MySQL。 背景: 我们将使用两个表: “交易表” 表:expire_history +----
我找不到错误。也许你可以帮助我:我的代码如下: var data = {"product":[{"config":[{"id":"1","price":"100","sku":"1054879634
我有一个列表列表的列表(最后一个列表并不重要) data = [[[['f', 0], 'C'], [['X', 0], 'X']], [[['s', 1], 'X'], [['X', 0], 'X'
我想准备将使用表格的 session ,并在另一个网站上将新项目添加到 session 中。 默认.cs string[] tab = new string[100];
我知道有一些像: Bubble sort Insertion sort Shell sort Merge sort Heapsort Quicksort Bucket sort Radix sort
像https://softwareengineering.stackexchange.com/questions/150616/return-random-list-item-by-its-weigh
我正在开发一个 posix 脚本 (Linux),它获取一个网页,将内容存储在一个变量中并查找字符串“SUCCESS”。如果找到字符串,则不执行循环内容,如果没有找到字符串,则反复执行循环,直到找到为
我不确定这个问题是否已在其他地方得到解答,而且我似乎无法通过谷歌找到任何不是“Hello World”示例的内容...我正在使用 C# .NET 4.0 进行编码。 我正在尝试开发一个控制台应用程序,
我创建了一个房地产网站,我希望按照列表的最后更新和完整性对列表进行排序。所以我一直想弄清楚如何结合最近更新的列表按mysql中的字段(completion_score)进行排序。完成分数将采用 1
只所以称为“高级”用法,是因为我连switch的最基础的用法都还没有掌握,so,接下来讲的其实还是它的基础用法! switch 语句和具有同样表达式的一系列的 IF 语句相似。很多场合下需要把同一
之前的章节中,我们学习了 XML DOM,并使用了 XML DOM 的 getElementsByTagName() 方法从 XML 文档中取回数据 本章节我们将继续学习其它重要的 XML DOM
我对我尝试编写的 SQL 查询有疑问。 我需要从数据库中查询数据。该数据库除其他外,还包括以下 3 个字段: Account_ID #, Date_Created, Time_Created 我需要编
我正在使用非常激进的视频压缩,例如 -crf 51 .我将其用于“艺术”效果,因此从普通视频压缩的角度来看,我所做的可能没有意义。 到目前为止,我只使用了非常基本的压缩控制,只使用了 -crf。或 -
我真的在学习 lucene 和 ravendb 上的绳索 - 我在 Raven 中有以下文档 - { "InternalEvent": { "Desec": "MachineInfo: 1
通常 grep 命令用于显示包含指定模式的行。有没有办法在包含指定模式的行之前和之后显示 n 行? 这可以使用awk来实现吗? 最佳答案 是的,使用 grep -B num1 -A num2 在匹配之
我搜索了高低,并尝试了几个小时来操纵似乎适合的各种其他查询,但我没有快乐。 我试图加入 Microsoft SQL Server 2005 中的几个表,其中一个示例是: Company Table (
我有一个如下所示的 XML 文件: teacher1Name
我将如何在 CF 中创建此语句? 显然括号不起作用,但说明了我想要完成的工作。这是什么语法? 编辑: 好的,我了解如何使用 EQ 等等。我有点匆忙地发布了这个。我的问题是关于括号。以这种方式使用它们
主要问题:我需要使用具体对象结构对任何对象结构进行类型扩展。 我在 VS Code 中测试的默认值。 我的解决方案: /** @template A @typedef {{[Ki in keyof A
我是一名优秀的程序员,十分优秀!