Mặc dù bây giờ có một bản dựng đẹp được thiết lập, nhưng tất cả CSS đã đi đâu? . Mặc dù điều này có thể thuận tiện trong quá trình phát triển, nhưng nghe có vẻ không lý tưởng
Giải pháp hiện tại không cho phép lưu CSS vào bộ nhớ đệm. Bạn cũng có thể nhận Flash Nội dung chưa được tạo kiểu [FOUC]. FOUC xảy ra do trình duyệt mất một lúc để tải JavaScript và các kiểu sẽ chỉ được áp dụng sau đó. Việc tách CSS thành một tệp riêng sẽ tránh được sự cố bằng cách để trình duyệt quản lý riêng
Webpack cung cấp phương tiện để tạo các gói CSS riêng biệt bằng mini-css-extract-plugin [MCEP]. Nó có thể tổng hợp nhiều tệp CSS thành một. Vì lý do này, nó đi kèm với một trình tải xử lý quá trình trích xuất. Sau đó, plugin chọn kết quả được trình tải tổng hợp và phát ra một tệp riêng với kiểu dáng
Có thể nguy hiểm khi tải các kiểu nội tuyến bằng JavaScript trong quá trình sản xuất vì nó đại diện cho một vectơ tấn công. Kết xuất đường dẫn quan trọng bao hàm ý tưởng kết xuất CSS quan trọng với các kiểu nội tuyến trong tải trọng HTML ban đầu, cải thiện hiệu suất được cảm nhận của trang web. Trong các bối cảnh hạn chế, một lượng nhỏ CSS có thể là một tùy chọn khả thi để tăng tốc độ tải ban đầu do có ít yêu cầu hơn
extract-css-chunks-webpack-plugin là một giải pháp thay thế được cộng đồng duy trì cho mini-css-extract-plugin được thiết kế đặc biệt dành cho kết xuất phía máy chủ
Cài đặt plugin trước
npm add mini-css-extract-plugin -D
MiniCssExtractPlugin bao gồm một bộ tải, MiniCssExtractPlugin.loader đánh dấu tài sản sẽ được trích xuất. Sau đó, một plugin thực hiện công việc của nó dựa trên chú thích này
Thêm cấu hình như bên dưới
gói web. các bộ phận. js
const MiniCssExtractPlugin = require["mini-css-extract-plugin"];
exports.extractCSS = [{ options = {}, loaders = [] } = {}] => {
return {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options },
"css-loader",
].concat[loaders],
sideEffects: true,
},
],
},
plugins: [
new MiniCssExtractPlugin[{
filename: "[name].css",
}],
],
};
};
Trình giữ chỗ
const MiniCssExtractPlugin = require["mini-css-extract-plugin"];
exports.extractCSS = [{ options = {}, loaders = [] } = {}] => {
return {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options },
"css-loader",
].concat[loaders],
sideEffects: true,
},
],
},
plugins: [
new MiniCssExtractPlugin[{
filename: "[name].css",
}],
],
};
};
1 là cần thiết nếu bạn phân phối mã của mình dưới dạng gói và muốn sử dụng Tree Shaking để chống lại nó. Trong hầu hết các trường hợp sử dụng, bạn không phải lo lắng về việc đặt cờconst MiniCssExtractPlugin = require["mini-css-extract-plugin"]; exports.extractCSS = [{ options = {}, loaders = [] } = {}] => { return { module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options }, "css-loader", ].concat[loaders], sideEffects: true, }, ], }, plugins: [ new MiniCssExtractPlugin[{ filename: "[name].css", }], ], }; };
Nếu bạn muốn xuất tệp kết quả vào một thư mục cụ thể, bạn có thể làm điều đó bằng cách chuyển một đường dẫn. Ví dụ.2const MiniCssExtractPlugin = require["mini-css-extract-plugin"]; exports.extractCSS = [{ options = {}, loaders = [] } = {}] => { return { module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options }, "css-loader", ].concat[loaders], sideEffects: true, }, ], }, plugins: [ new MiniCssExtractPlugin[{ filename: "[name].css", }], ], }; };
Kết nối chức năng với cấu hình như bên dưới
gói web. cấu hình. js
const commonConfig = merge[[
...
]];
Nếu bạn đang sử dụng Mô-đun CSS, hãy nhớ chỉnh sửa3 như đã thảo luận trong chương Tải kiểu. Bạn có thể duy trì các thiết lập riêng biệt cho các Mô-đun CSS và CSS tiêu chuẩn để chúng được tải thông qua logic riêng biệtconst MiniCssExtractPlugin = require["mini-css-extract-plugin"]; exports.extractCSS = [{ options = {}, loaders = [] } = {}] => { return { module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options }, "css-loader", ].concat[loaders], sideEffects: true, }, ], }, plugins: [ new MiniCssExtractPlugin[{ filename: "[name].css", }], ], }; };
Sau khi chạy
const MiniCssExtractPlugin = require["mini-css-extract-plugin"];
exports.extractCSS = [{ options = {}, loaders = [] } = {}] => {
return {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options },
"css-loader",
].concat[loaders],
sideEffects: true,
},
],
},
plugins: [
new MiniCssExtractPlugin[{
filename: "[name].css",
}],
],
};
};
> [email protected] build webpack-demo
> wp --mode production
⬡ webpack: Build Finished
⬡ webpack: asset index.html 237 bytes [compared for emit]
asset main.js 136 bytes [compared for emit] [minimized] [name: main]
asset main.css 33 bytes [compared for emit] [name: main]
...
webpack 5.5.0 compiled successfully in 301 ms
Bây giờ kiểu dáng đã được đẩy vào một tệp CSS riêng biệt. Do đó, gói JavaScript đã trở nên nhỏ hơn một chút và bạn tránh được sự cố FOUC. Trình duyệt không phải đợi JavaScript tải để nhận thông tin về kiểu dáng. Thay vào đó, nó có thể xử lý CSS riêng biệt, tránh flash
Mặc dù đề cập đến việc tạo kiểu thông qua JavaScript và sau đó đóng gói là tùy chọn được đề xuất, nhưng vẫn có thể đạt được kết quả tương tự thông qua một
const MiniCssExtractPlugin = require["mini-css-extract-plugin"];
exports.extractCSS = [{ options = {}, loaders = [] } = {}] => {
return {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options },
"css-loader",
].concat[loaders],
sideEffects: true,
},
],
},
plugins: [
new MiniCssExtractPlugin[{
filename: "[name].css",
}],
],
};
};
Sau thay đổi này, bạn không cần phải tham khảo kiểu dáng từ mã ứng dụng của mình nữa. Tuy nhiên, theo cách tiếp cận này, bạn phải cẩn thận với thứ tự CSS
Nếu bạn muốn kiểm soát chặt chẽ thứ tự, bạn có thể thiết lập một mục CSS duy nhất và sau đó sử dụng
const MiniCssExtractPlugin = require["mini-css-extract-plugin"];
exports.extractCSS = [{ options = {}, loaders = [] } = {}] => {
return {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options },
"css-loader",
].concat[loaders],
sideEffects: true,
},
],
},
plugins: [
new MiniCssExtractPlugin[{
filename: "[name].css",
}],
],
};
};
const MiniCssExtractPlugin = require["mini-css-extract-plugin"];
exports.extractCSS = [{ options = {}, loaders = [] } = {}] => {
return {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options },
"css-loader",
].concat[loaders],
sideEffects: true,
},
],
},
plugins: [
new MiniCssExtractPlugin[{
filename: "[name].css",
}],
],
};
};
webpack-watched-glob-entries-plugin cung cấp một trình trợ giúp để đạt được điều tương tự. Như một phần thưởng, nó hỗ trợ chế độ xem của webpack, vì vậy khi bạn sửa đổi các mục nhập, webpack sẽ thông báo
Thiết lập hiện tại tách biệt kiểu dáng khỏi JavaScript một cách gọn gàng. Mặc dù kỹ thuật này có giá trị nhất với CSS, nhưng nó có thể được sử dụng để trích xuất bất kỳ loại mô-đun nào thành một tệp riêng biệt. Phần khó của MiniCssExtractPlugin liên quan đến thiết lập của nó, nhưng sự phức tạp có thể ẩn sau một sự trừu tượng