Javascript 如何在开发环境中提高Web包性能?
如何提高网页包的构建时间。目前我正在打包大约150个文件。大约需要15秒(这太长了)。在“优化块资产”过程中,大部分时间都被消耗掉了,这大约需要10秒。任何方法都可以将此速度降低到最多3-4秒 或者如何禁用网页包中的优化步骤。我没有明确使用任何配置来缩小/丑化 这是我目前使用的配置::Javascript 如何在开发环境中提高Web包性能?,javascript,reactjs,webpack,Javascript,Reactjs,Webpack,如何提高网页包的构建时间。目前我正在打包大约150个文件。大约需要15秒(这太长了)。在“优化块资产”过程中,大部分时间都被消耗掉了,这大约需要10秒。任何方法都可以将此速度降低到最多3-4秒 或者如何禁用网页包中的优化步骤。我没有明确使用任何配置来缩小/丑化 这是我目前使用的配置:: module.exports = { context: __dirname, entry: './js/main.js', target: 'web', module: { loaders: [
module.exports = {
context: __dirname,
entry: './js/main.js',
target: 'web',
module: {
loaders: [
{ test: /text!/, loader: 'raw-loader'},
{ test: /backbone/, loader: 'imports-loader?this=>window' },
{ test: /marionette/, loader: 'imports-loader?this=>window' },
{ test: /sprintf/, loader: 'script-loader' },
{ test: /\.css$/, loader: "style!css" },
{ test: /\.scss$/, loader: 'style!css!sass' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
alias: {
'text': 'raw'
}
},
output: {
filename: 'bundle.js',
library: 'require',
libraryTarget: 'this'
},
resolve: {
alias: alias,
root: path.join(__dirname, 'node_modules'),
extensions: ['', '.js', '.jsx']
},
externals: {
jquery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'root.jQuery': 'jquery',
'Backbone': 'backbone',
'_': 'underscore',
'Marionette': 'marionette',
'sprintf': 'sprintf'
})
],
devtool: 'source-map'
};
提前感谢您的帮助。您可以对构建进行一些优化 首先,实际上,您正在通过jsx加载程序解析
node\u模块中的所有文件。您想排除它们
loaders: [{
test: /\.js$/,
loader: 'jsx-loader?harmony',
exclude: /node_modules/, // <---
}]
Webpack提供了许多开发工具
:
您正在使用devtools:“源代码映射”
我改为devtools:“廉价评估源代码映射”
,区块资产优化从4500ms变为306ms,使用devtools:“评估”
变为1ms
请注意,这两个文件都不支持生产,因为最终的.js文件太大,在我的例子中是13MB。这是stackoverflow的答案之一,它并不能解决我的问题::但它仍然是一个很好的读物。
config.entry = {
app: './js/main.js',
vendor: ['react', 'moment', 'react-router', /* etc. all the "big" libs */],
};
config.output = {
filename: '[name].js', /* will create app.js & vendor.js */
};
config.plugins = [
/* ... */
new webpack.optimize.CommonsChunkPlugin(
/* chunkName= */"vendor",
/* filename= */"vendor.bundle.js"
),
];