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>