Cómo acortar el tiempo de carga de la primera pantalla en el proyecto vue-cli para mejorar la eficiencia

De lo que habla este artículo es de cómo acortar el tiempo de carga de la primera pantalla en el proyecto vue-cli para mejorar la eficiencia. Los códigos son muy detallados. Los amigos que lo necesiten pueden echarle un vistazo.

La razón principal es que la primera pantalla carga demasiado lentamente.

Localización de archivos grandes

Podemos utilizar el complemento visual del paquete web Webpack Bundle Analyzer para verificar el tamaño de los archivos js del proyecto y luego resolver intencionalmente los archivos js demasiado grandes.

Instalación

npm install --save-dev webpack-bundle-analyzer

Establezca lo siguiente en el paquete web y luego npm run dev establecerá de forma predeterminada el puerto 8888 mostrar.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {

complementos: [

new BundleAnalyzerPlugin()

]

}Los archivos JS se cargan bajo demanda

Sin esta configuración, todos los archivos de todo el sitio web se cargarán cuando Se carga la primera pantalla del proyecto. El archivo JS, por lo que es un buen método de optimización desmontar el archivo JS y cargar el JS de la página cuando hace clic en la página.

Lo que se utiliza aquí es la carga diferida de componentes de vue. En router.js, no utilice el método de importación para introducir componentes, utilice require.ensure.

importar índice desde '@/components/index'

const index = r =gt; require.ensure( [], () =gt; r (require('@/ componentes/index'),'index'))

//Si se escribe el segundo parámetro, se empaquetará en el archivo de `/JS/index`.

//Si no escribe el segundo parámetro, simplemente empaquetelo directamente en el directorio `/JS`.

const index = r =gt; require.ensure([], () =gt; r (require('@/components/index'))) usa cdn

Embalaje Cuando se utiliza bootcdn nacional, vue, vuex, vue-router, axios, etc. se introducen directamente en index.html en el directorio raíz.

Agregue elementos externos en la configuración del paquete web e ignore las bibliotecas que no necesitan empaquetarse.

externos: {

'vue': 'Vue',

'vue-router': 'VueRouter',

' vuex': 'Vuex',

'axios': 'axios'

}Introducido usando cdn en index.html.

lt;script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"gt;lt;/scriptgt

lt;script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"gt;lt;/scriptgt;

lt;script src="//cdn .bootcss.com/vuex/2.2.1/vuex.min.js"gt；lt;/scriptgt;

lt;script src="//cdn.bootcss.com/axios/0.15.3 /axios.min.js"gt;lt;/scriptgt;Coloque el archivo JS al final del cuerpo

Por defecto, en el index.html construido, js se introduce en el encabezado.

Utilice el complemento html-webpack-plugin para cambiar el valor de inyectar al cuerpo. Puedes poner la introducción js al final del cuerpo.

var HtmlWebpackPlugin = require('html-webpack-plugin');

nuevo HtmlWebpackPlugin({

inject: 'body',})

Comprime el código y elimina la consola

Utiliza el complemento UglifyJsPlugin para comprimir el código y eliminar la consola.

nuevo webpack.optimize.UglifyJsPlugin({

comprimir: {

advertencias: falso,

drop_console: verdadero,

pure_funcs: ['console.log']

},

sourceMap: false

})