Vue-cli3基础教程(十六)

1.路由懒加载


import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/Login',
    name: 'Login',
    // 路由懒加载
    component: () => import('../views/Login/index.vue')
  },
  {
    path: '/',
    component: () => import('../views/layout/index.vue'),
    children: [
      {
        path: '',
        component: () => import('../views/Home/index.vue')
      }
    ]
  }
]

//或者如下 
const Login = () => import('@/views/Login')
const Reg = () => import('@/views/Reg')
const Layout = () => import('@/views/Layout')

2.掉打包后的console

npm install terser-webpack-plugin -D

在vue.config.js修改配置文件

chainWebpack: (config) => {
     config.optimization.minimizer('terser').tap((args) => {
         args[0].terserOptions.compress.drop_console = true
         return args
    })
}

3.使用CDN加速

在public/index.html添加CDN资源

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!--字节跳动CDN资源-->
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.1/vue-router.min.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.21.1/axios.min.js"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vuex/3.6.2/vuex.min.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"></script>
    <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css" rel="stylesheet">
</head>
...

在vue.config.js修改配置文件

const {defineConfig} = require('@vue/cli-service')

const cdn = {
    //douyin
    css: ["https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css"],
    js: [
        "https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.11/vue.min.js",
        "https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.2/vue-router.min.js",
        "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vuex/3.6.2/vuex.min.js",
        "https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.21.1/axios.min.js",
        "https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"
    ]
};

module.exports = defineConfig({
    transpileDependencies: true,
    //webpack配置
    configureWebpack: {
        //忽略将这些加入打包
        externals: {
            vue: 'Vue',
            'vue-router': 'VueRouter',
            vuex: 'Vuex',
            'element-ui': 'ELEMENT',
            axios: 'axios',
            lodash: '_'
        }
    },
    chainWebpack: (config) => {
        config.optimization.minimizer('terser').tap((args) => {
            args[0].terserOptions.compress.drop_console = true
            return args
        })
    }
})

在main.js中，去除element-ui的全局引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//引入elementui组件
/*
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
*/
//引入全局样式表

import '@/assets/css/global.css'

Vue.config.productionTip = false
//使用elementui组件
//Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

经打包测试，发现dist目录从为优化前的4.64M精简到216K,优化效果明显。

4.使用Gzip压缩

安装compression-webpack-plugin插件。

"devDependencies": {
    ...
    "compression-webpack-plugin": "^5.0.2",
    "terser-webpack-plugin": "^4.2.3"
  }

在vue.config.js 配置compression-webpack-plugin插件。

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];

...
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    // 生产环境下关闭源码地图，即不生产对应的map文件，减小打包结果的体积
    productionSourceMap: false, 
    //webpack配置
    configureWebpack: {
        //忽略将这些加入打包
        externals: {
            vue: 'Vue',
            'vue-router': 'VueRouter',
            vuex: 'Vuex',
            'element-ui': 'ELEMENT',
            axios: 'axios',
            lodash: '_'
        },
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
                threshold: 10240,
                minRatio: .2
            })
        ]
    },

    chainWebpack: (config) => {
       ...
    },
    //这里是咱们的webpack的server相关的配置，这里配端口，跨区请求，方向代理。
    devServer: {
      ...
    }
})

在nginx.conf里开启gzip。

    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";