使用场景：目前这个项目要嵌入到APP中使用，项目用到router、vuex、axios等
目前现状：首次加载非常缓慢，等待时间超过8秒钟
我们目的：减少包体积、减少http请求次数，同时保证代码可用性、维护性、不变动业务代码
路由按需加载
webpack默认将所有js源代码打包成一个js文件，导致JS包会变得非常大，影响页面首次加载速度
按需加载能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件的js文件
const home = () => import('@views/home/home')
// 或者
const home = (resolve) => {
import('@views/home/home').then((module) => {
resolve(module)
})
}部分走CDN
CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
如果公司没有考虑CDN，可以酌情将例如 vue vux vue-router 等不变动的资源使用第三方免费 CND 引入，并添加本地 fallback
//在vue.config.js中配置
configureWebpack: config => {
if (isProd != 'development') {
config.externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
}
}
}在public/index.html
<body>
<div id="app"></div>
<% if (VUE_APP_ENV != "development") { %>
<!-- 运行时依赖 -->
<script src="//cdn.staticfile.org/vue/2.5.17/vue.runtime.min.js" type="text/javascript"></script>
<script src="//cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js" type="text/javascript"></script>
<script src="//cdn.staticfile.org/vuex/3.0.1/vuex.min.js" type="text/javascript"></script>
<script>
// 当cdn资源失效时，加载本地资源
window.Vue || document.write('<script src="./vue.min.js"><\/script>');
</script>
<% } %>
</body>nginx压缩
目前有两种压缩方式，nginx压缩，客户端打包压缩在上传
1.nginx压缩
客户端啥都不用做直接上传打包的代码即可
就是每次请求时服务器先压缩再返回资源，对服务器性能有一定消耗
nginx.conf文件
http{
#开启服务端压缩-损耗服务器cpu
gzip on; #开启gzip
gzip_min_length 10k; #设置允许压缩的页面最小字节数; 这里表示如果文件小于10个字节，就不用压缩，因为没有意义，本来就很小
gzip_buffers 4 16k; #设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存
gzip_comp_level 3; #压缩级别，1-10，数字越大压缩的越好，也越占用CPU
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript; #制定压缩的类型,线上配置时尽可能配置多的压缩类型!
gzip_vary on; #选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写，表示在传送数据时，给客户端说明我使用了gzip压缩
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
}2.客户端打包压缩在上传
在打包是需要配置vue.config.js
//需要安装 npm i compression-webpack-plugin -D
const CompressionWebpackPlugin = require('compression-webpack-plugin');
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: /\.(js|css)$/,// 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 不删除源文件
minRatio: 0.8 // 压缩比
})
]
}
}打包出来的可能会带有.gz的文件夹
nginx配置一句话即可
nginx.conf文件
http{
gzip_static on; #静态压缩
}nginx设置缓存
#server模块一般对应在相对应的xxx.conf中,不建议都写在nginx.conf中
server{
location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
access_log off;
expires 30d; // 天
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
access_log off;
expires 24h; // 小时
}
location ~* ^.+\.(html|htm)$ {
expires 1h;
}
}实际效果
chunk-vendors.js可能会比较大，3M左右，开启压缩只剩下1M
上传代码到服务器打开浏览器测试,在公司wifi测试下，整个加载过程不超3秒
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。