Vue项目首页加载速度优化

Vue项目首页加载速度优化

1.自定义打包入口

默认打包入口文件是src/main.js

项目根目录创建vue.config.js,这是webpack的配置文件

module.exports = {
	chainWebpack : config => {
		//开发模式
		config.when(process.env.NODE_ENV === 'development', config => {
			//自定义打包入口
			config.entry('app').clear().add('./src/main-dev.js')
		})
		
		//发布模式
		config.when(process.env.NODE_ENV === 'production', config => {
			//自定义打包入口
			config.entry('app').clear().add('./src/main-prod.js')
		})
	}
}

2.加载cdn资源,优化js体积

依赖项在打包时会全部放在chunk-vendors.js文件中,通过cdn引入依赖项可以减小该文件体积,从而加快首页加载速度

  • 修改vue.config.js
module.exports = {
	chainWebpack : config => {
		//开发模式
		config.when(process.env.NODE_ENV === 'development', config => {
			//自定义打包入口
			config.entry('app').clear().add('./src/main-dev.js')
		})
		
		//发布模式
		config.when(process.env.NODE_ENV === 'production', config => {
			//修改默认main.js文件位置
			config.entry('app').clear().add('./src/main-prod.js')
			//通过cdn引入资源,优化chunk-vendors.js大小
			config.set('externals', {
				'vue': 'Vue',//key是文件的名字,value是文件的包名(在cdn文件中有展示)
				'vue-router' : 'VueRouter',
                'element-ui' : 'ELEMENT'
			})
		})
	}
}
  • 修改src/main-prod.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//element-ui已通过cdn引入,这里无需再次引入
// import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  • 修改index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %>title>
	
	
	<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet">
	
  head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    <div id="app">div>
    
	
	
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js">script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.js">script>
	<script src="https://unpkg.com/element-ui/lib/index.js">script>
	
  body>
html>

引入cdn后,无需注释router和vuex中的use语句.

3.首页内容根据当前模式改变

在开发模式和生产模式下,项目的入口文件都是index.html,会导致加载一些不必要的资源,我们可以在webpack配置中定义一个变量,以表示当前环境,从而可以在idex.html中加载不同的资源

  • 修改vue.config.js
module.exports = {
	chainWebpack : config => {
		//开发模式
		config.when(process.env.NODE_ENV === 'development', config => {
			//自定义打包入口
			config.entry('app').clear().add('./src/main-dev.js')
			//定义变量,标识开发模式与发布模式
			config.plugin('html').tap(args => {
				args[0].isProd = false
				return args;
			})
		})
		
		//发布模式
		config.when(process.env.NODE_ENV === 'production', config => {
			//自定义打包入口
			config.entry('app').clear().add('./src/main-prod.js')
			//定义变量,标识开发模式与发布模式
			config.plugin('html').tap(args => {
				args[0].isProd = true
				return args;
			})
		})
	}
}
  • 修改index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %>title>
	
	
	
	<% if(htmlWebpackPlugin.options.isProd){ %>
	<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet">
	<% } %>
	
  head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    <div id="app">div>
    
	
	
	
	<% if(htmlWebpackPlugin.options.isProd){ %>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js">script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.js">script>
	<script src="https://unpkg.com/element-ui/lib/index.js">script>
	<% } %>
	
  body>
html>

你可能感兴趣的:(Vue项目首页加载速度优化)