1.使用webpack的externals优化
在webpack.base.conf.js中添加:
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'axios': 'axios',
'vue-router': 'VueRouter'
'依赖包名':'cdn全局变量名'
}
在index.html中添加cdn链接
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
可减小主js文件的体积(外链文件多大就可以减少多大的体积,但也会增加外链加载时间,最好对比一下是否在加载时间上有所提升再进行外链插入)
2.路由懒加载(按需加载)
前:
import myServiceWrap from '@/page/center/myService/myServiceWrap'
后:
const myServiceWrap = () => import('@/page/center/myService/myServiceWrap')
3.gzip压缩
config/index.js文件:
//在build里有则修改无则添加
productionGzip: true,
productionGzipExtensions: ['js','css']
build/webpack.prod.conf.js文件:
插件compression-webpack-plugin使用:https://www.npmjs.com/package/compression-webpack-plugin
//在build里有则修改无则添加
if (config.build.productionGzip){
const CompressionPlugin = require('compression-webpack-plugin');
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
minRatio: 0.8,
test: /\.(js|css)$/i,
threshold: 10240,
})
)
}
Nginx 开启 gzip
参考链接:https://blog.csdn.net/u012392251/article/details/80696741
文件路径:nginx -> conf -> nginx.conf
http:{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg
image/gif image/png;
}
主要是:gzip on; 和 gzip_types (配置了gzip感觉速度翻了好几倍,加载文件减小5倍及以上,就这个feel倍儿爽)
4.不生成.map(无速度优化,可以减少上传服务器的文件体积)
.map作用
在打包出错时,会告诉你具体错误位置
去除.map
在config/index.js中把build中的productionSourceMap改为false