vue-cli3 webpack 打包优化

一、生成打包分析文件

1、package.json 中配置 report 命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "report": "vue-cli-service build --report"
}

2、终端运行命令

npm run report // 打包并生成分析文件

3、查看打包后的 dist 文件夹

可以看到多了一个 report.html 文件

4、双击打开 report.html 文件

可以看到打包后的每个文件的大小，每个文件都生成了哪些模块代码，以及不同模块的大小

二、路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/views/index.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: "index",

      // 1. 普通引用
      component: index

      // 2. 路由懒加载
      component: resolve =>  require(['@/views/index.vue'], resolve)

      // 3. 路由懒加载，并且命名chunk名字
      component: () => import(/* webpackChunkName: 'index' */ '@/views/index.vue') 

    }
  ]
});

三、index.html 中引用全局包

1、 将公共包放入 public 文件夹

2、 在 index.html 中引入公共包 js

3、在 vue.config.js 中配置 externals

configureWebpack: (config) => {

    // production：生产环境，development：开发环境
    config.mode = process.env.NODE_ENV

    config.externals = {
        // key：vue是项目里引入时候要用的，value：是开发依赖库的主人定义的不能修改
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
        "vuetify": "vuetify",
        "moment": "moment",
    }
}

4、注释公共包的引用

// import Vue from 'vue' // 注释或删除代码
// import Router from 'vue-router' // 注释或删除代码
import index from '@/views/index.vue'

四、开启 gzip 压缩

1、安装 compression-webpack-plugin

cnpm i -D compression-webpack-plugin

2、在 vue.config.js 中配置

const CompressionPlugin = require('compression-webpack-plugin');

configureWebpack: (config) => {
    config.plugins = [
        ...config.plugins,
        new  CompressionPlugin({
            test: /\.js$|\.html$|\.css/,
            threshold: 10240,
            deleteOriginalAssets: false
        })
    ]
}

3、服务器端开启 gzip

Nginx服务器配置：

server {
    gzip on;
    gzip_buffers 4 16K;
    gzip_comp_level 5;
    gzip_min_length 100k;
    gzip_types text/plain application/x-javascript application/javascript application/json text/css application/xml text/javascript image/jpeg image/gif image/png;
    gzip_disable "MSIE [1-6\]\."; 
    gzip_vary on;
}

gzip on|off; // 是否开启gzip
gzip_min_length 100k; // 压缩的最小长度(再小就不要压缩了,意义不在)
gzip_buffers 4 16k; // 缓冲(压缩在内存中缓冲几块? 每块多大?)
gzip_comp_level 5; // 压缩级别(级别越高,压的越小,越浪费CPU计算资源)
gzip_types text/plain; // 对哪些类型的文件用压缩 如txt,xml,html,css,js等
gzip_vary on|off; // 是否传输gzip压缩标志