个人中心
gpt4 book ai didi

javascript - 如何通过Webpack的import语句将CSS提取到Critical.css样式表中？

转载 作者：行者123 更新时间：2023-11-28 19:24:12 25 4
gpt4 key购买 nike

背景

我们的Web应用程序遵循基于组件的设计模式，每个组件都包含一个模板，Sass部分和JavaScript模块，如下所示：

components/action_button/_action_button.html.erb
                        /_action_button.scss
                        /action_button.js


JavaScript模块 import用于组件的Sass部分，并且模板通过Rails呈现。 Webpack配置了许多加载器和插件，以编译样式并将每个输入点的CSS提取（通过 mini-css-extract-plugin）到独立样式表中，例如： 

home.js => home.js, home.css
search.js => search.js, search.css


组件根据使用情况 import进入入口点（例如，如果 action_button位于“ home”上，则将其呈现在视图中的某个位置，并在 import '~/components/action_button/action_button.js';中声明 home.js。

问题

为了改善页面加载体验，我们手动将一些选定的Sass组件部分 @import放入 critical.scss入口点，然后将输出的CSS内联到文档的 <head>中，并异步加载完整的样式表。

理想情况下，我们希望动态地执行此操作，而我想到的一种方法是通过 import语句表示组件的重要性。也许使用自定义加载程序？：- 

import 'critical-loader!~/components/action_button/action_button.js';


问题是我对Webpack加载器的工作方式一无所知。我本质上希望它保留所有现有规则，但是将提取的CSS从Sass部分中的 import重定向到其中。

有谁知道现有的解决方案，或者对这样的问题从哪里开始有任何想法？

最佳答案

您可以使用MiniCssExtractPlugin，这样当您在js文件中导入css文件时，webpack便会提取到css文件中。下面是我的配置

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

process.traceDeprecation = true;

module.exports = {
    entry: {
        admin: "./React/js/App/Modules/Admin/admin.js",
        client: "./React/js/App/Modules/Client/client.js",
        login: "./React/js/EntryPoint/Modules/Admin/Account/Login/Login.js",
        password: "./React/js/EntryPoint/Modules/Admin/Account/Password/Password.js",
        manageaccount: "./React/js/EntryPoint/Modules/Admin/Account/Index.js",
        categories: "./React/js/EntryPoint/Modules/Admin/Categories/Categories.js",
        tag: "./React/js/EntryPoint/Modules/Admin/Tag/Tag.js",
        post: "./React/js/EntryPoint/Modules/Admin/Post/Post.js",
        comment: "./React/js/EntryPoint/Modules/Admin/Comment/Comment.js",
        portal: "./React/js/EntryPoint/Modules/Admin/Portal/PortalIndex.js",
        ClientIndex: "./React/js/EntryPoint/Modules/Client/Index/ClientIndex.js",
        adminSettings: "./React/js/EntryPoint/Modules/Admin/Settings/Settings.js",
        socialLinks: "./React/js/EntryPoint/Modules/Shared/SocialLinks.js"
    },
    output: {
        path: path.resolve(__dirname, "wwwroot/dist"),
        filename: "[name].js",
        publicPath: "/dist/"
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: 'all',
                uglifyOptions: {
                    compress: true,
                    output: null
                }
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    safe: true,
                    discardComments: {
                        removeAll: true,
                    },
                },
            })
        ]
    },
    plugins: [
        new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /jsx$/),
        new webpack.LoaderOptionsPlugin({
            options: {}
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Popper: ['popper.js', 'default']
        }),
        new CompressionPlugin({
            test: /\.(js|css)/
        }),
        new UglifyJsPlugin(),
        new WebpackShellPlugin({
            onBuildStart: ['echo "Starting postcss command"'],
            onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
        })
    ],
    resolve: {
        modules: [
            path.resolve('./React/js/App'),
            path.resolve('./React/js/App/Modules/Client'),
            path.resolve('./React/js/App/Modules/Adnmin'),
            path.resolve('./node_modules')
        ]
    },
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }
};

关于javascript - 如何通过Webpack的import语句将CSS提取到Critical.css样式表中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56685817/

25 4 0
文章推荐： ios - iphone:键盘没有隐藏
文章推荐： python - 我如何在 Pandas 中按月内的第 n 个工作日分组？
文章推荐： python - 复杂查询的设计模式
文章推荐： python - 在 Python 中，有没有办法以编程方式更改 hidraw 设备上的 CAPS LOCK/NUM LOCK/SCROLL LOCK 状态
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com