English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Prólogo
Con la globalización de Vue, ya hay muchos marcos de componentes de Vue que están cada vez más perfectos, desde los tempranos Element-UI a Vux, iView y otros proyectos de alta calidad cada vez más, utilizar Vue para construir el frente ya es una cosa de ingeniería, modularización y agilidad
En este contexto, creo que muchas personas elegirán el oficial Vue-Inicializar el plantilla del proyecto CLI, luego desarrollar y construir mediante la introducción de marcos y herramientas de componentes de terceros, y personalmente también recomiendo esta práctica. Pero Vue-El patrón de proyecto inicializado por cli es en realidad orientado a todos los desarrolladores, y en términos de compatibilidad habrá ciertas concesiones. Creo que mucha gente ya ha buscado artículos de optimización de construcción de webpack, pero muchos no son versiones muy antiguas o no son rigurosos
Este artículo espera encontrar un equilibrio entre la optimización de tiempo y el aumento del rendimiento de la construcción, es decir, gastar el menor tiempo, hacer la menor modificación al patrón oficial, y obtener el mayor aumento del rendimiento de la construcción
enfoque
las versiones anteriores de vue-cli y webpack2época, en línea con las siguientes configuraciones de optimización que se han difundido, pero en realidad la nueva versión de vue-cli y webpack3ya no es necesario
Para la nueva versión de vue-cli y webpack3，la siguiente configuración simple puede mejorar al menos2veces la velocidad de construcción
práctica
1、referencia a demanda
1.1Casi todos los marcos de componentes de terceros proporcionan formas de referencia a componentes a demanda, por ejemplo, utilizando iview, a través de complementosbabel-plugin-import Permite cargar componentes a demanda, reducir el tamaño de los archivos, solo hay que modificar el archivo .babelrc
npm install babel-plugin-import --save-dev
// .babelrc
{
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src"/components"
}]
}
1.2Luego, al importar componentes a demanda de esta manera, se puede reducir el tamaño
import { Button } from 'iview'
Vue.component('Table', Table)
2、habilitar la construcción de proyectos en multiprocesador con happypack
Después de instalar happypack, modificar /build/webpack.base.conf.js archivo
npm install happypack --save-dev
// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')}
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// Añadir el plugin HappyPack
plugins: [
new HappyPack({
id: 'happy-babel-js',
loaders: ['babel-loader?cacheDirectory=true],
threadPool: happyThreadPool,
)
]
// Modificar la introducción de loader
{
test: /\.js$/,
// loader: 'babel-loader',
loader: 'happypack/loader?id=happy-babel-js', // Añadir nuevo loader de construcción HappyPack
include: [resolve('src'), resolve('test')]
}
3、modificar source-configuración de map
3.1Primero modificar /config/index.js archivo
// /config/index.js Ambiente de desarrollo: devtool: 'eval' (velocidad más rápida) Ambiente de producción: productionSourceMap: false (cerrar source-map）
3.2Luego modificar /src/main.js archivo, desactivar la información de depuración del entorno de producción
// /src/main.js const isDebug_mode = process.env.NODE_ENV !== 'production' Vue.config.debug = isDebug_mode Vue.config.devtools = isDebug_mode Vue.config.productionTip = isDebug_mode
4、habilitar DllPlugin y DllReferencePlugin para precompilar archivos de biblioteca
Este es el paso más complejo y con el mejor efecto de mejora, el principio es compilar y empacar una vez los archivos de bibliotecas de terceros, y no es necesario compilar y empacar los archivos de bibliotecas de terceros en las construcciones futuras
4.1 Añadir build/webpack.dll.config.js archivo, y configura los módulos que necesitan ser DLLizados por separado
const path = require("path")
const webpack = require("webpack")
module.exports = {
// el array de módulos que deseas empacar
entry: {
vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
},
output: {
path: path.join(__dirname, '../static/js'), // Ubicación de salida de los archivos empaquetados después de la construcción
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
// Comprimir y empacar los archivos
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
)
]
}
4.2 En build/webpack.dev.conf.js y build/Añadir el plugin siguiente a webpack.prod.conf.js
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
)
4.3 En /Añadir comandos a package.json
"dll": "webpack --config ./build/webpack.dll.config.js"
4.4 En /Añadir la introducción de JS DLL a index.html (debe introducirse primero)
<script src="/static/js/vendor.dll.js"></script>
4.5 Ejecutar la construcción
npm run dll (este paso generará build/vendor-manifest.json y static/js/vendor.dll.js） npm run dev o npm run build
Apéndice
Después de completar los cuatro grandes pasos anteriores, hemos completado la implementación de vue-Optimización y mejora de la construcción del proyecto de plantilla CLI, aunque aún no se puede considerar simple, esta ya es la optimización más simple posible, y hay muchas más técnicas y trucos que no se han desplegado, porque pienso que una configuración de optimización excesiva no tiene mucho significado, sino que puede traer demasiada redundancia y complejidad al proyecto de ingeniería
La configuración real probada del efecto de construcción es desde el original13segundos se redujo a6segundos, el despliegue en caliente es de milisegundos
Lo más importante es, la configuración más simplificada, en el futuro vue-Después de que el cli y el webpack se actualicen a la nueva versión, también se puede configurar fácilmente para usarlos, después de configurar una vez, para restaurar la configuración solo necesita 5minutos, piense en lo que cuesta5minutos para modificar la configuración, y puede cambiar la construcción cada vez2más de una vez la velocidad de mejora, ¿no es un poco emocionante:）?
Aquí hay más palabras después de decir, de hecho, webpack2hasta webpack3La actualización, personalmente, siento que es bastante decepcionante, porque aún no ha resuelto el problema de la complejidad de la configuración desde la raíz. Como un producto que tiene como objetivo ocupar todos los proyectos de construcción web del mundo, debería prestar más atención a la facilidad de uso/desde una perspectiva humana
Cada vez que miro dentro del proyecto de webpack, con todos los archivos .babelrc, .postcssrc.js... y varios archivos .conf, e incluso varios archivos main, index, app, no puedo evitar quejarme, ¿por qué el desarrollo del constructor de frontend se ha convertido en esto, en un proyecto de ingeniería bien organizado, realmente es necesario tener decenas de archivos de configuración? Originalmente, pensé que webpack3Haría que todo esto fuera simple, sin embargo, no lo ha sido, y dado que no hay manera de cambiarlo por el momento, lo que podemos hacer es, en la medida de lo posible, entender los principios subyacentes y simplificar al máximo/Optimización
Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos apoyen a la tutorial de grito.
Declaración: Este artículo se ha obtenido de la red, pertenece al propietario original, el contenido ha sido contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante.3Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido ha sido contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.