Webpack:需要很长时间才能构建
问题描述:
我的反应应用程序中存在webpack构建时间问题。一切都很好,但需要很长时间。Webpack:需要很长时间才能构建
即使我只更改CSS重建的JavaScript文件?
此外,CSS编译需要的时间比我认为的要长(如果我错了,请纠正我)?
我正在运行一个带有16gb Ram的Core i7,构建花费了大约一分钟,在开发过程中变得非常烦人,因为它只是一行更改,您必须等待一分钟才能看到您的更改在浏览器中?
这是错误的方法?
const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const path = require('path');
const webpack = require('webpack');
const BUILD_DIR = path.resolve(__dirname, '../dist');
const APP_DIR = path.resolve(__dirname, 'src/');
const config = {
devtool: 'source-map',
entry: {
"ehcp-coordinator": [
APP_DIR + '/index.js'
]
},
output: {
path: `${BUILD_DIR}/js/`,
filename: '[name].js',
chunkFilename: '[name]-chunk.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'es2017', 'react', 'stage-0'],
plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties', 'syntax-dynamic-import',
["import", {"libraryName": "antd", "style": false}]]
}
}
}, {
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}]
})
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': "'development'"
}),
new webpack.optimize.UglifyJsPlugin({
'sourceMap': 'source-map'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: '[name].js',
minChunks(module, count) {
var context = module.context;
return context && context.indexOf('node_modules') >= 0;
}
}),
new ExtractTextPlugin("../css/[name].css")
],
resolve: {
modules: [
path.resolve('./'),
path.resolve('./node_modules'),
],
extensions: ['.js', '.json']
}
};
module.exports = config;
答
正如在评论中讨论,在这里你可以做,以加快建设最明显的变化:
-
UglifyJsPlugin
和ExtractTextPlugin
是它们对你的编译时间的影响而言非常沉重,而实际上并没有在开发中带来许多实际利益。在您的配置脚本中检查process.env.NODE_ENV
,并根据您是否正在制作生成版本来启用/禁用它们。- 取代
ExtractTestPlugin
,您可以在开发中使用style-loader
将CSS注入HTML页面的头部。当页面加载时,这可能会导致无格式内容(FOUC)的短暂闪现,但构建起来要快得多。
- 取代
- 如果你没有准备好,用
webpack-dev-server
而不仅仅是运行的WebPack在计时模式 - 使用开发服务器编译内存中的文件,而不是将其保存到磁盘,从而进一步降低了编译时间的发展。- 这确实意味着当您想将文件写入磁盘时,您必须手动运行构建,但无论如何您都需要切换到生产配置。
- 不知道这对性能产生任何影响,但你的配置的
resolve
部分不从有意义的默认值不同,你应该能而不引起任何问题,将其删除。
+0
谢谢,我会尝试在某个点的webpack-dev-server,我们运行我们使用nginx作为代理所以不知道,但其他人肯定会提高构建时间。 – Kal
我建议在生产中只使用'UglifyJsPlugin'和'ExtractTextPlugin' - 它们在编译时间上相当沉重。另外,我认为你可以完全删除配置文件中的“resolve”部分 - 它看起来与默认值没有多大区别。 –
大多数人往往要么有一个单独的开发和生产配置文件,要么(我的首选)在配置脚本中检查'process.env.NODE_ENV',以有条件地启用/禁用某些部分。 –
对不起忘了提及这是开发webpack配置不是prod构建一个。不过,为什么只有JS发生了变化才能构建CSS? – Kal