Sobre el Autor
Can, un desarrollador front-end de Ctrip, actualmente se dedica al desarrollo de miniprogramas y tiene un gran interés en la tecnología de compilación y empaquetado y en soluciones multiplataforma de miniprogramas.
I. Descripción general
En la actualidad, el pequeño programa de nuestro equipo se desarrolla utilizando el marco React de la solución cross-end de Taro. Según la solución de estilo existente, se generará una gran cantidad de código de estilo redundante después de la compilación y el empaquetado, lo que representa una gran proporción del producto compilado. del proyecto.
Después de analizar el código de estilo compilado, encontramos que el código redundante se refleja principalmente en dos aspectos:
En los archivos de estilo del proyecto, los selectores padre-hijo se utilizan ampliamente como ámbitos para el aislamiento de estilos, y aparece una gran cantidad de nombres de clases redundantes después de la compilación. Por ejemplo, en el siguiente código de estilo de archivo SCSS, .box .item se repite tres veces de forma redundante después de la compilación.
// 编译前代码
.box {
.item {
.item1 {}
.item2 {}
.item3 {}
.item4 {}
}
}
// 编译后代码
.box .item .item1 {}
.box .item .item2 {}
.box .item .item3 {}
.box .item .item4 {}Una gran cantidad de valores de atributos se repiten de forma redundante en el código de estilo. Por ejemplo, el valor del atributo display: flex más utilizado puede tener cientos o miles de duplicados redundantes en el proyecto, y después de activar el complemento Autoprefixer para compatibilidad, display: flex se convertirá en display:-webkit-flex; display : -ms-flexbox;display:flex; hace que la redundancia de los valores de los atributos del archivo de estilo sea más seria.
En respuesta a los problemas anteriores encontrados por el subprograma de marco React del proyecto Taro, este artículo presentará una nueva solución de estilo. Esta solución adopta los requisitos gramaticales del esquema de estilo cssModules sin cambiar la experiencia de desarrollo existente y utiliza la conveniencia del complemento Taro para proporcionar las soluciones correspondientes, "adelgazando" así el producto. El archivo de estilo final se puede reducir entre un 50% y un 70%, lo que alivia aún más las limitaciones del tamaño del paquete oficial y facilita el rápido desarrollo empresarial.
2. Breve introducción a cssModules
El plan de estilo de este artículo aprende los principios básicos de cssModules para resolver conflictos de estilo y los mejora sobre esta base para lograr el propósito de reducir el tamaño de los archivos de estilo. Por lo tanto, antes de comprender formalmente esta solución, este artículo primero utiliza el código de ejemplo de la solución cssModules en el sitio web oficial de Taro como ejemplo para comprender brevemente sus requisitos y principios gramaticales.
2.1 Requisitos gramaticales
Después de habilitar cssModules en la configuración, de acuerdo con los requisitos de sintaxis, hay dos archivos index.module.scss e index.js en el proyecto Taro, cuyos códigos de archivo son los siguientes. De forma predeterminada, cssModules habilita la conversión parcial en modo personalizado. Sólo los archivos de estilo que contengan .module. en sus nombres de archivo serán convertidos por cssModules. En el siguiente archivo de estilo index.module.scss, normalmente utilizamos selectores de padres e hijos y selectores de clases. Sin embargo, en el archivo index.js, la asignación de nombre de clase ya no es una cadena, sino una determinada clave del objeto exportado por el archivo SCSS. Esta clave es el nombre del selector de clase en el archivo SCSS.
import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'
import styles from './index.module.scss'
export default class Index extends Component {
render() {
return (
<View className={styles.test}>
<Text className={styles.txt}>Hello world!</Text>
</View>
)
}
}.test {
color: red;
.txt {
font-size: 36px;
}
}2.2 Principio
Después de que el proyecto Taro active la configuración de cssModules, el cargador css que implementa la especificación cssModules se utilizará para procesar SCSS y otros archivos de estilo al compilar y empaquetar. Primero procesará el selector de clase en el archivo SCSS original, codificará el nombre de la clase para obtener un nuevo nombre de clase como index-module__test___Bm2J6, generará un nuevo código de estilo y lo enviará al index.wxss final, mientras guarda el nombre de clase original y hash La relación de mapeo del nuevo nombre de clase después del procesamiento. Luego, compilará el archivo SCSS original index.module.scss en un objeto de mapeo que exporta el nombre de clase original y el nuevo nombre de clase con hash. Cuando el archivo JS se está ejecutando, puede obtener el nuevo nombre de clase con hash a través del objeto de mapeo, lo que garantiza que el nombre de la clase del archivo no entre en conflicto con nombres similares de otros archivos de estilo, resolviendo así el problema del conflicto de estilo. El siguiente es un ejemplo de código compilado: estilos.test se convertirá en index-module__test___Bm2J6 en tiempo de ejecución.
// index.module.scss
export default ({"test":"index-module__test___Bm2J6","txt":"index-module__txt___nIysk"});// index.wxss
.index-module__test___Bm2J6 {
color: red;
}
.index-module__test___Bm2J6 .index-module__txt___nIysk {
font-size: 36rpx;
}3. Introducción al principio del esquema.
3.1 Principios básicos
3.1.1 Análisis del tamaño del archivo de estilo actual
Antes de presentar formalmente cómo el plan de este artículo es reducir el tamaño de los archivos de estilo, este artículo utiliza las siguientes dos reglas regulares para hacer coincidir los dos componentes principales ClassName y PropertyValue de todos los archivos de estilo en el producto empaquetado y realizar un análisis estadístico de Tamaño.
Nota: En este artículo, al igual que en el código CssRule .txt .tit {color: #red;}, ClassName se refiere a txt y tit, y PropertyValue se refiere a color:#red;.
const classNamePattern = /(?<=\.)[A-Za-z0-9\-_]+(?=\s|{|:)/g // 匹配 ClassName 如 .txt {color: #red;}中的txt
const cssPropertyPattern = /(?<=\{)[^}]+(?=})/g // 匹配PropertyValue, 如 .txt {color: #red;}中 中括号之间的所有内容 color: #red;La siguiente figura muestra el análisis del tamaño de la composición de los archivos de estilo de todo el proyecto de subprograma compilado y empaquetado. De esta figura, podemos encontrar que entre todos los archivos de estilo empaquetados y compilados por nuestro proyecto, ClassName ocupa aproximadamente una quinta parte del espacio, mientras que PropertyValue ocupa siete décimas partes del espacio. El resto del espacio puede ser el siguiente Espacios y pseudoclases existen y no se considerarán en este artículo.
3.1.2 Solución
De la sección anterior, podemos saber que hay dos partes principales del contenido principal de un archivo de estilo, una es ClassName y la otra es PropertyValue. El esquema de estilo de este artículo procesa estas dos partes por separado para lograr el objetivo de ahorrar Tamaño.
1) Reducir la longitud de ClassName
El núcleo es reemplazar el ClassName original con un ClassName más corto y único. Al mismo tiempo que resuelve conflictos de estilo, también ahorra tamaño al reducir la longitud de ClassName. Cuando usamos cssModules, generalmente como el código de ejemplo al presentar cssModules en el Capítulo 2, el ClassName se aplica mediante hash para garantizar la unicidad, pero la longitud del ClassName después del hash se vuelve más larga, lo que no es adecuado para nosotros. Objetivo para reducir el tamaño del código de estilo.
Esta solución comienza con el carácter más corto y lo aumenta gradualmente para generar un ClassName único para todo el proyecto, garantizando así la unicidad y manteniendo la longitud del ClassName lo más corta posible. Por ejemplo, el primer nombre de clase analizado se reemplaza por -a, el segundo nombre de clase analizado se reemplaza por -b, el nombre de clase analizado número 52 se reemplaza por -Z y el nombre de clase analizado número 53 se reemplaza por -aa. El - delante de ClassName se utiliza para evitar que los nombres de clases recién generados entren en conflicto con los nombres de clases no convertidos. Además, el ClassName recién generado debe cumplir con las reglas: este algoritmo de complemento primero toma un carácter en prevString y todos los caracteres posteriores pueden tomar cualquier carácter en charString.
const prevString = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' // 52个字符数
const charString = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_' // 64个字符数Algunas personas pueden preocuparse de que a medida que se declaran más y más ClassNames en todo el proyecto, los ClassNames generados incrementalmente serán cada vez más largos, lo que hará que el ClassName total sea demasiado largo. A través del algoritmo anterior, contando el - agregado al principio, cuando se agota el nombre de clase de tres caracteres, se pueden reemplazar 52 * 64 = 3328 ClassNames, y se necesitan 52 * 64 * 64 = 212992 para alcanzar los cuatro caracteres. longitud.nombredeclase. El ClassName recién generado no supera los cuatro caracteres, lo que puede satisfacer las necesidades de la mayoría de los proyectos. Antes de utilizar este esquema de estilo, puede buscar la magnitud del ClassName en su propio proyecto.
2) Reducir el valor de la propiedad
A través del análisis anterior, podemos encontrar que la parte que realmente ocupa el tamaño más grande del archivo de estilo es PropertyValue, por lo que reducir PropertyValue es el método central de este plan de estilo para ahorrar mucho tamaño. De hecho, muchos de los valores de atributos de estilo que utilizamos durante el desarrollo se repiten, como display:flex, el atributo de diseño más utilizado durante el desarrollo. Cada vez que se utiliza este atributo, es necesario escribir una nueva copia y, por razones de compatibilidad, el complemento Autoprefixer está habilitado, display:flex se convertirá en display:-webkit-flex;display:-ms-flexbox;display :flex;, lo que hace que el tamaño del archivo de estilo sea mayor. Este complemento reduce el PropertyValue reutilizando el PropertyValue tanto como sea posible.
Este complemento dividirá el PropertyValue de CssRule en el archivo de estilo que solo usa el selector de clases, y cada división generará un nuevo PropertyValue ClassName. Como se muestra en el siguiente código de muestra, solo el selector de clase CssRule txt se divide en dos nombres de clase PropertyValue de _a y _b. Si se usa el selector de solo clase CssRule para la división posterior, _a o _b se reutilizarán directamente si existe el mismo PropertyValue.
// 原代码
.txt { display: flex;flex: 1; }
// 处理后的代码
._a {display: -webkit-flex; display: -ms-flexbox;display: flex;}
._b {-webkit-flex: 1;-ms-flex: 1;flex: 1;}Los archivos js que utilizan el método de escritura de estilo cssModules también requieren el procesamiento de mapeo correspondiente. El complemento babel se utiliza para realizar el procesamiento de conversión durante la compilación para determinar la relación de referencia del archivo css y reemplazarlo. El código de muestra es el siguiente.
// 原代码
import styles from './index.module.scss'
Index = () => {
return <View className={styles.txt} />
}
// 处理后的代码
import './index.module.scss'
Index = () => {
return <View className="_a _b" />
}Este esquema de estilo divide el PropertyValue de CssRule que solo usa el selector de clase en un nuevo PropertyValue ClassName. El PropertyValue ClassName se puede reutilizar directamente dondequiera que se realice una división posterior, lo que reduce en gran medida el tamaño ocupado por PropertyValues repetidos y redundantes.
3) Proceso de procesamiento de complementos
Las dos secciones anteriores han introducido dos esquemas de reducción del tamaño del núcleo. Esta sección brinda un ejemplo más completo para presentar cómo este complemento utiliza los dos esquemas anteriores para procesar y transformar archivos de estilo y archivos JS durante la compilación. Existen principalmente los siguientes dos pasos.
El primer paso es dividir el PropertyValue para CssRule que solo usa el selector de clases. En el siguiente código de ejemplo, .box{display:flex} divide ._a {display: -webkit-flex;display: -ms-flexbox;display: flex;} , y cuando .item1` `.item2 se divide posteriormente, ._a se reutiliza directamente, lo que reduce la redundancia de la duplicación de PropertyValue.
El segundo paso es reemplazar directamente CssRule que no solo usa el selector de clases con un ClassName más corto y único a nivel mundial. En el siguiente código de ejemplo, .box .item2{color: red;}, el ClassName en el selector original se reemplaza directamente con el .-a .-b{ color: red;} más corto, y se agrega la relación de mapeo estilos = .{box: "_a -a", item1: "_a _b _c", item2: "_a _b _d -b"} y reemplazado en el momento de la compilación.
// 原代码
import React from 'react'
import styles from './index.module.scss'
export default Index = () => {
return <View className={styles.box}>
<View className={styles.item1}>item1</View>
<View className={styles.item2}>item2</View>
</View>
}
// 处理后的代码
import React from 'react'
import './index.module.scss'
// styles = {box: "_a -a", item1: "_a _b _c", item2: "_a _b _d -b"}
export default Index = () => {
return <View className="_a -a">
<View className="_a _b _c">item1</View>
<View className="_a _b _d -b">item2</View>
</View>
}// 原index.module.scss代码
.box {
display: flex;
}
.item1{
display: flex;
font-size: 32px;
color: red;
}
.item2{
display: flex;
font-size: 32px;
color: grey;
}
.box .item2{
color: red;
}
// 处理后index.module.scss代码
._a {display: -webkit-flex;display: -ms-flexbox;display: flex;}
._b {font-size: 32px;}
._c {color: red;}
._d {color: grey;}
.-a .-b{
color: red;
}3.2 Cuestiones que necesitan atención
3.2.1 Las propiedades del objeto de estilos no son compatibles con el tiempo de ejecución
En la solución cssModules, el objeto de archivo de estilo introducido en el archivo JS admite propiedades calculadas en tiempo de ejecución, como se muestra en el siguiente ejemplo. Esto se debe a que el archivo JS empaquetado contiene una copia de los datos del objeto de la relación de mapeo entre el ClassName original y el nuevo ClassName con hash. Por lo tanto, los estilos también pueden asignar atributos en tiempo de ejecución, pero este método de procesamiento causará el tamaño del archivo js. para aumentar.
import styles from './index.module.scss'
const Index = () => {
return <View className={styles['t' + 'xt']} />
}Para garantizar que el tamaño del proyecto sea lo más pequeño posible, esta solución no utiliza cssModules. Esta solución reemplazará directamente el CLassName original y el nuevo ClassName después de dividir el PropertyValue durante la compilación, como reemplazar directamente className={styles.txt} con className="_a _b".
Por lo tanto, el objeto de estilos en esta solución no admite el atributo txt calculado en tiempo de ejecución en el código de muestra anterior. Si necesita ajustar dinámicamente el estilo, hay dos soluciones: una es usar estilos en línea directamente. La segunda es escribir un nuevo ClassName en lugar de concatenarlo, como className={value? estilos.txt1: estilos.txt2}}.
3.2.2 Sólo los selectores de clase no se basan en el orden para determinar la prioridad.
En lo anterior, se mencionó que solo se usará el selector de clase CssRule para reutilizar el PropertyValue ClassName existente tanto como sea posible. Sin embargo, este tipo de reutilización tiene fallas y hará que el orden de ClassName no cumpla con las expectativas. Como se muestra en el siguiente código, en términos generales, pensamos que el color del título debería ser gris.
// 原代码
import styles from './index.module.scss'
const Index = () => {
return <View className={styles.tit1 + ' ' + styles.tit2}>标题</View>
}
// 处理后的代码
import styles from './index.module.scss'
const Index = () => {
return <View className={'_a' + ' ' + '_b'}>标题</View>
}// 原代码
.other { color: green; color:red; }
.tit1 { color: red; }
.tit2 { color: green; }
// 处理后的代码
._a {color:green;}
._b {color:red;}Sin embargo, después de que este complemento reutiliza PropertyValue, ._b{color:red;} aparece detrás de ._a{color:green;}. En este momento, el color del título se vuelve rojo, lo que puede no ser adecuado para el desarrollo. o expectativas.
Por lo tanto, debe tenerse en cuenta que al escribir ClassName solo con el selector de clases CssRule, no puede confiar en el orden de los selectores de clases para determinar la prioridad. Puede usar selectores hermanos para aumentar la prioridad, de modo que no se vea afectada por el orden. El siguiente ejemplo de código. Esto asegurará que el color del título sea verde.
// 兄弟选择器来提高优先级
.other { color: green; color:red; }
.tit1 { color: red; }
.tit1.tit2 { color: green; }4. Guía del usuario
4.1 Uso
4.1.1 Instalar complementos
Este esquema de estilo está integrado en el complemento Taro taro-plugin-split-class. Instale este complemento. Consulte el código fuente en el almacén taro-plugin-split-class .
npm install -D taro-plugin-split-class4.1.2 Desactivar la función cssModules
En el archivo de configuración de Taro, haga mini.posecss.cssModules.enable = false y asegúrese de que la función cssModules esté desactivada, como se muestra en el siguiente código.
// config/index.js
{
mini: {
postcss: {
cssModules: {
enable: false
}
}
}
}4.1.3 Configurar este complemento
En el archivo de configuración de Taro, agregue este complemento taro-plugin-split-class a la configuración de complementos. Este complemento admite la configuración de la lista blanca de conversión de nombres de clase (la función de implementación es similar a: global, consulte 2.4) classNameWhite, por ejemplo, no es necesario convertir la fuente de iconos de uso común.
plugins: [
['taro-plugin-split-class', {
classNameWhite: ["iconfont", /^ifont-/]
}]
]4.2 Requisitos gramaticales
a. El nombre del archivo de estilo debe terminar en .module.xxx, como index.module.scss, para que este complemento pueda convertir y procesar el archivo de estilo.
b. En el archivo JS, introduzca el archivo de estilo como un objeto y use el nombre de la clase como clave del objeto. Como se muestra en el siguiente código, utilice className={styles.box} en lugar de className="box", donde box es el nombre de la clase definida en el archivo de estilo.
// 如下
import styles from './index.module.scss'
<View className={styles.box}></View>
// 而不是
import './index.module.scss'
<View className="box"></View>C. Esta solución admite todos los selectores, incluidos los selectores de padres e hijos, los selectores de pseudoclases, los selectores de hermanos, etc. Pero utilice selectores de solo clase para ubicar elementos tanto como sea posible. Esto facilitará que el complemento reutilice PropertyValue tanto como sea posible para reducir mejor el Tamaño. Esta solución resuelve el problema de los conflictos de nombres de clases, por lo que los desarrolladores no necesitan preocuparse por los conflictos de nombres de clases causados por nombres de clases simples.
// 如下仅类选择器的CssRule
.box {
display: flex;
flex-direction: column;
align-items: center;
}
.tit {
display: flex;
font-size: 40px;
color: red;
}
// 而不是父子选择器
.box {
display: flex;
flex-direction: column;
align-items: center;
.tit {
display: flex;
font-size: 40px;
color: red;
}
}D. El nombre de la clase especial permanece sin cambios.
A veces queremos que algún nombre de clase especial permanezca sin cambios. En el archivo JS, es suficiente no tomar el nombre de la clase de los estilos, como se muestra en el código adicional a continuación.
import styles from './index.module.scss'
<View className={styles.tit + ' extra'}>标题</View>Pero en el archivo de estilo, todos los ClassNames se dividirán o comprimirán de forma predeterminada. En el siguiente ejemplo de código, extra se procesa como -a.
// 原类名
.extra.tit {
color: blue;
}
// 新类名
.-a.-b {
color: blue;
}Por lo tanto, se necesita un identificador especial para que el complemento sepa que no necesita procesar ClasName. Esta solución proporciona una solución :global similar a cssModules. Hay dos formas de usarla. Una es: global(.extra). El nombre de la clase ajustada no será reemplazado.
// 编译前
:global(.extra).tit {
color: blue;
}
// 编译后
.extra.-a {
color: blue;
}En segundo lugar, si comienza con: global, todos los nombres de clases posteriores no serán reemplazados.
// 编译前
:global .extra1 .extra2 { color: red;}
// 编译后
.extra1 .extra2 { color: red;}4.3 Visualización del efecto del embalaje
4.3.1 Entorno de desarrollo
Después de usar este complemento, los nombres de clases originales se reemplazarán o dividirán en nombres de clases más cortos y nuevos. La legibilidad del nuevo nombre de clase procesado de esta manera es muy pobre y los desarrolladores no pueden localizar fácilmente el código del nombre de clase original. Por lo tanto, en el entorno de desarrollo, se agregará [carpeta_nombre de archivo_nombre de clase original] antes de nombres de clases más cortos y nuevos. La información relacionada con el nombre de la clase original se conserva para facilitar a los desarrolladores encontrar el nombre de la clase original. Como se muestra en el código siguiente, el nombre de la clase original es box. Después de dividirlo y acortarlo con el complemento, el nuevo nombre de la clase es _a _g _h -c. Index_indes-module_box se agrega delante del nuevo nombre de la clase. El nombre de clase completo mostrado es index_index.-module_box _a _g _h -c.
4.3.2 Entorno de producción
En un entorno de producción, no es necesario considerar la legibilidad del nuevo nombre de clase, por lo que el nombre de clase se reemplazará completamente con el nuevo nombre de clase. Como se muestra en el código siguiente, el cuadro se reemplaza directamente con _a _g _h -c.
5. Análisis del programa
5.1 Resultados prácticos
5.1.1 Comparación antes y después de la transformación de página
Después de utilizar este plan de estilo para transformar una página, la comparación de tamaños antes y después de la transformación es la siguiente. Se puede encontrar que el archivo de estilo se redujo en 44 KB, el tamaño se redujo en casi un 70% y el archivo JS aumentó en 2 kb.
| archivo js | archivo de estilo | suma | |
| antes de usar | 54kb | 63kb | 117kb |
| Después de su uso | 56kb | 19kb | 75kb |
El tamaño del archivo después de la compilación antes de su uso es el que se muestra a continuación:
El tamaño del archivo compilado después de su uso es el que se muestra a continuación:
5.1.2 Comparación horizontal de páginas reconstruidas
Recientemente, nuestro proyecto ha reconstruido dos páginas grandes de detalles de pedidos. Esta sección toma el código reconstruido de estas dos páginas como ejemplo para analizar el tamaño antes y después de la compilación y empaquetado y hacer una comparación horizontal.
Ordena la siguiente tabla:
| Número de caracteres de codificación de estilo | Tamaño real después del embalaje | |
| Detalles del pedido página 1 que no utiliza este plan de estilo | 3620 | 86kb |
| Detalles del pedido página 2 usando este plan de estilo | 6615 |
73kb |
Las estructuras de organización del código de las dos páginas de detalles del pedido son similares, por lo que se compararán horizontalmente. La cantidad de caracteres de codificación de estilo para la página 1 de detalles del pedido que no adopta este esquema de estilo es 3620 y el tamaño real después del empaquetado es 86 kb. Si la página 2 de detalles del pedido no utiliza este plan de estilo y el número de caracteres de codificación de estilo antes del empaquetado es 6615, se espera que el tamaño real después del empaquetado sea 6615/3620 \* 86kb = 157kb, pero la página de detalles del pedido usa este estilo plan y el tamaño real después del empaquetado es 73kb, en comparación con 157kb, el tamaño se reduce en aproximadamente un 50%.
La siguiente es la página 1 de detalles del pedido que no utiliza este plan de estilo. Los archivos de estilo en este directorio incluyen 50 archivos de estilo con un total de 3620 caracteres. El tamaño del archivo de estilo empaquetado final es de 86 kb.
La siguiente es la página 2 de detalles del pedido que utiliza este plan de estilo. Los archivos de estilo en este directorio incluyen 96 archivos de estilo con un total de 6615 caracteres. El tamaño final del archivo de estilo empaquetado es 73 kb.
5.2 Análisis del efecto de reducción de tamaño
Los dos efectos prácticos anteriores, en comparación con el esquema de escritura de estilo original en el proyecto, después de usar este esquema, el tamaño se ahorra principalmente en los siguientes tres aspectos.
R. Esta solución resuelve el problema de los conflictos de estilo. Al escribir código de estilo, ya no puede utilizar selectores padre-hijo para aislar el alcance del estilo, lo que reduce la redundancia de los selectores ancestros. Como se muestra a continuación en el código de estilo que usa el preprocesador sass, podemos encontrar que en el código compilado final, .box .item es redundante tres veces, y si continuamos agregando un nodo hoja .item en .box .item *,. box .item será redundante una vez. Por lo tanto, el uso de selectores padre-hijo en el proyecto para aislar ámbitos generará una gran cantidad de selectores ancestros redundantes.
// 编译前代码
.box {
.item {
.item1 {}
.item2 {}
.item3 {}
.item4 {}
}
}
// 编译后代码
.box .item .item1 {}
.box .item .item2 {}
.box .item .item3 {}
.box .item .item4 {}b. Acorte directamente el ClassName original a un ClassName más corto, reduciendo directamente el número de caracteres. Este método es más directo, pero el efecto de optimización es limitado.
C. Esta solución divide CssRule solo con el selector de clase en el archivo de estilo tanto como sea posible, genera y reutiliza PropertyValue ClassName y reduce la duplicación y redundancia de PropertyValue tanto como sea posible. Aunque el nombre de clase en el archivo JS se reemplaza con un nombre de clase más corto pero con más valor de propiedad, hay un cierto aumento de tamaño. Por ejemplo, en el efecto de práctica 1, el archivo JS ha crecido 2 KB después de la práctica. Pero en comparación con el efecto de reducción en el tamaño del archivo de estilo, es insignificante.
5.3 Análisis de crecimiento de tamaño
A medida que aumenta la cantidad de archivos de estilo, el tamaño de los archivos de estilo crecerá más lentamente para los proyectos que utilizan este plan de estilo. Esta solución requiere que solo se usen selectores de clases como método principal, y una pequeña cantidad de escenarios usan otros selectores como complemento para escribir código de estilo. A medida que hay cada vez más códigos de estilo en el proyecto, se generarán cada vez más PropertyValue CssRules reutilizables al dividir el selector de clases CssRule mediante el procesamiento de este complemento. En este momento, cuando se usa un nuevo selector CssRule de solo clase para usar un PropertyValue según sea necesario, la probabilidad de reutilización será mayor. Cada reutilización con una alta probabilidad ahorrará una parte del tamaño, lo que hará que la tasa de crecimiento del tamaño del archivo de estilo generado después de la compilación y empaquetado final se ralentice gradualmente.
6. Resumen
Para el subprograma de marco React del proyecto Taro, este artículo presenta una nueva solución de estilo, que está integrada en un complemento de Taro, que puede aliviar la redundancia del código de estilo con menos cambios en la experiencia de desarrollo existente.
Este esquema de estilo aprende de las reglas y principios de sintaxis del esquema de estilo cssModules para resolver el problema de los conflictos de estilo. Sobre esta base, logra la reducción de tamaño desde dos aspectos: reducir la longitud de ClassName y reducir PropertyValue. El efecto final de adelgazamiento el archivo de estilo puede alcanzar entre el 50% y el 70%. Esto ayudará a aliviar las limitaciones del tamaño del paquete oficial y facilitará el rápido desarrollo del negocio.
Siete, recomendación del complemento vscode
La sintaxis básica de esta solución es consistente con cssModules, por lo que puede usar directamente el complemento cssModules existente para mejorar la experiencia de desarrollo.
7.1 Complemento CSS-Modules-transform
Este complemento admite la conversión rápida del código JS existente del proyecto a la sintaxis cssModules y el reemplazo con un solo clic del uso del nombre de clase original con la sintaxis de uso del nombre de clase requerida por el plan de costos, como classname="a1" => nombredeclase={estilos.a1}. Cabe señalar que el reemplazo con un clic solo admite sintaxis que no es en tiempo de ejecución, y la sintaxis en tiempo de ejecución aún debe reemplazarse manualmente. Puede mejorar eficazmente la eficiencia de conversión de las soluciones de estilo existentes.
7.2 Complemento de módulos CSS
El complemento Módulos CSS admite el autocompletado y la definición de tipos para mejorar la experiencia de desarrollo.
8. Referencia del artículo
[Lectura recomendada]
Práctica de optimización de la experiencia de desarrollo de proyectos iOS del billete de tren Ctrip
Práctica de configuración de ingeniería de Ctrip Air Ticket App KMM iOS
Ctrip boleto aéreo cross-end Kotlin DSL marco de base de datos SQLlin
Cuenta pública “Tecnología Ctrip”
Compartir, comunicar, crecer