vue-cli3 webpack 打包优化

时间 2019-12-31

标签 vue cli3 cli webpack 打包优化繁體版

原文原文链接

1、路由懒加载javascript

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') 

    }
  ]
});

2、index.html中引用全局包css

一、将公共包放入public文件夹html

二、在index.html中引入公共包jsvue

<!DOCTYPE html>
<html lang="en">
    <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, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <link rel="stylesheet" href="<%= BASE_URL %>css/vuetify.min.css">
        <title>index</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="<%= BASE_URL %>js/vue.min.js"></script>
        <script type="text/javascript" src="<%= BASE_URL %>js/vuetify.min.js"></script>
        <script type="text/javascript" src="<%= BASE_URL %>js/vuex.min.js"></script>
        <script type="text/javascript" src="<%= BASE_URL %>js/vue-router.min.js"></script>
        <script type="text/javascript" src="<%= BASE_URL %>js/axios.min.js"></script>
        <script type="text/javascript" src="<%= BASE_URL %>js/moment.min.js"></script>
    </body>
</html>

三、在vue.config.js中配置externalsjava

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",
    }
}

四、注释公共包的引用webpack

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

3、开启gzip压缩ios

一、安装compression-webpack-pluginweb

cnpm i -D compression-webpack-plugin

二、在vue.config.js中配置vue-router

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

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

三、服务器端开启gzipvuex

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压缩标志