我开始使用Webpack编译JS和SASS。在此之前，我使用GULP进行SASS，并且编译非常快。 使用相同的JS / SASS代码和Webpack，我的编译时间为... 6秒。非常慢
以下是编译后的日志消息（webpack -w），仅修改了SASS或仅修改了JS：
Hash: 0dd09b4f671dc58e7c36
Version: webpack 4.30.0
Time: 6319ms
Built at: 2019-04-29 11:58:43
Asset Size Chunks Chunk Names
css/admin.css 405 KiB admin [emitted] admin
css/app.css 253 KiB app [emitted] app
css/files/169356a469a7a7b5ab89187fa1aae785.otf 192 KiB [emitted]
css/files/2299ad0b3f63413f026dfec20c205b8f.gif 8.28 KiB [emitted]
css/files/2f99a85426a45e0c7f8707aae53af803.ttf 168 KiB [emitted]
css/files/31f15875975aab69085470aabbfec802.png 1.32 KiB [emitted]
css/files/3a80587b4415f8b0b21cdeb8e380a86c.eot 168 KiB [emitted]
css/files/59409df6e088d74fd4220b43a12b85f8.otf 188 KiB [emitted]
css/files/84abe14c9756256a4b91300ba3e4ec62.ttf 167 KiB [emitted]
css/files/84b76dee6b27b795e89e3649078a11c2.png 1.33 KiB [emitted]
css/files/b2918f7cd1f06a16aecf9124e47dba13.woff 68.3 KiB [emitted]
css/files/be5e6c1cc25bfbd6d92647d56aae28d4.eot 168 KiB [emitted]
css/files/d9d2d0b1308cb694aa8116915592e2a9.png 280 bytes [emitted]
css/files/ff372e76c393da9b47fda7fd860c181d.woff 67.6 KiB [emitted]
js/admin.js 3.4 MiB admin [emitted] admin
js/app.js 4.35 MiB app [emitted] app
+ 33 hidden assets
Entrypoint app = css/app.css js/app.js
Entrypoint admin = css/admin.css js/admin.js
[./src/sass/style.scss] 39 bytes {app} [built]
+ 105 hidden modules
Child mini-css-extract-plugin ../../../pierre gomba/www/jobin/node_modules/css-loader/index.js??ref--7-1!../../../pierre gomba/www/jobin/node_modules/postcss-loader/li b/index.js??ref--7-2!../../../pierre gomba/www/jobin/node_modules/sass-loader/lib/loader.js??ref--7-3!../../../pierre gomba/www/jobin/src/sass/style.scss:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js?!./node_modules/postcss-loader/lib/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/sass/style.scss] ./node_modules/cs s-loader??ref--7-1!./node_modules/postcss-loader/lib??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./src/sass/style.scss 756 KiB {mini-css-extract-plugi n} [built]
[./src/fonts/Raleway/Raleway-Bold.eot] 69 bytes {mini-css-extract-plugin} [built]
[./src/fonts/Raleway/Raleway-Bold.otf] 69 bytes {mini-css-extract-plugin} [built]
[./src/fonts/Raleway/Raleway-Bold.ttf] 69 bytes {mini-css-extract-plugin} [built]
[./src/fonts/Raleway/Raleway-Bold.woff] 70 bytes {mini-css-extract-plugin} [built]
[./src/fonts/Raleway/Raleway-Regular.eot] 69 bytes {mini-css-extract-plugin} [built]
[./src/fonts/Raleway/Raleway-Regular.otf] 69 bytes {mini-css-extract-plugin} [built]
[./src/fonts/Raleway/Raleway-Regular.ttf] 69 bytes {mini-css-extract-plugin} [built]
[./src/fonts/Raleway/Raleway-Regular.woff] 70 bytes {mini-css-extract-plugin} [built]
+ 7 hidden modules
还有我的webpack配置：
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
mode: 'development',
entry: {
app: [
'./src/js/app.js',
'./src/sass/style.scss',
],
admin: [
'./src/js/admin.js',
'./src/sass/admin.scss',
],
},
output: {
path: path.resolve(__dirname, './public/'),
filename: 'js/[name].js'
},
resolve: {
alias: {
'jquery': require.resolve('jquery'),
}
},
module: {
rules: [
{
test: /\.js/,
loader: 'babel-loader'
},
{
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
options: 'jQuery'
},
{
loader: 'expose-loader',
options: '$'
}
]
},
{
test : /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: true }
},
{
loader: 'postcss-loader',
options: { sourceMap: true }
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: true }
},
{
loader: 'postcss-loader',
options: { sourceMap: true }
},
{
loader: "sass-loader",
options: { sourceMap: true }
}
]
},
{
test: /.(png|jpg|gif|woff(2)?|eot|otf|ttf|svg)(\?[a-z0-9=\.]+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: 'css/files/[hash].[ext]',
publicPath: '..'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css"
})
],
optimization: {
minimize: true,
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
]
},
};
那么，为什么编译需要这么长时间，我该怎么做才能改善它？谢谢！
答案 0 :(得分：0)
一些建议：
排除node_modules文件夹，以便babel不会对其进行处理
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
第二步，在babel loader中使用它，它将缓存结果并且不会完全从头开始重新编译
loader: 'babel-loader?cacheDirectory'
如果您仍然需要加快速度，则有2种选择。第一种选择是使用webpack-dev-server。它会在不创建/ dist文件夹的情况下编译您的代码，也就是说它将从内存中存储和提供已编译的代码。
另一个选项（仅用于开发）以及以前的选项是在开发过程中不使用webpack。您可以在gulp中将sass编译为CSS。并且您可以提供浏览器ES6模块。现代浏览器非常了解它们。您只需要向他们提供类型模块
<script type="module" src="javascripts/main.js"></script>
main.js将是入口文件，其中包含导入。当然，您可以添加多个js入口点，因为从捆绑包的大小来看，您的代码非常繁琐。
所有的缩小和编译工作都用于生产，因此您可以在部署之前运行一次webpack。