Vue项目优化

路由懒加载

npm i @babel/plugin-syntax-dynamic-import

被访问的时候才加载对应的组件。

// [babel.config.js]
module.exports = {
	//......
	plugins: [
		// ......
		'@babel/plugin-syntax-dynamic-import'
	]
}

将路由改为按需加载的形式，当请求 Foo 时，因为在同一组中也会将 Bar 请求回来

const Foo = () => import(/* webpackchunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackchunkName: "group-boo" */ './Baz.vue ')

移除 console

npm i babel-plugin-transform-remove-console --save-dev

在bable.config.js中配置

// 项目打不阶段需要用到的插件
const prodPlugins = []
if (process.env.NODE_NEV === 'production') {
	prodPlugins.push('transform-remove-console')
}

module.exports = {
	/* ... */
	// 发布阶段的插件
	...prodPlugins
}

指定不同的打包入口

在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置。
在这里，configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方式不同:

chainWebpac通过链式编程的形式，来修改默认的webpack配置

configureWebpack通过操作对象的形式，来修改默认的webpack配置

// [vue.config.js]
module.exports = {
	chainWebpack: config => {
		// 发布阶段
		config.when(process.env.NODE_ENV === 'production', config => {
			config.entry('app').clear().add('./src/main-prod.js')
		})
		// 开发阶段
		config.when(process.env.NODE_ENV === 'development', config => {
			config.entry('app').clear().add('./src/main-dev.js')
		})
	}
}

首页内容定制

// [vue.config.js]
//发布模式
config.plugin('html').tap(args => {
	args[0].isProd = true
	return args
})
// 开发模式
config.plugin('html').tap(args => {
	args[0].isProd = false
	return args
})

<title>
	<%= htmlWebpackPlugin.options.isProd? '':'开发标题' %><%=
	htmlWebpackPlugin.options.title %>
</title>

<!-- 按需加载外部的CDN资源 -->
<% if(htmlWebpackPlugin.options.isProd){%> 发布模式下加载的js和css <%}%>

第三方包启用 CDN

通过externals加载外部 CDN 资下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

通过webpack的externals节点，来配置并加载外部的 CDN 资源。凡是声明在externals中的第三方依赖包，都不会被打包。

// [vue.config.js->发布模式]
config.set('externals', {
	vue: 'Vue',
	'vue-router': 'VueRouter',
	axios: 'axios',
	lodash: '_',
	echarts: 'echarts',
	nprogress: 'NProgress',
	'vue-quill-editor': 'VueQuillEditor'
})

1. 在index.html中添加样式表资源，删除main-prod.js中的样式表
2. 在index.html中添加 js 文件资源，删除main-prod.js中的 js 资源

页面进度条效果

npm i nprogress

// [main.js]
// 加载进度条包对应js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// [main.js]
// axios请求拦截
axios.interceptors.request.use(config => {
	NProgress.start() // 在request中展示进度条
	// ......
})

axios.interceptors.request.use(config => {
	NProgress.done() // 在response中隐藏进度
	// ......
})

项目上线优化

const express =require ('express')
//创建web服务器
const app = express ()
//托管静态资源
app.use (express.static ('./dist')
//启动web服务器
app.listen(80,()=> {
	console.log ('web server running at http://127.0.0.1')
} )

开启 gzip 配置

使用 gzip 可以减小文件体积，使传输速度更快。

可以通过服务器端使用 Express 做 gzip 压缩。其配置如下：

npm install compression -S

//导入包
const compression = require('compression')
//托管静态资源之前启用中间件
app.use(compression())

配置 https 服务