一、路由懒加载：分割代码块
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes: [{
path: '/home',
component: () => import(/* webpackChunkName: "home" */ '@/views/home/home.vue'),
children: [{
path: '',
name: 'packingWarehouse',
component: () => import(/* webpackChunkName: "packingWarehouse" */ '@/views/packingWarehouse/packingWarehouse.vue')
},{
path: '/demandPack',
name: 'demandPack',
component: () => import(/* webpackChunkName: "demandPack" */ '@/views/demandPack/demandPack.vue')
},{
path: '/templateConfig',
name: 'templateConfig',
component: () => import(/* webpackChunkName: "templateConfig" */ '@/views/templateConfig/templateConfig.vue')
}]
}]
})
二、webpack 打包生成 .gz 文件（gzip压缩）
1、安装插件 compression-webpack-plugin
npm install compression-webpack-plugin --save-dev
2、修改 vue.config.js
const CompressionPlugin = require('compression-webpack-plugin');
configureWebpack: config => {
/* gzip压缩 */
config.plugins.push(new CompressionPlugin({
test: /\.(js|css)?$/i, // 压缩文件类型
filename: '[path].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用 gzip 压缩
minRatio: 0.8, // 压缩率小于 1 才会压缩
threshold: 10240, // 对超过 10k 的数据压缩
deleteOriginalAssets: false // 是否删除未压缩的文件(源文件)，不建议开启
}));
}
3、安装最新版本再打包的时可能会报错 'Cannot read property 'tapPromise' of undefined'
解决方案：先卸载，再装个低一点的版本
npm uninstall compression-webpack-plugin
npm install compression-webpack-plugin@5.0.1 --save-dev
4、修改 nginx 配置
server {
#开启 gzip
gzip on;
#设置压缩所需要的缓冲区大小，以 4k 为单位，如果文件为 7k 则申请 2 * 4k 的缓冲区
gzip_buffers 2 4k;
#gzip 压缩级别，1-9，数字越大压缩的越好，同时占用 cpu 时间
gzip_comp_level 5;
#ie6及以下 不开启 gzip
gzip_disable "MSIE [1-6]\.";
#gzip 压缩起点，文件大于 10k 才进行压缩
gzip_min_length 10k;
#设置 gzip 压缩针对的 HTTP 协议版本
gzip_http_version 1.0;
#根据请求和响应，启用或禁用代理请求的响应 gzip
gzip_proxied expired no-cache no-store private auth;
#是否在http header中添加 Vary：Accept-Encoding，建议开启
gzip_vary on;
#nginx 对于静态文件的处理模块，开启后会自动寻找以 .gz 结尾的文件，直接返回，不会占用 cpu 进行压缩，如果找不到则进行 cpu 压缩
gzip_static on;
#进行压缩的文件类型
gzip_types text/plain text/xml text/css text/javascript application/json application/xml application/css application/xml+rss application/javascript application/x-javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;
}
5、全部弄好的时候，打开浏览器来浏览我们的页面，可能会遇到一些问题
nginx 的 error.log 错误日志，报如下错误
nginx:[emerg] unknown directive "gzip_static" in /usr/local/nginx/conf/nginx.conf:35
意思是 “gzip_static” 指令未知，无法被识别
解决方案：
由于安装 nginx 时缺少了相应配置，需要添加 with-http_gzip_static_module 配置，在此之前需要先执行以下命令
// 打开 nginx 脚本目录
cd /usr/local/nginx/sbin/
// 查看nginx的版本和既有的配置
nginx -V
再在 nginx 安装目录下，重新编译和安装 nginx，具体方式如下
// 打开 nginx 安装目录
cd /nginx-1.9.9/
// 添加相应配置（除 gzip_static 配置外，其他配置均为通过 nginx -V 查看显示的之前既有配置）
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_flv_module --with-http_gzip_static_module
// 编译
make
make install
然后等待进程执行完，重新启动nginx即可
cd /usr/local/nginx/sbin/
nginx -s reload
6、如果 nginx 中使用了 proxy_pass 进行反向代理，则需要将 gzip_http_version 配置项设置为 1.0，否则gzip配置不起作用；
原因分析：
目前浏览器中使用的 HTTP 协议基本上是 1.1 版本，而 nginx 的 upstream 通信协议默认是 HTTP/1.0，gzip_http_version 的默认值是 1.1，
如果我们使用了 proxy_pass 进行反向代理，如果没有配置 gzip_http_version 时，该值默认为 1.1，而 agent nginx 会把请求转化为 1.0 版本的，此时 gzip 功能就会不起作用。
推荐看此文章
https://segmentfault.com/a/1190000021955686
https://www.jianshu.com/p/66f9e0739165
https://blog.csdn.net/qq_43363884/article/details/108195408
三、CDN
把不常改变的库放到index.html中，通过cdn引入，比如下面这样：
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/mint-ui@2.2.13/lib/index.js"></script>
<script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
然后修改 vue.config.js
externals:{
'vue':'Vue',
'element-ui':'ELEMENT',
'mint-ui':'MINT',
'axios':'axios',
'vue-router':'VueRouter',
}
四、去掉所有的console.log输出
参考地址
https://www.jianshu.com/p/ba8f6485be05
网友评论