如何解决Webpack开发服务器随顺风缓慢地在CSS更改上编译
我正在使用webpack,顺风和postcss。我在很多地方都看到人们说postcss比libsass快,但对我来说它的工作要慢得多。
在libsass中,如果我对一个scss文件进行更改,它将在大约40毫秒内编译。使用我的webpack设置在运行开发服务器时,每次进行CSS更改都会花费1000ms-1500ms。我知道这并不激烈,但是当我习惯于近乎即时更新第二台显示器时,这足以惹恼我。
我认为问题是我的Webpack设置。我的主要入口是index.tsx
。首先,在此文件中,我正在导入CSS,因此最终会得到:
- bundle.js
- bundle.css
每当我进行更改时,都必须重新编译所有内容,而顺风css本身只有几mb,所以我想这就是为什么它很慢。
如果我对小型自定义css进行了更改,则必须重新编译所有js和未更改的顺风css。
所以理想情况下,我想要的是输出以下文件:
- bundle.js-从index.ts引用的所有ts文件
- bundle.css-如果从javascript中引用了任何CSS,它将进入此处
- tailwind.css-这是编译后的顺风样式
- main.css-这只是我自己的样式,由于文件相对较小,应该可以非常快速地编译
我从index.tsx
中删除了css导入,并使用了以下配置:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
'bundle': './src/index.tsx','tailwind': './src/css/tailwind.css','main': './src/css/main.css',},mode: 'development',devtool: 'inline-source-map',plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',}),],module: {
rules: [
{
test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/,{
test: /\.css$/,use: [
{
loader: MiniCssExtractPlugin.loader,options: {
// // only enable hot in development
hmr: process.env.NODE_ENV === 'development',// // if hmr does not work,this is a forceful method.
// reloadAll: true,}
},{
loader: 'css-loader',options: {
importLoaders: 1,{
loader: 'postcss-loader'
}
],resolve: {
extensions: ['.tsx','.ts','.js','.jsx'],output: {
filename: '[name].js',path: path.resolve(__dirname,'dist'),devServer: {
contentBase: './dist',port: 3366,hot: true,writeToDisk: true
},};
这确实输出了我提到的所有我想要的文件,但是它也输出了不需要的main.js
和tailwind.js
文件。
在运行devserver的情况下对main.css
进行更改时,所有内容都会重新生成,而不仅仅是这个文件。这样做的话,最初的构建是相同的,而更新后的第二个构建则要快200毫秒左右,但仍与使用libsass的性能相差甚远。
我该怎么做才能编辑main.css
,仅此部分就可以快速构建和构建?
解决方法
对于Tailwind2,拆分技术可能不再起作用https://github.com/tailwindlabs/tailwindcss/issues/2544
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。