- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我从几个开始就用 Webpack 编译我的 JS 和 SASS。在此之前,我使用 GULP for 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({})
]
},
};
那么,为什么编译需要这么长时间,我可以做些什么来改进它?谢谢!
最佳答案
一点建议:
排除 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。
关于Webpack 编译很慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55901104/
是否有任何库或框架旨在促进从另一种成熟的编程语言中构建项目? 在 C++、java 等编程语言中指定逻辑、集合和复杂规则非常容易,但在 Makefile 中完成这些事情似乎是一场艰苦的战斗。我还没有深
我有这段代码可以用 clang 编译得很好(即使使用 -Weverything),但是 gcc 会发出错误。 #include #include #include using namespace
我有以下 block 头文件 BKE_mesh.h: /* Connectivity data */ typedef struct IndexNode { struct IndexNode *
我在我的一个项目中遇到了一个奇怪的问题。我的代码库依赖于一个外部库,其中包含一个名为 Dataset 的类. Dataset类私有(private)继承自 std::vector (其中 Sample
当使用 gcc、g++ 或 make 在终端中编译一个小型 C 或 C++ 项目时,我收到以下错误: /tmp/ccG1caGi.o: In function `main': main.c:(.tex
我正在尝试从 CVS 为 Windows 上的 Emacs 23.1.50 编译 CEDET,但在“第 6 步:打开 EDE...”时出现错误:“defvar:作为变量的符号值是无效的:cedet-m
我正在(重新)学习编程,我从 C 开始。我的 IDE(如果我可以这么说)是 Windows7 上的 cygwin(32 位)和 Visual-Studio 2010。我总是编译我用 gcc (cygw
我喜欢在模板类中使用本地类来执行类似“static if”的构造。但是我遇到了 gcc 4.8 不想编译我的代码的问题。但是 4.7 可以。 这个例子: #include #include #in
我有一个项目,必须仅使用 java 1.4 进行编译。但我计划使用mockito 编写一些单元测试。我想要一种在 pom 中指定的方法,以便 src/main/java 使用 jdk 1.4 编译,但
我想了解 PHP 编译过程是如何工作的。 假设我有一个名为funcs.php 的文件并且这个文件有三个函数,如果我include 或require 它,所有的在文件加载期间编译三个函数?或者源代码会被
编译工具链 我们写程序的时候用的都是集成开发环境 (IDE: Integrated Development Environment),集成开发环境可以极大地方便我们程序员编写程序,但是配置起来
当我编写一些 Scala 代码时,在尝试编译代码时收到一条奇怪的错误消息。我将代码分解为一个更简单的代码(从语义的角度来看这完全没有意义,但仍然显示了错误)。 scala> :paste // Ent
我正在编译一个 SCSS 文件,它似乎删除了我的评论。我可以使用什么命令来保留所有评论? >SASS input.scss output.css 我在 SCSS 中看到两种类型的注释。 // Comm
这是我的代码: #include typedef struct { const char *description; float value; int age; } swag
当您编译 grails war 时,我知道 .groovy 代码被编译为字节码类文件,但我不明白容器(例如 tomcat)如何在请求 GSP 时知道如何编译它们。容器了解 GSP 吗?安装在服务器上的
我正在努力将多个文件编译成一个通用程序。我收到一个错误: undefined reference to 'pi' 这是我的代码和 Makefile 的框架。我做错了什么?谢谢! 文件:calcPi.c
我尝试使用 LD_PRELOAD 来 Hook sprintf function ,所以我将打印到缓冲区的结果: #define _GNU_SOURCE #include #include int
我正在寻找最简单的方法来自动将 CoffeeScript 重新编译为 JS。 阅读documentation但仍然很难得到我想要的东西。 我需要它来监视文件夹 src/ 中的任何 *.coffee 文
我想使用定制waveformjs 。我发现this on SO但是,我不知道如何编译/安装波形来开始。我从 GitHub 克隆它并进行了更改,但是我不知道如何将其转换为 .js 文件。 最佳答案 为了
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我是一名优秀的程序员,十分优秀!