Vue 项目打包优化

一、路由懒加载：分割代码块

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