Chi tiết bài viết

GetIns

Webpack series (ep2) - CSS Splitting - Tách css trong Webpack

Code splitting là gì?

Như cái tên của nó. Nó cho phép chung ta chia nhỏ code ra và chỉ thật tải và execute khi cần đến. Một ví dụ đơn giản là chúng ta sử dụng thư viện select2 cho dự án, thật ra bản thân select2 là 1 library khá nặng và đương nhiên đa phần các page trong dự án của bạn ko cần đến nó, chỉ một vài trang cần và Webpack sẽ detect được khi nào bạn cần và sẽ tách nó ra 1 file riêng để khi nào cần thì gọi. Cái goal ở đây là ngoài việc chúng ta kiếm soát được việc quản lý library thì bên cạnh đó perfomance cũng được cải thiện ở browser thấy 1 thì ở mobile sự cải thiện sẽ rõ rệt hơn rất nhiều vì trên mobile phần cứng đa phần bị giới hạn hơn so với máy tính.

Các loại splitting

Có 3 loại splitting gồm:

CSS Splitting

Để bundle file css bằng css thì chúng ta cũng chỉ cần import vào file .js giống như cách import 1 module bình thường.

Ví dụ
Chúng ta add bootstrap vào file index.js
npm install bootstrap --save-dev

Sau đó add vào file index.js

//index.js
import 'bootstrap/dist/css/bootstrap.css';

Cài đặt css-loader and style-loader
npm install --save-dev css-loader style-loader

Update file webpack.config.js

 entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }

Nào run webpack để chạy. Sau khi chạy bạn sẽ thấy cái lỗi này.

loi

Lý do là bootstrap import những file như .eot,.svg,.ttf...

loi

Có hai lỗi xảy ra ở đây là webpack không có loader cho file và loader cho url nên tới cái chỗ require file font và require cái gì svg gì trên url như trong hình nên webpack nó không bundle được.

loi

Thì cộng đồng webpack có rất nhiều bộ loader cho các thể loại file như babel, typescript, coffescript, vue,... nên chúng ta cần gì cứ install loader đó vào. Còn cái nào chưa có (chắc cũng ít ^^) thì các bạn có thể viết tham khảo ở đây để viết một loader/plugin cho webpack. Viết đi mình sẽ xài thử và star cho hehe.

Quay lại chuyện css splitting. Giờ chúng ta install 2 loader là url-loader và file-loadervào

npm i --save-dev file-loader url-loader

Sau khi install xong chúng ta update lại file webpack.config.js

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [{
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    }
}

Giờ chúng ta chạy lệnh webpack để run nhé.

ngon het loi


Hình như trên là bundle thành công ngon lành. Update file index.html xíu để test cái bootstrap.

<html>

<head>head>

<body>
    <button class="btn btn-success">Bootstrap buttonbutton>
    <script src="./bundle.js">script>
body>

html>

Ok ngon lành (cái button dính css của bootstrap rồi)

ngon lanh


Thì sau khi bundle nó sẽ tạo ra 2 file là bundle.js và 1 file .svg. Thì .svg chứa bộ icon của bootstrap thôi. Để ý file bundle.js thì webpack sẽ include luôn css của bootstrap trong file bundle.js luôn. Và sau khi script loaded xong thì nó sẽ inject cái đống css này vào tag