1

При сборке js и css получаю ошибку. Конечный CSS файл получается слишком большим (438кб), по сравнению с изначальным (16кб)

Вот прежупреждения которое после сборки появляется

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB). This can impact web performance. Assets: style.css (448 kB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance. Entrypoints: main (456 kB) bundle.js style.css

WARNING in webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/

Содержимое файла webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const NODE_ENV = process.env.NODE_ENV || "development";
const webpack = require("webpack");

const config = {
    entry: "./common.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename:"bundle.js"
    },
    // performance: {
    //  maxEntrypointSize:400000
    // },
    module: {
        rules: [
            {
                use:"babel-loader",
                test: /\.js$/,
            },
            {
                loader:ExtractTextPlugin.extract({
                    loader:"css-loader"
                    // options: {minimize:true}
                }),
                test: /\.css$/,

            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    {
                        loader:"url-loader"
                        // options:{ limit:40000 }
                    },
                    "image-webpack-loader"
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("style.css")
    ]
};
if (NODE_ENV == "production") {
    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false,
                drop_console:true,
                unsafe:true
            }
        })
    );
}
module.exports = config;

style.css содержит 900 строк кода. Ниже приведено несколько строк:

html, body {
    height: 100%;
}
html {
    font-size: 14px;
}
body {
    -webkit-font-smoothing:antialiased;
    font-family:  Helvetica , Arial, sans-serif;
    overflow-x: hidden;
}

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.background-img {
    background-image: url("../img/office.jpg");
    background-size: cover;
    width: 100%;
    height: 600px;
    position: relative;
    z-index: 0;
}
10
  • Возможно какие-то импорт из node_modules идёт? Неплохо было бы увидеть Ваш css. 24 фев 2018 в 8:37
  • @ДмитрийМирошниченко да шас покажу свой css
    – Demon __
    24 фев 2018 в 9:10
  • @ДмитрийМирошниченко из node_modules ничего не идет
    – Demon __
    24 фев 2018 в 9:13
  • похоже что loader:"url-loader" превращяет background-image: url("../img/office.jpg"); в DataUrl и записывает ее прято в css файл. Попробуйте проверить это в инспекторе кода, проинспектировав .background-img. 24 фев 2018 в 10:13
  • @ДмитрийМирошниченко да вы были правы получается длинный файл внутри background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4Q имя слишком длинный я обрезал его и поставил суда всего треть часть его имени
    – Demon __
    24 фев 2018 в 11:02

1 ответ 1

0

Похоже что loader:"url-loader" превращяет background-image: url("../img/office.jpg"); в DataUrl и записывает ее прято в css файл. Попробуйте проверить это в инспекторе кода, проинспектировав .background-img

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.