 Selamat datang. Hai, semua. Hari ini, saya akan berkongsi tentang CSS Codesplating. Sebelum saya mulakan, saya akan memperkenalkan diri saya dulu. Saya adalah pembangunan dan pembangunan di Shopee. Saya rasa saya tidak perlu berkongsi begitu banyak tentang ini. Jadi, saya rasa ini adalah kali pertama saya berkongsi dengan seseorang dari Shopee untuk berkongsi tentang CSS Codesplating. Jadi, mungkin saya akan berkongsi dengan seseorang berkongsi tentang bagaimana kita menggunakan CSS dalam pilihan web kita. Jadi, apa yang kita gunakan adalah, kita gunakan Cess, modul Cess Codesplating. Dan kemudian kita gunakan webpack untuk menggantikan semua mereka menjadi satu file Cess Codesplating. Dan kemudian kita gunakan itu untuk pembangunan. Jadi, apa yang kita gunakan? Jadi, apa yang kita lihat di sisi lada, adalah, anda berada di Cess. Jadi, Cess adalah pengalaman CSS yang memperkenalkan kita untuk membuat fungsi dan menggunakan kebanyakan. Jadi, kita boleh menggunakan kebanyakan Cess Codesplating dengan jauh atau berkode yang lebih mudah. Jadi, seperti yang anda lihat di sini, anda boleh menyebabkan dan mengubah dan sebagainya. Dan kemudian anda akan menggunakan Cess Codesplating. Dan kemudian, kita gunakan modul Cess Codesplating. Jadi, lama lalu, apabila kita kecil, kita gunakan BAM, yang adalah Block Element Modifier untuk mengenai nama kelas kita. Tetapi, dalam kompleksan aplikasi kita, banyak orang bekerja di base kode. Dan kemudian, ia sangat susah untuk mengenai kompleksan. Seperti jika anda mempunyai kompleksan, dan nama terdapat lebih lama. Jadi, kita mempunyai modul Cess Codesplating kerana ia memperkenalkan kita daripada kelas yang unik untuk setiap element yang kita mahu menggunakan. Jadi, kita hanya perlu memastikan bahawa apabila anda mempunyai satu file Cess Codesplating, atau kita boleh mempunyai modul Cess Codesplating, kita memastikan bahawa semua nama kelas yang memperkenalkan kita adalah unik. Kemudian, dengan nama kelas yang kita membuat, dengan beberapa kelas, kita akan membuat nama kelas yang unik seluruh aplikasi. Jadi, kita tidak perlu memikirkan bagaimana untuk menulis nama kelas. Jadi, seperti yang anda lihat di sini, anda menulis nama kelas di lokala, dan apabila anda memperkenalkan, anda akan menjadi sebuah identifier jibris. Apabila anda memperkenalkan file Cess Codesplating, anda dapat mempunyai apa yang sebelah dan seterusnya, dan anda akan memperkenalkannya sendiri. Jadi, dengan dua nama untuk kita yang membantu kita menulis file Cess Codesplating, dan kemudian kita hanya menggunakan webpack dengan beberapa plug-ins. Mereka akan menghubungi semuanya bersama dan memperkenalkan semua kode kita menjadi satu file Cess Codesplating. Kerana itu membantu kita dan itu menolong banyak... Jadi, kita menulis file Cess Codesplating untuk setiap kode yang kita mempunyai. Jadi, jika anda ingin memperkenalkan semua mereka, kita mempunyai banyak kode dan memperkenalkan semua mereka sekejap, seperti banyak kelas. Jadi, kita memperkenalkan kelas webpack plug-in. Kita memperkenalkan kelas webpack plug-in dan kita memperkenalkan dan ia akan memperkenalkan semuanya menjadi satu file Cess Codesplating. Jadi, kita memperkenalkan banyak kelas webpack plug-in. Jadi, ia memperkenalkan semuanya. Jadi... Baiklah, How Big is Shoppy. Jadi, jika anda meminta seseorang dari perniagaan perniagaan perniagaan, mereka akan menunjukkan nombor. Tetapi, jika anda meminta perniagaan, How Big is Shoppy? Macam mana? Jadi, ia seperti... Di rappel kita, terakhir, sekejap lalu, apabila saya memperkenalkan ini, kita mempunyai 1,000 file Cess Codesplating dan lebih dari 60 kelas kelas Cess Codesplating. Itu banyak. Dan nombor bergerak. Semua orang menulis banyak kelas setiap hari. Dan di total, jika anda dapat semuanya dalam satu file, ia adalah 500 kilobyte. Jadi, saya tidak pasti anda semua mempunyai idea berapa besar 500 kilobyte. Bagaimana anda mempunyai? Jadi, ia seharusnya hanya satu maksud MP3 file Cess Codesplating. Jadi, dengan network 4G, anda hanya memperkenalkan ini dalam 10 saat dengan cepat. Tapi jika 3G, 1, 2 saat, 1, 2, dan kelas 4 itu selesai. Jadi, tetapi, bagaimana anda menggunakan 3G sekarang? Seperti Singapura, 3G dan semuanya mudah. Tapi kemudian, Shopee memperkenalkan kelas 4G, dan ada seluruh kelas besar, terutama mereka memperkenalkan network 3G. Jadi, kelas 4G adalah sedikit kecil. Jadi, ini adalah sebuah tepung untuk memperkenalkan semua ini kelas 4G. Tapi kemudian, kelas 4G, hanya disebabkan kelas 2G yang kita perlu memperkenalkan kelas 4G? Bagus. Bagaimana anda memperkenalkan ini? Jadi, saya lebih memperkenalkan kelas 4G daripada kelas 4G. Jadi, saya memperkenalkan kelas 4G banyak. Jadi, ada sesiapa yang memperkenalkan kelas 4G? Atau, saya boleh menunjukkan bagaimana anda memperkenalkan. Jadi, bagaimana anda memperkenalkan kelas 1G? Dan anda memperkenalkan, akan menunggu. Oh, tunggu, tunggu, tunggu. Ya, anda memerkenalkan kelas 4G dan anda memperkenalkan element kelas 4G. Oh, saya... whoops. Okey. Jadi, ada sebuah tepung. Jadi, sebuah tepung adalah anda dapat melihat kelas 4G pada bagaimana sebuah tepung. Jadi, jika anda melihat di sini, ia menunjukkan anda apa yang berlaku apabila sebuah tepung mencari semua tepung. Ada banyak kelas 4G. Tunggu. Tunggu. Bukan sebuah tepung. Seperti kelas 4G. Apa kelas 4G yang diperkenalkan dan sebagainya. Baiklah. Kemudian anda dapat memilih kelas 4G dan CPU memperkenalkan. Seperti memperkenalkan kelas 4G untuk memperkenalkan bagaimana kelas 4G adalah kelas 4G. Jadi, anda melihat di sini. Ini seperti timpang kelas 4G yang diperkenalkan. Dan ia dipakar dengan kelas 3G dan kelas 6G memperkenalkan kelas 4G. Dan jika anda melihat di sini di sebuah tepung ia adalah kelas 500KB kelas 4G. Jadi, ia memperkenalkan kelas 4G untuk memperkenalkan dan memperkenalkan. Jadi, seperti 2 sekitar seperti 1,2 untuk memperkenalkan dan kelas 1,2 untuk memperkenalkan. Jadi, apa yang memperkenalkan? Jadi, jika anda mempelajari bagaimana bagaimana bagaimana bagaimana bagaimana kelas 4G. Ini seperti seperti ia喔 ia adalah sebahagian jika anda mengalihkan pindahan perawatan. Jadi, apabila perawatan meledakkan pindahan anda, ia melihat terhadap link dan akan berkata, saya perlu memperkenalkan kelas CSS. Dan kemudian perawatan akan memperkenalkan kelas CSS. Jadi apabila kelas CSS diperkenalkan, perawatan akan memulainya untuk membaca file CSS seperti meletakkannya. Jadi, media dan istimewa tanpa pindah syntex dan jika file CSS memulainya seperti error syntex Kita hanya berhenti di sana, tetapi selepas itu, dengan semua faham, setelah mencari segala file CSS, browser akan membuat model object CSS, hanya seperti model documenter object. Jadi dengan ini, browser akan mengambil masa untuk membuat model object CSS, kemudian dengan itu, browser akan menggunakan ini dengan dom dan cuba menggunakan layar untuk html. Jadi jika file ini besar, masa yang lebih lama untuk digunakan. Selepas digunakan, lebih lama untuk menerima file ini. Dan jika file CSS terlalu kompleks, anda akan mengambil masa lebih lama untuk mencari segala file yang sebenarnya yang anda perlukan. Dan kemudian mencari ke html. Jadi itu saja. Jadi apabila tidak. Selepas itu, ada yang lain. Jadi biar saya menunjukkan anda. Ini adalah sebuah panggilan. Anda perlu menggunakan ini sehingga anda pergi ke panggilan lebih banyak. Selepas itu, kemudian ada sebuah panggilan. Jadi apa yang panggilan berlaku adalah, ia akan beritahu anda, ia akan beritahu anda, untuk panggilan dari file CSS, bagaimanapun ia digunakan sekarang, pada saat ini untuk menerima panggilan ini di deskripsi anda. Jadi jika anda lihat, sekarang kita ada file ini menerima dan sebenarnya, sebenarnya kita menggunakan, apa, 60%? Dan kemudian ia juga beritahu anda, bagaimanapun panggilan ini digunakan, bagaimanapun ia tidak digunakan. Jadi, jadi apabila, pada panggilan ini, 92% itu, 500 kilobyte tidak digunakan di rumah. Jadi, wow, anda menerima banyak masa untuk menerima panggilan anda dan kemudian anda menggunakan, dan kemudian sebenarnya, 92% itu tidak digunakan. Itu sangat berlaku dari panggilan dan kerja. Jadi mari saya melakukan sumber mengapa panggilan yang terlalu besar dengan file CSS yang kami ada, adalah masalah untuk kami. Jadi pertama, pertama, ia hanya menerima kerana panggilan ini besar. Pada panggilan network, ia akan mengambil lebih lama dan ia akan mengambil masa untuk menerima panggilan CSS. Pada panggilan CPU anda, ia mungkin lebih cepat atau lebih rendah. Dan kemudian, setelah semua perkara ini, anda akan mempunyai banyak panggilan yang tidak digunakan, hanya seperti, apa yang diberitahu saya untuk membuat semua perkara ini dan anda tidak menggunakan mereka. Jadi, bagaimana kita harus mengubah panggilan ini? Jadi, ia menjadi sebab ia bukan panggilan CSS-nya. Ia adalah panggilan Front-end yang mengubah panggilan ini. Kita ada panggilan ini sebelumnya dan kita mengubahnya untuk javascript. Panggilan javascript kita merupakan lebih tinggi daripada CSS dan kita ada panggilan ini sebelumnya dan kita tahu bagaimana untuk mengubahnya. Ini adalah panggilan kode. Jadi, panggilan panggilan kode adalah anda mengubah panggilan kode untuk mengubah panggilan kode dan anda mengubah mereka apabila anda sebenarnya membutuh panggilan. Jadi, ada beberapa cara untuk dibuat yang adalah anda mengubah panggilan berdasarkan panggilan, bermaksud anda mengobak homepage anda tidak perlu mengubah panggilan dari panggilan checkout atau panggilan produk, atau anda mengubah mereka pada panggilan panggilan jadi apabila anda berada di panggilan yang berbeda anda tidak perlu mengubah panggilan dari panggilan lain. URL dan secara kedua, kita juga boleh melakukannya dengan menggunakan seksyensi bermakna pakaian anda seperti pakaian yang sangat lama seperti mobil, pakaian anda sangat kecil dan ada banyak seksyensi di bawah itu di atas pakaian yang tidak digunakan anda tidak perlu memasukkan kode untuk mereka, ia hanya apabila anda meletakkan kemudian anda memasukkan informasi, jadi itu pakaian yang tidak digunakan anda tidak perlu memasukkan kode yang tidak digunakan pada saatnya jadi apa yang anda lihat di sini di deskripsi adalah apabila anda melihat pakaian yang digunakan, ia disebabkan pakaian yang digunakan yang saya akan membuat untuk webpack, memuatkan kita menulis sebuah syinteks seperti untuk menyebabkan mereka, untuk beritahu mereka sekarang dengan pakaian ini, apa yang anda memerlukan ia akan membuat kepada pakaian yang separa, pakaian yang separa tidak digunakan dalam pakaian ini jadi kita boleh membuat ini untuk JavaScript dan sebenarnya kita boleh membuatnya sama untuk CSS jadi ingat, sekarang saya menyebabkan, kita menggunakan plugin text untuk menggunakan semuanya, semua CSS yang kita ada dan kemudian membuatnya ke satu file CSS jadi kita periksa semua pilihan yang kita dapat tapi tidak ada banyak yang kita boleh lakukan daripada itu kemudian kemudian kemudian, ada versi baru webpack kita mengubah webpack ke version 4 dan apabila kita melihat plugin webpack ini, ia beritahu kita ada versi baru dari plugin ini jadi anda harus menggunakan plugin CSS yang baru jadi kita hanya mengikuti guidelines dan membuat semuanya jika anda menyebabkan saya untuk beritahu anda ada apa-apa magic yang akan kita lakukan untuk melakukan pilihan code sebenarnya tidak, kita hanya mengikuti guide jadi kita mempunyai kita mempunyai contohnya dan memperkenalkan ke perlukan kita dari Readme dan itu saja jadi apa yang berbeza tentang plugin ini dan versi old1 adalah bahawa plugin baru memperkenalkan ia lebih kencang bahawa ia memperkenalkan satu file CSS dengan satu file JavaScript sebelumnya, ia akan menyebabkan semuanya ke satu file CSS tapi plugin ini lebih kencang jadi kita hanya memperkenalkan plugin dan ia hanya bekerja untuk kita jadi biar saya menunjukkan keputusan ini jadi sekarang jika anda melihat kembali pada file CSS ia memperkenalkan 20ms untuk diperkenalkan sehingga dengan kecuali network 3G dan 6x slowdown dari CPU dan jika anda melihat pilihan code ia lebih jika ada banyak masih ada beberapa file CSS yang tidak digunakan tapi sebenarnya file ini lebih kecil sekarang jadi ada selalu beberapa file CSS yang tidak digunakan kerana ada beberapa kecuali kecuali kecuali bahawa tidak diunakan pada saatnya daripada keadawan kekaraan tidak diperkenalkan atau menggunakan staf ada bug. So, the first bug we have is some styles were broken when the user goes to like this particular page from another page. So, from page X to page Y. Oh, some styles in page Y was broken. And the weird thing is if you just directly goes to page Y, everything looks nice. It's just that it's broken when user goes from page X to page Y. It just only works this way when you go that it on the other way it doesn't. It's like it's weird that we never encountered this kind of scenario ever before when we were like, why is it? So, let me give you guys like a quick quiz or something. So, like look at this HTML right here. You have two styles sheets and applying class to full with the first one is a color green, second one is blue. So, does anyone knows what's the color of like the hello world? Anyone says green? Blue? Okay. Wow. Yes, you're right. It's blue. So, yeah, I guess you guys know, right? Because in the header, page 2000 comes after page 1. So, because the specificity is the same, right? So, orders matter. So, when you look at the head, page 2 comes after page 1. So, page 2 will be applied and it's blue. So, yeah. So, we go from like page 1 to page 2, we look at the head and we see it's page 1 and then page 2. But then if you go the other way, oh wait, no, not this one. But if you go the other way round from page 2 to page 1, we look at the head element, it's actually page 2 first and then page 1. And then you will become green, right? Because the order is different right now. So, why is this happening to us? Why? So, if... Okay. So, we go under the hood of the mini CSS Extract Plugin and how it does. So, you don't get scared by all this JavaScript code. Okay, what you need to know is that when you import styles right down there, when you import the plugin itself will transform to something similar to like ensure this CSS files exist in our application. And what that ensure does is that it will go through the head and see whether this CSS files being downloaded. If it's being downloaded, okay, it's all good. If it's not, you just append a link tag on the head element and that's it. Okay. So, that's the reason why the order of the link tag is different. Ya, it's all because of that. Because when you go from page 1, you make sure that page 1 style is there. And then you go to page 2, make sure page 2 style is there. So, you put page 2 after page 1. But if you navigate in a different order, page 2 first and then page 1, then the order of the link tag on the head element is different. And then turns from blue to green. So, after knowing this, the only solution that we can come up with is to add specificity to make our CSS time got to be more specific. Okay. So, question number 2. So, can anyone tell me like what colour of the Hello World B right now? Like you have class A, class B. B is green, A is blue. But then in the class names, in the style sheet, you rotate the other way round. So, anyone say it's green? Anyone say it's blue? Oh, yes. So, you guys know, the classes in the class attribute doesn't matter. It's only the orders that matter. So, welcome to part of the problem that we encounter. So, sometimes it's not just because of this. Like sometimes it's not so straightforward that we just apply a class element to make it more specific. Sometimes it happens in a very weird way. So, we have this react component. So, if you guys don't know about react, it's okay. Let me explain it in a very simple way, which is this component takes in a class name and then you apply it to the diff. Wait, let me go for my mouse. Yeah. So, it's a component takes in a class name so that you add a class name with a default class name. So, like providing you a way to override the styles and that's it. And then local in this component, you use CSS modules that apply a style to this component. So, what happen when this code being bundled by webpack, like after some webpack magic, is that it will ensure that this files and then you will get the name, the actual class names of being transform and then you will just apply here. So, meaning when you write something like this, class name, like you create this component, custom component with a class B, for example, what you get is this code. So, this is the CSS modules, the one that's being used internally and this one is the one that supposedly to modify the class of this component. And, yeah, again, we have the same problem. Because they are written in different files, they could be coming from different files and because they are all specify just one class names, so the CSS specificity is the same, it's just one at the class name. So, all this matters right now again. So, sometimes it's, you see green, sometimes you see blue. So, and what makes the matter more complicated is that right now at this point, because this class name is sort of generated by our build tool, we don't even know how to override this. Like if it's a normal class name, we just write dot C A E 4 4 3 6 E dot class B and then you have like higher specificity. But right now we don't know how to override it and we like search online and we found a secret, secret dirty hack, which is to do class B dot class B. So, we don't encourage, but this like increases the class specificity and it applies like overwrite the color to green. So, yeah, black magic. So, problem 2 is a very specific problem. I won't cover much on it because it's related to something we do. It's more on a JavaScript site. It's not really CSS related. It's what it's called a server-side rendering. So, we do serve, we use some node servers to render our application and then serve it to the users. And when we switch to CSS code splitting, it just, we will change the plugin and then it just breaks our server-side rendering code. A short story is that because if you remember this code where we say like intro CSS, it's using a lot of browser API like document.create element name and stuff like that, which doesn't exist in the server. So, that's why it's breaking. And yeah, we had our way to work around this and if you encounter similar problems, feel free to come to talk to me afterwards if you like. Yeah, basically that's it. Thank you.