La optimización de la carga primera pantalla
Actualizado el 07/11/2019
Basado Proyecto vue2.x + vue-enrutador + vuex + elemento-ui . Unión vue-cli3.0
Antecedentes y Resultados: Después de la línea de pliegue de carga más lenta, el tiempo de carga de 11s +, después de un control de optimización de tiempo de carga en aproximadamente 4s, empaquetados cambiado con respecto al volumen original de 5.76M 2.54m.
Optimización dirección:
-
1. Los componentes se cargan bajo demanda.
-
2. La compresión de imágenes.
-
3.cdn introdujo de recursos (vue, vuex, vue-router, biblioteca de componentes, etc.)
-
4. Uso gzip (Open Server requiere gzip)
Otros: código redundante y quite comentario, las siete vacas nube de almacenamiento de los recursos estáticos, cdn sitio! !
Algunas herramientas :
webpack Bundle Analizador de plug-in, webbpack empaquetado herramientas de análisis webpack Bundle Analyzer;
sitio de compresión de la imagen: TinyPNG
página web velocidad: Pingdom
se instalan webpack herramientas de análisis de empaquetado:
npm install --save-dev webpack-bundle-analyzer //npm安装
yarn add -s webpack-bundle-analyzer -D//yarn 安装
① también necesitará configurar los vue.config.js interior
module.exports = {
baseUrl: process.env.NODE_ENV == 'production' ? './' : '/',
outputDir: 'dist',
assetsDir: 'static',
chainWebpack: config => {//①这里是配置的部分
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
},
}
A continuación, ejecutar el proyecto, habrá una página parecido a cabo de un tamaño de archivo del paquete trasera (diapositiva del ratón en el archivo de visualización de bloques). De acuerdo con esta optimización continua usted se ocupa de la optimización de su tamaño de archivo de proyecto.
sitio de la compresión de imágenes , arrastre la imagen a ese lugar, la compresión automática, el punto de la imagen de compresión de imágenes png grande o sustancial, y, finalmente, bajo el cambio ps el sufijo jpg o cambio directo, se puede utilizar en la línea. ¿Por qué, porque he encontrado que incluso las grandes imágenes JPG (jpg no se puede comprimir un poco de vergüenza), pero solicito menos tiempo que cuando se utilizan imágenes png del mismo tamaño, volver a entender por qué.
Arma sitio : el dominio que desplegar, se adhieren a la ubicación adecuada. Espere un momento, los resultados salieron.
El tema comenzó
componentes se cargan en la demanda
sitio web oficial dejó muy claro el
//main.js
import {Input,Radio,FormItem,Icon,Row,Col,Upload,Message,MessageBox} from 'element-ui'
Vue.use(Input);Vue.use(Radio);Vue.use(FormItem);Vue.use(Icon);Vue.use(Row);Vue.use(Col);Vue.use(Upload);
Vue.use(Loading);Vue.use(DatePicker);Vue.use(Table);Vue.use(TableColumn);
//Vue.use(Message);Vue.use(MessageBox);//
El mensaje anterior y si el método que MessageBox () con Vue.use, se ejecutará automáticamente otra vez si tal uso
Método: Uso Global
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;//因为我用到了confirm
Segundo método: la necesidad dentro de la plantilla
//user.vue
import Message from 'element-ui'
mounted(){
Message.error(“错误！“)；
}
CDN introdujo
la estación de Recursos varios cdn: jsdeliver , bootCDN , unpkg detrás del tiempo de búsqueda del sitio plus '/ Paquete de búsqueda' después de la dirección,
introducido por primera vez en la etiqueta script html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="images/x-icon" href="logo1.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/player/lottie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"></script>
<!--你如要用vue devtools,需引用vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bin/jsencrypt.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/iview/3.4.2-rc.1/iview.min.js"></script>
<title>Title</title>
</head>
vue.config.js
module.exports = {
// 部署应用的根路径(默认'/'),也可用相对路径(存在使用限制)
baseUrl: process.env.NODE_ENV == 'production' ? './' : '/',
outputDir: 'dist',
assetsDir: 'static',
configureWebpack: {//这里是添加的部分
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios',
'echarts': 'echarts',
'lottie-web': 'lottie',
'jsencrypt': 'JSEncrypt',
'iview': 'iview'
}
},
}
gzip
este enfoque requiere la optimización del servidor (back-end) gzip abierta, voy a decir algo sobre las necesidades de front-end que hay que hacer
Nota: la premisa gzip_static en vigor es nginx (si se utiliza nginx) abrió la compresión gzip_static y solicitudes que terminan archivo .gz existe con el mismo nombre y el directorio.
Luego se comprime usando primeras archivos gz comprimido listos gzip_static, y el servidor consumirá más espacio para almacenar el archivo comprimido y el archivo original, los pros y los contras de su propia evaluación.
Referencia: La primera pantalla de carga optimizado github / vue-cli3-config
Instalar la compresión-webpack-plugin Plugin
npm i compression-webpack-plugin -save-dev
//或者
yarn -D compression-webpack-plugin
//vue.config.js
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);//检测构建环境
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
configureWebpack: config => {
if(IS_PROD){
const plugins = [];
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
})
);
config.plugins = [
...config.plugins,
...plugins
];
}
}
};
A continuación, envasados (hilo de acumulación) se puede ver más de 10k archivos han sido envasados con el mismo sufijo de nombre de archivo .gz
El objetivo es escribir un registro y aprender unos de otros!
¿Te gusta bolos? Tengo una jirafa, se puede exprimir usted!
