1、设置路由懒加载
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const index= r => require.ensure([], () => r(require('@/views/index')), 'index');
export default new Router({
mode: 'history',
routes:[
{
path: ' ',
component: index
}
]
})
2、在index.html中放入引用的公共包（如vue,vuex,elementui。。。）
<!DOCTYPE html>
<html>
<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>Signal Supervisor</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="<%= BASE_URL %>js/vue.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>js/vuex.min.js"></script>
</body>
</html>
3、开启GZIP
当项目较大时往往会出现打包之后首屏加载时间较长，这样会导致用户体验较差，因此可以开启gzip压缩功能
1）如果是vue2.x，在vue项目中安装依赖并将config.js中的productionGzip改为true，开启Gzip压缩，npm install --save-dev compression-webpack-plugin
运行npm run build 打包项目，这时如果有提示报错ValidationError: Compression Plugin Invalid Options，则需要将build中的webpack.prod.conf.js中CompressionWebpackPlugin的设置由asset改为
filename，如图所示
再次运行npm run build打包，如果还有报错，提示TypeError: Cannot readproperty 'emit' of undefined。据我查证，是安装的compression-webpack-plugin依赖有问题，需要卸载compression-webpack-plugin更改安装低版本：npm install --save-dev compression-webpack-plugin@1.1.2
最后再次打包
当发现打包文件中有很多.gz的文件时即是打包成功，最后后端服务器开启gzip配置就愉快的配置完成，再次打开地址后会发现首屏速度快了很多
2） 如果是vue-cli3的项目，在开启gzip时会稍有区别，在vue.config.js 中配置，先安装依赖cnpm i -D compression-webpack-plugin
const CompressionPlugin = require('compression-webpack-plugin');
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return{
plugins: [
new CompressionPlugin({
algorithm: 'gzip',//开启gzip
test: /\.js$|\.html$|.\css/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 不删除源文件
})
]
}
}
}
网友评论