Vue项目首页加载速度优化

最新推荐文章于 2024-05-11 21:04:43 发布

日已西斜

最新推荐文章于 2024-05-11 21:04:43 发布

阅读量774

点赞数

文章标签： vue vue.js html javascript

本文链接：https://blog.csdn.net/u010713053/article/details/107123450

版权

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

<!DOCTYPE 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>
	
	<!-- 引入cdn资源,减小chunk-vendors.js文件的大小 -->
	<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>
    <!-- built files will be auto injected -->
	
	<!-- 引入cdn资源,减小chunk-vendors.js文件的大小 -->
	<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

<!DOCTYPE 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>
	
	<!-- 引入cdn资源,减小chunk-vendors.js文件的大小 -->
	<!-- 只有生产模式需要引入cdn资源 -->
	<% 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>
    <!-- built files will be auto injected -->
	
	<!-- 引入cdn资源,减小chunk-vendors.js文件的大小 -->
	<!-- 只有生产模式需要引入cdn资源 -->
	<% 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>

日已西斜

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
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().a
复制链接

扫一扫