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壓縮標誌

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。