Vue2.6.10(Vue-cli4)項(xiàng)目打包性能優(yōu)化實(shí)踐

記錄了自己的博客在禁用緩存的情況下，從八九秒加載時(shí)間到最終985ms的優(yōu)化實(shí)踐，開(kāi)啟緩存的情況下能達(dá)到138ms的訪問(wèn)速度，預(yù)覽地址為：https://www.cooldream.fun

本人的個(gè)人博客采用`Vue-cli4.1.2 + typescript`構(gòu)建

項(xiàng)目目錄結(jié)構(gòu)如下

├─ src    //主文件
│  ├─ api    //接口文件夾
|  |  |- config.js    //后端接口地址的配置,將測(cè)試、開(kāi)發(fā)、生產(chǎn)環(huán)境分開(kāi)
|  |  └─ user.js      //接口文件梨睁，配置了token請(qǐng)求頭，具體接口根據(jù)需求修改
│  ├─ assets   //資源文件   
│  ├─ components   //公用組件
│  ├─ directive   //vue自定義指令
|  ├─ filters      //存放過(guò)濾器文件娜饵，自帶了手機(jī)號(hào)加密坡贺，手機(jī)號(hào)格式化，時(shí)間日期處理
|  ├─ interceptors    //存放axios攔截器配置，寫入了接口調(diào)用的loading加載以及http狀態(tài)碼報(bào)錯(cuò)攔截
|  ├─ interceptors    //放置公用的接口遍坟，對(duì)數(shù)據(jù)進(jìn)行類型限制
|  ├─ layout      //布局文件拳亿，通過(guò)子路由渲染方式實(shí)現(xiàn)，具體HTML布局根據(jù)需求修改  
|  ├─ mixins      //混入文件政鼠，配置了一個(gè)平滑滾動(dòng)的方法
|  ├─ plugins     //外部插件文件夾风瘦，配置了按需引入的element-ui
|  ├─ reg    //存放正則以及校驗(yàn)的文件夾
|  |  |- reg.ts      //存放正則表達(dá)式，自帶了傳真公般，郵箱万搔，qq，手機(jī)號(hào)官帘，銀行卡號(hào)瞬雹，固定電話，密碼強(qiáng)度校驗(yàn)正則
|  |  └─ validator.ts      //存放element-ui自定義校驗(yàn)刽虹，自帶了傳真酗捌，郵箱，qq涌哲，手機(jī)號(hào)胖缤，銀行卡號(hào)，固定電話阀圾，密碼強(qiáng)度自定義校驗(yàn)
|  ├─ router      //路由文件
|  ├─ store       //vuex全局變量文件
|  |  |- index.ts      //store主文件
|  |  └─ module     //store模塊文件夾
|  |  |  └─ user.ts      //存放user相關(guān)的全局變量
|  ├─ stylus   //css預(yù)處理器文件夾
|  |  |- reset.styl      //樣式初始化文件,自帶了非標(biāo)準(zhǔn)盒子哪廓，a標(biāo)簽清除下劃線，清除內(nèi)外邊距初烘，禁止圖片拖拽等效果
|  |  └─ color.styl     //顏色變量文件
|  ├─ utils   //公用方法文件夾
|  |  |- area.ts      //存放省市區(qū)三級(jí)地區(qū)的數(shù)據(jù)
|  |  |- array.ts      //存放數(shù)組相關(guān)的公用方法涡真，自帶了兩個(gè)元素交換位置，元素前進(jìn)后退一格肾筐，元素置頂或末尾哆料，去重，刪除指定元素操作
|  |  └─ object.ts    //存放對(duì)象相關(guān)的公用方法吗铐，自帶了對(duì)象清空所有值的方法
|  ├─ views   //頁(yè)面文件夾
|  ├─ main.ts   //主配置文件
|  ├─ babel.config.js   //babel配置文件东亦，寫入了element-ui按需加載的配置
|  ├─ package.json   //npm的包管理文件
|  ├─ tsconfig.json   //ts配置文件
|  ├─ vue.config.js   //vue配置文件

1.關(guān)閉productionSourceMap

首先，由于最新版的腳手架`不自帶配置文件`了唬渗，先在根目錄新建`vue.config.js`文件典阵，關(guān)閉`productionSourceMap`，在`vue.config.js`中寫入如下內(nèi)容

module.exports = {
    productionSourceMap: false
}

2.開(kāi)啟Gzip壓縮

安裝插件`compression-webpack-plugin`谣妻，打開(kāi)代碼壓縮，`npm install --save-dev compression-webpack-plugin`卒稳，現(xiàn)在的`vue.config.js`代碼如下蹋半，但是，需要注意的是充坑，服務(wù)器上nginx也必須開(kāi)啟gzip才能生效

// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development';

// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    productionSourceMap: false,
    configureWebpack: config => {
        // 生產(chǎn)環(huán)境相關(guān)配置
        if (isProduction) {
            //gzip壓縮
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp(
                        '\\.(' + productionGzipExtensions.join('|') + ')$'
                    ),
                    threshold: 10240, // 只有大小大于該值的資源會(huì)被處理 10240
                    minRatio: 0.8, // 只有壓縮率小于這個(gè)值的資源才會(huì)被處理
                    deleteOriginalAssets: false // 刪除原文件
                })
            )
        }
    }
}

打開(kāi)`nginx`文件夾下的`nginx.conf`文件减江，在`http`模塊中寫入以下內(nèi)容

    # 開(kāi)啟gzip
    gzip on;

    # 啟用gzip壓縮的最小文件染突，小于設(shè)置值的文件將不會(huì)壓縮
    gzip_min_length 1k;

    # gzip 壓縮級(jí)別，1-9辈灼，數(shù)字越大壓縮的越好份企，也越占用CPU時(shí)間，后面會(huì)有詳細(xì)說(shuō)明
    gzip_comp_level 2;

    # 進(jìn)行壓縮的文件類型巡莹。javascript有多種形式司志，后面的圖片壓縮不需要的可以自行刪除
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    # 是否在http header中添加Vary: Accept-Encoding，建議開(kāi)啟
    gzip_vary on;

    # 設(shè)置壓縮所需要的緩沖區(qū)大小     
    gzip_buffers 4 16k;

然后輸入命令`nginx -s reload`重啟nginx服務(wù)

如果后端nginx開(kāi)啟了gzip降宅，可以從`network`中的`Content-Encoding`中看到`gzip`

image.png

3.開(kāi)啟CDN加速(建議選配骂远，CDN雖然速度快，但沒(méi)有本地打包穩(wěn)定)

將使用的插件使用cdn鏈接腰根，并且配置`webpack`將使用`CDN`的插件不進(jìn)行打包激才，別忘記還要再`index.html`中引入`js`以及`css`

// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development';

// 本地環(huán)境是否需要使用cdn
const devNeedCdn = false

// cdn鏈接
const cdn = {
    // cdn：模塊名稱和模塊作用域命名（對(duì)應(yīng)window里面掛載的變量名稱）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'marked': 'marked',
        'highlight.js': 'hljs',
        'nprogress': 'NProgress',
        'axios': 'axios'
    },
    // cdn的css鏈接
    css: [
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css'
    ],
    // cdn的js鏈接
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/marked/0.8.0/marked.min.js',
        'https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js',
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js',
        'https://cdn.bootcss.com/axios/0.19.2/axios.min.js'
    ]
}

module.exports = {
    chainWebpack: config => {
        // ============注入cdn start============
        config.plugin('html').tap(args => {
            // 生產(chǎn)環(huán)境或本地需要cdn時(shí)，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        // ============注入cdn start============
    },
    configureWebpack: config => {
        // 用cdn方式引入额嘿，則構(gòu)建時(shí)要忽略相關(guān)資源
        if (isProduction || devNeedCdn) config.externals = cdn.externals
    }
}

接下來(lái)瘸恼，在`index.html`中引入使用了`CDN`的鏈接

<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%;">
  <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">

    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link
            href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
            rel="stylesheet"
    />
    <% } %>
    <!-- 使用CDN的CSS文件 -->

    <title>CoolDream</title>
  </head>
  <body style="width: 100%;height: 100%;">
    <noscript>
      <strong>We're sorry but blog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

    <!-- 使用CDN的JS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- 使用CDN的JS文件 -->

  </body>
</html>

打包后拋到服務(wù)器上，打開(kāi)開(kāi)發(fā)者工具的network册养，如果看到`http`請(qǐng)求`cdn`东帅，那么就代表配置成功了，如圖所示

image.png

4.代碼壓縮

先安裝插件`npm i -D uglifyjs-webpack-plugin`

然后在最上方引入依賴

// 代碼壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

在`configureWebpack`模塊中引入代碼壓縮

// 代碼壓縮
config.plugins.push(
    new UglifyJsPlugin({
        uglifyOptions: {
            //生產(chǎn)環(huán)境自動(dòng)刪除console
            compress: {
                drop_debugger: true,
                drop_console: true,
                pure_funcs: ['console.log']
            }
        },
        sourceMap: false,
        parallel: true
    })
)

5.公共代碼抽離捕儒，寫在`configureWebpack`模塊中

// 公共代碼抽離
config.optimization = {
    splitChunks: {
        cacheGroups: {
            vendor: {
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,
                maxInitialRequests: 5,
                minSize: 0,
                priority: 100
            },
            common: {
                chunks: 'all',
                test: /[\\/]src[\\/]js[\\/]/,
                name: 'common',
                minChunks: 2,
                maxInitialRequests: 5,
                minSize: 0,
                priority: 60
            },
            styles: {
                name: 'styles',
                test: /\.(sa|sc|c)ss$/,
                chunks: 'all',
                enforce: true
            },
            runtimeChunk: {
                name: 'manifest'
            }
        }
    }
}

6.圖片壓縮()

1.使用圖片壓縮插件

先安裝插件npm install image-webpack-loader --save-dev
在chainWebpack中新增以下代碼

// ============壓縮圖片 start============
config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({ bypassOnDebug: true })
    .end()
// ============壓縮圖片 end============

2.將靜態(tài)資源存儲(chǔ)在云端冰啃，個(gè)人用的七牛云,對(duì)象存儲(chǔ)用于存儲(chǔ)文件，使用`cdn`加速讓存儲(chǔ)的靜態(tài)資源訪問(wèn)速度更快刘莹。`(推薦阎毅，速度能快挺多)`

我個(gè)人申請(qǐng)了七牛云，實(shí)名認(rèn)證就有10G空間可用点弯，每個(gè)月有10G的免費(fèi)流量扇调，不過(guò)不綁定域名的話只有30天體驗(yàn)機(jī)會(huì)，我是綁定了我的域名進(jìn)行DNS解析中轉(zhuǎn)抢肛，具體的操作可以參考這一篇博客狼钮，https://www.cnblogs.com/mazhichu/p/12206785.html

7.首屏骨架屏優(yōu)化(選配，看自己實(shí)際需要吧)

1.安裝插件

npm install vue-skeleton-webpack-plugin --save

2.新建骨架屏文件

在src下新建Skeleton文件夾捡絮，其中新建index.js以及index.vue熬芜，在其中寫入以下內(nèi)容，其中福稳，骨架屏的index.vue頁(yè)面樣式請(qǐng)自行編輯

//index.js
import Vue from 'vue'
// 創(chuàng)建的骨架屏 Vue 實(shí)例
import skeleton from './index.vue';

export default new Vue({
    components: {
        skeleton
    },
    template: '<skeleton />'
});

//index.vue
<template>
    <div class="skeleton-box">
        loading
    </div>
</template>

<script lang="ts">
    import {Vue,Component} from "vue-property-decorator";

    @Component({
        name:'Skeleton'
    })
    export default class Skeleton extends Vue{

    }
</script>

<style lang="stylus" scoped>
.skeleton-box{
    font-size 24px
    display flex
    align-items center
    justify-content center
    width 100vh
    height 100vh
}
</style>

3.在`vue.config.js`中配置骨架屏

在vue.config.js中寫入以下內(nèi)容

//骨架屏渲染
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

//path引入
const path = require('path')

//configureWebpack模塊中寫入內(nèi)容
// 骨架屏渲染
config.plugins.push(
    new SkeletonWebpackPlugin({
        webpackConfig: {
            entry: {
                app: path.join(__dirname,'./src/components/Skeleton/index.js')
            }
        }
    })
)

所以涎拉，最終的配置文件如下

// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development';

// 代碼壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')

//骨架屏渲染
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

//path引入
const path = require('path')

// 本地環(huán)境是否需要使用cdn
const devNeedCdn = false

// cdn鏈接
const cdn = {
    // cdn：模塊名稱和模塊作用域命名（對(duì)應(yīng)window里面掛載的變量名稱）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'marked': 'marked',
        'highlight.js': 'hljs',
        'nprogress': 'NProgress',
        'axios': 'axios'
    },
    // cdn的css鏈接
    css: [
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css'
    ],
    // cdn的js鏈接
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/marked/0.8.0/marked.min.js',
        'https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js',
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js',
        'https://cdn.bootcss.com/axios/0.19.2/axios.min.js'
    ]
}

module.exports = {
    productionSourceMap: false,
    chainWebpack: config => {
        // ============注入cdn start============
        config.plugin('html').tap(args => {
            // 生產(chǎn)環(huán)境或本地需要cdn時(shí)，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        // ============注入cdn start============

        // ============壓縮圖片 start============
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
        // ============壓縮圖片 end============
    },
    configureWebpack: config => {
        // 用cdn方式引入，則構(gòu)建時(shí)要忽略相關(guān)資源
        if (isProduction || devNeedCdn) config.externals = cdn.externals

        // 生產(chǎn)環(huán)境相關(guān)配置
        if (isProduction) {
            //gzip壓縮
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp(
                        '\\.(' + productionGzipExtensions.join('|') + ')$'
                    ),
                    threshold: 10240, // 只有大小大于該值的資源會(huì)被處理 10240
                    minRatio: 0.8, // 只有壓縮率小于這個(gè)值的資源才會(huì)被處理
                    deleteOriginalAssets: false // 刪除原文件
                })
            )

            // 代碼壓縮
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        //生產(chǎn)環(huán)境自動(dòng)刪除console
                        compress: {
                            drop_debugger: true,
                            drop_console: true,
                            pure_funcs: ['console.log']
                        }
                    },
                    sourceMap: false,
                    parallel: true
                })
            )
        }

        // 骨架屏渲染
        config.plugins.push(
            new SkeletonWebpackPlugin({
                webpackConfig: {
                    entry: {
                        app: path.join(__dirname,'./src/components/Skeleton/index.js')
                    }
                }
            })
        )

        // 公共代碼抽離
        config.optimization = {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        chunks: 'all',
                        test: /node_modules/,
                        name: 'vendor',
                        minChunks: 1,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 100
                    },
                    common: {
                        chunks: 'all',
                        test: /[\\/]src[\\/]js[\\/]/,
                        name: 'common',
                        minChunks: 2,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 60
                    },
                    styles: {
                        name: 'styles',
                        test: /\.(sa|sc|c)ss$/,
                        chunks: 'all',
                        enforce: true
                    },
                    runtimeChunk: {
                        name: 'manifest'
                    }
                }
            }
        }
    }
}

8.nginx配置緩存

同樣也可以提高網(wǎng)站的訪問(wèn)速度（雖然這點(diǎn)有點(diǎn)偏離前端打包主題了鼓拧，但是對(duì)于自己獨(dú)立開(kāi)發(fā)個(gè)人博客網(wǎng)站的前端來(lái)說(shuō)還是非常有用的０牖稹）在nginx.conf的http模塊中寫入一下內(nèi)容

     # 設(shè)置緩存路徑并且使用一塊最大100M的共享內(nèi)存，用于硬盤上的文件索引季俩，包括文件名和請(qǐng)求次數(shù)钮糖，每個(gè)文件在1天內(nèi)若不活躍（無(wú)請(qǐng)求）則從硬盤上淘汰，硬盤緩存最大10G酌住，滿了則根據(jù)LRU算法自動(dòng)清除緩存店归。
    proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;

然后在nginx.conf的serve模塊中寫入一下內(nèi)容，保存配置赂韵，`nginx -s reload`重啟服務(wù)即可看到效果

location ~* ^.+\.(css|js|ico|gif|jpg|jpeg|png)$ {
 log_not_found off;
 # 關(guān)閉日志
 access_log off;
 # 緩存時(shí)間7天
 expires 7d;
 # 源服務(wù)器
 proxy_pass http://localhost:8888;
 # 指定上面設(shè)置的緩存區(qū)域
 proxy_cache imgcache;
 # 緩存過(guò)期管理
 proxy_cache_valid 200 302 1d;
 proxy_cache_valid 404 10m;
 proxy_cache_valid any 1h;
 proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
 }

本文主要參考于http://www.reibang.com/p/476387c7fea3

另外娱节，再次分享一個(gè)我構(gòu)建的基于`Vue3.0+Typescript`構(gòu)建的空白項(xiàng)目，包括css樣式的初始化祭示，以及基本常用的axios,vue-router,模塊化使用vuex肄满，element-ui已經(jīng)按需引入配置好，還有axios攔截器质涛，axios請(qǐng)求的全局loaindg加載稠歉，路由組件懶加載，以及對(duì)于不同環(huán)境的基本Url封裝汇陆，還附帶了一些常用的方法怒炸，以及包括打包優(yōu)化的cdn引入，代碼壓縮毡代，圖片壓縮阅羹，關(guān)閉map等打包優(yōu)化都已配置完成,關(guān)于ts的使用，要使用修飾符教寂，在Home.vue中捏鱼，常用的使用方法我也都已經(jīng)列舉出來(lái)了，地址為：

記錄了自己的博客在禁用緩存的情況下酪耕，從八九秒加載時(shí)間到最終985ms的優(yōu)化實(shí)踐导梆，開(kāi)啟緩存的情況下能達(dá)到138ms的訪問(wèn)速度，預(yù)覽地址為：https://www.cooldream.fun

本人的個(gè)人博客采用`Vue-cli4.1.2 + typescript`構(gòu)建

項(xiàng)目目錄結(jié)構(gòu)如下

├─ src    //主文件
│  ├─ api    //接口文件夾
|  |  |- config.js    //后端接口地址的配置,將測(cè)試迂烁、開(kāi)發(fā)看尼、生產(chǎn)環(huán)境分開(kāi)
|  |  └─ user.js      //接口文件，配置了token請(qǐng)求頭盟步，具體接口根據(jù)需求修改
│  ├─ assets   //資源文件   
│  ├─ components   //公用組件
│  ├─ directive   //vue自定義指令
|  ├─ filters      //存放過(guò)濾器文件藏斩，自帶了手機(jī)號(hào)加密，手機(jī)號(hào)格式化却盘，時(shí)間日期處理
|  ├─ interceptors    //存放axios攔截器配置狰域，寫入了接口調(diào)用的loading加載以及http狀態(tài)碼報(bào)錯(cuò)攔截
|  ├─ interceptors    //放置公用的接口窜觉，對(duì)數(shù)據(jù)進(jìn)行類型限制
|  ├─ layout      //布局文件，通過(guò)子路由渲染方式實(shí)現(xiàn)北专，具體HTML布局根據(jù)需求修改  
|  ├─ mixins      //混入文件，配置了一個(gè)平滑滾動(dòng)的方法
|  ├─ plugins     //外部插件文件夾旬陡，配置了按需引入的element-ui
|  ├─ reg    //存放正則以及校驗(yàn)的文件夾
|  |  |- reg.ts      //存放正則表達(dá)式拓颓，自帶了傳真，郵箱描孟，qq驶睦，手機(jī)號(hào)，銀行卡號(hào)匿醒，固定電話场航，密碼強(qiáng)度校驗(yàn)正則
|  |  └─ validator.ts      //存放element-ui自定義校驗(yàn)，自帶了傳真廉羔，郵箱溉痢，qq，手機(jī)號(hào)憋他，銀行卡號(hào)孩饼，固定電話，密碼強(qiáng)度自定義校驗(yàn)
|  ├─ router      //路由文件
|  ├─ store       //vuex全局變量文件
|  |  |- index.ts      //store主文件
|  |  └─ module     //store模塊文件夾
|  |  |  └─ user.ts      //存放user相關(guān)的全局變量
|  ├─ stylus   //css預(yù)處理器文件夾
|  |  |- reset.styl      //樣式初始化文件,自帶了非標(biāo)準(zhǔn)盒子竹挡，a標(biāo)簽清除下劃線镀娶，清除內(nèi)外邊距，禁止圖片拖拽等效果
|  |  └─ color.styl     //顏色變量文件
|  ├─ utils   //公用方法文件夾
|  |  |- area.ts      //存放省市區(qū)三級(jí)地區(qū)的數(shù)據(jù)
|  |  |- array.ts      //存放數(shù)組相關(guān)的公用方法揪罕，自帶了兩個(gè)元素交換位置梯码，元素前進(jìn)后退一格，元素置頂或末尾好啰，去重轩娶，刪除指定元素操作
|  |  └─ object.ts    //存放對(duì)象相關(guān)的公用方法，自帶了對(duì)象清空所有值的方法
|  ├─ views   //頁(yè)面文件夾
|  ├─ main.ts   //主配置文件
|  ├─ babel.config.js   //babel配置文件坎怪，寫入了element-ui按需加載的配置
|  ├─ package.json   //npm的包管理文件
|  ├─ tsconfig.json   //ts配置文件
|  ├─ vue.config.js   //vue配置文件

1.關(guān)閉productionSourceMap

首先罢坝，由于最新版的腳手架`不自帶配置文件`了，先在根目錄新建`vue.config.js`文件搅窿，關(guān)閉`productionSourceMap`嘁酿，在`vue.config.js`中寫入如下內(nèi)容

module.exports = {
    productionSourceMap: false
}

2.開(kāi)啟Gzip壓縮

安裝插件`compression-webpack-plugin`，打開(kāi)代碼壓縮男应，`npm install --save-dev compression-webpack-plugin`闹司，現(xiàn)在的`vue.config.js`代碼如下，但是沐飘，需要注意的是游桩，服務(wù)器上nginx也必須開(kāi)啟gzip才能生效

// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development';

// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    productionSourceMap: false,
    configureWebpack: config => {
        // 生產(chǎn)環(huán)境相關(guān)配置
        if (isProduction) {
            //gzip壓縮
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp(
                        '\\.(' + productionGzipExtensions.join('|') + ')$'
                    ),
                    threshold: 10240, // 只有大小大于該值的資源會(huì)被處理 10240
                    minRatio: 0.8, // 只有壓縮率小于這個(gè)值的資源才會(huì)被處理
                    deleteOriginalAssets: false // 刪除原文件
                })
            )
        }
    }
}

打開(kāi)`nginx`文件夾下的`nginx.conf`文件牲迫，在`http`模塊中寫入以下內(nèi)容

    # 開(kāi)啟gzip
    gzip on;

    # 啟用gzip壓縮的最小文件，小于設(shè)置值的文件將不會(huì)壓縮
    gzip_min_length 1k;

    # gzip 壓縮級(jí)別借卧，1-9盹憎，數(shù)字越大壓縮的越好，也越占用CPU時(shí)間铐刘，后面會(huì)有詳細(xì)說(shuō)明
    gzip_comp_level 2;

    # 進(jìn)行壓縮的文件類型陪每。javascript有多種形式，后面的圖片壓縮不需要的可以自行刪除
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    # 是否在http header中添加Vary: Accept-Encoding镰吵，建議開(kāi)啟
    gzip_vary on;

    # 設(shè)置壓縮所需要的緩沖區(qū)大小     
    gzip_buffers 4 16k;

然后輸入命令`nginx -s reload`重啟nginx服務(wù)

如果后端nginx開(kāi)啟了gzip檩禾，可以從`network`中的`Content-Encoding`中看到`gzip`

image.png

3.開(kāi)啟CDN加速(建議選配，CDN雖然速度快疤祭，但沒(méi)有本地打包穩(wěn)定)

將使用的插件使用cdn鏈接盼产，并且配置`webpack`將使用`CDN`的插件不進(jìn)行打包，別忘記還要再`index.html`中引入`js`以及`css`

// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development';

// 本地環(huán)境是否需要使用cdn
const devNeedCdn = false

// cdn鏈接
const cdn = {
    // cdn：模塊名稱和模塊作用域命名（對(duì)應(yīng)window里面掛載的變量名稱）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'marked': 'marked',
        'highlight.js': 'hljs',
        'nprogress': 'NProgress',
        'axios': 'axios'
    },
    // cdn的css鏈接
    css: [
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css'
    ],
    // cdn的js鏈接
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/marked/0.8.0/marked.min.js',
        'https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js',
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js',
        'https://cdn.bootcss.com/axios/0.19.2/axios.min.js'
    ]
}

module.exports = {
    chainWebpack: config => {
        // ============注入cdn start============
        config.plugin('html').tap(args => {
            // 生產(chǎn)環(huán)境或本地需要cdn時(shí)勺馆，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        // ============注入cdn start============
    },
    configureWebpack: config => {
        // 用cdn方式引入戏售，則構(gòu)建時(shí)要忽略相關(guān)資源
        if (isProduction || devNeedCdn) config.externals = cdn.externals
    }
}

接下來(lái)，在`index.html`中引入使用了`CDN`的鏈接

<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%;">
  <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">

    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link
            href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
            rel="stylesheet"
    />
    <% } %>
    <!-- 使用CDN的CSS文件 -->

    <title>CoolDream</title>
  </head>
  <body style="width: 100%;height: 100%;">
    <noscript>
      <strong>We're sorry but blog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

    <!-- 使用CDN的JS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- 使用CDN的JS文件 -->

  </body>
</html>

打包后拋到服務(wù)器上草穆，打開(kāi)開(kāi)發(fā)者工具的network蜈项，如果看到`http`請(qǐng)求`cdn`，那么就代表配置成功了续挟，如圖所示

image.png

4.代碼壓縮

先安裝插件`npm i -D uglifyjs-webpack-plugin`

然后在最上方引入依賴

// 代碼壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

在`configureWebpack`模塊中引入代碼壓縮

// 代碼壓縮
config.plugins.push(
    new UglifyJsPlugin({
        uglifyOptions: {
            //生產(chǎn)環(huán)境自動(dòng)刪除console
            compress: {
                drop_debugger: true,
                drop_console: true,
                pure_funcs: ['console.log']
            }
        },
        sourceMap: false,
        parallel: true
    })
)

5.公共代碼抽離紧卒，寫在`configureWebpack`模塊中

// 公共代碼抽離
config.optimization = {
    splitChunks: {
        cacheGroups: {
            vendor: {
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,
                maxInitialRequests: 5,
                minSize: 0,
                priority: 100
            },
            common: {
                chunks: 'all',
                test: /[\\/]src[\\/]js[\\/]/,
                name: 'common',
                minChunks: 2,
                maxInitialRequests: 5,
                minSize: 0,
                priority: 60
            },
            styles: {
                name: 'styles',
                test: /\.(sa|sc|c)ss$/,
                chunks: 'all',
                enforce: true
            },
            runtimeChunk: {
                name: 'manifest'
            }
        }
    }
}

6.圖片壓縮()

1.使用圖片壓縮插件

先安裝插件npm install image-webpack-loader --save-dev
在chainWebpack中新增以下代碼

// ============壓縮圖片 start============
config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({ bypassOnDebug: true })
    .end()
// ============壓縮圖片 end============

2.將靜態(tài)資源存儲(chǔ)在云端，個(gè)人用的七牛云,對(duì)象存儲(chǔ)用于存儲(chǔ)文件诗祸，使用`cdn`加速讓存儲(chǔ)的靜態(tài)資源訪問(wèn)速度更快跑芳。`(推薦，速度能快挺多)`

我個(gè)人申請(qǐng)了七牛云直颅，實(shí)名認(rèn)證就有10G空間可用博个，每個(gè)月有10G的免費(fèi)流量，不過(guò)不綁定域名的話只有30天體驗(yàn)機(jī)會(huì)功偿，我是綁定了我的域名進(jìn)行DNS解析中轉(zhuǎn)盆佣，具體的操作可以參考這一篇博客，https://www.cnblogs.com/mazhichu/p/12206785.html

7.首屏骨架屏優(yōu)化(選配械荷，看自己實(shí)際需要吧)

1.安裝插件

npm install vue-skeleton-webpack-plugin --save

2.新建骨架屏文件

在src下新建Skeleton文件夾共耍，其中新建index.js以及index.vue，在其中寫入以下內(nèi)容吨瞎，其中痹兜，骨架屏的index.vue頁(yè)面樣式請(qǐng)自行編輯

//index.js
import Vue from 'vue'
// 創(chuàng)建的骨架屏 Vue 實(shí)例
import skeleton from './index.vue';

export default new Vue({
    components: {
        skeleton
    },
    template: '<skeleton />'
});

//index.vue
<template>
    <div class="skeleton-box">
        loading
    </div>
</template>

<script lang="ts">
    import {Vue,Component} from "vue-property-decorator";

    @Component({
        name:'Skeleton'
    })
    export default class Skeleton extends Vue{

    }
</script>

<style lang="stylus" scoped>
.skeleton-box{
    font-size 24px
    display flex
    align-items center
    justify-content center
    width 100vh
    height 100vh
}
</style>

3.在`vue.config.js`中配置骨架屏

在vue.config.js中寫入以下內(nèi)容

//骨架屏渲染
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

//path引入
const path = require('path')

//configureWebpack模塊中寫入內(nèi)容
// 骨架屏渲染
config.plugins.push(
    new SkeletonWebpackPlugin({
        webpackConfig: {
            entry: {
                app: path.join(__dirname,'./src/components/Skeleton/index.js')
            }
        }
    })
)

所以，最終的配置文件如下

// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development';

// 代碼壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')

//骨架屏渲染
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

//path引入
const path = require('path')

// 本地環(huán)境是否需要使用cdn
const devNeedCdn = false

// cdn鏈接
const cdn = {
    // cdn：模塊名稱和模塊作用域命名（對(duì)應(yīng)window里面掛載的變量名稱）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'marked': 'marked',
        'highlight.js': 'hljs',
        'nprogress': 'NProgress',
        'axios': 'axios'
    },
    // cdn的css鏈接
    css: [
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css'
    ],
    // cdn的js鏈接
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/marked/0.8.0/marked.min.js',
        'https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js',
        'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js',
        'https://cdn.bootcss.com/axios/0.19.2/axios.min.js'
    ]
}

module.exports = {
    productionSourceMap: false,
    chainWebpack: config => {
        // ============注入cdn start============
        config.plugin('html').tap(args => {
            // 生產(chǎn)環(huán)境或本地需要cdn時(shí)颤诀，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        // ============注入cdn start============

        // ============壓縮圖片 start============
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
        // ============壓縮圖片 end============
    },
    configureWebpack: config => {
        // 用cdn方式引入字旭，則構(gòu)建時(shí)要忽略相關(guān)資源
        if (isProduction || devNeedCdn) config.externals = cdn.externals

        // 生產(chǎn)環(huán)境相關(guān)配置
        if (isProduction) {
            //gzip壓縮
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp(
                        '\\.(' + productionGzipExtensions.join('|') + ')$'
                    ),
                    threshold: 10240, // 只有大小大于該值的資源會(huì)被處理 10240
                    minRatio: 0.8, // 只有壓縮率小于這個(gè)值的資源才會(huì)被處理
                    deleteOriginalAssets: false // 刪除原文件
                })
            )

            // 代碼壓縮
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        //生產(chǎn)環(huán)境自動(dòng)刪除console
                        compress: {
                            drop_debugger: true,
                            drop_console: true,
                            pure_funcs: ['console.log']
                        }
                    },
                    sourceMap: false,
                    parallel: true
                })
            )
        }

        // 骨架屏渲染
        config.plugins.push(
            new SkeletonWebpackPlugin({
                webpackConfig: {
                    entry: {
                        app: path.join(__dirname,'./src/components/Skeleton/index.js')
                    }
                }
            })
        )

        // 公共代碼抽離
        config.optimization = {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        chunks: 'all',
                        test: /node_modules/,
                        name: 'vendor',
                        minChunks: 1,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 100
                    },
                    common: {
                        chunks: 'all',
                        test: /[\\/]src[\\/]js[\\/]/,
                        name: 'common',
                        minChunks: 2,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 60
                    },
                    styles: {
                        name: 'styles',
                        test: /\.(sa|sc|c)ss$/,
                        chunks: 'all',
                        enforce: true
                    },
                    runtimeChunk: {
                        name: 'manifest'
                    }
                }
            }
        }
    }
}

8.nginx配置緩存

同樣也可以提高網(wǎng)站的訪問(wèn)速度（雖然這點(diǎn)有點(diǎn)偏離前端打包主題了对湃，但是對(duì)于自己獨(dú)立開(kāi)發(fā)個(gè)人博客網(wǎng)站的前端來(lái)說(shuō)還是非常有用的！）在nginx.conf的http模塊中寫入一下內(nèi)容

     # 設(shè)置緩存路徑并且使用一塊最大100M的共享內(nèi)存遗淳，用于硬盤上的文件索引拍柒，包括文件名和請(qǐng)求次數(shù)，每個(gè)文件在1天內(nèi)若不活躍（無(wú)請(qǐng)求）則從硬盤上淘汰屈暗，硬盤緩存最大10G斤儿，滿了則根據(jù)LRU算法自動(dòng)清除緩存。
    proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;

然后在nginx.conf的serve模塊中寫入一下內(nèi)容恐锦，保存配置，`nginx -s reload`重啟服務(wù)即可看到效果

location ~* ^.+\.(css|js|ico|gif|jpg|jpeg|png)$ {
 log_not_found off;
 # 關(guān)閉日志
 access_log off;
 # 緩存時(shí)間7天
 expires 7d;
 # 源服務(wù)器
 proxy_pass http://localhost:8888;
 # 指定上面設(shè)置的緩存區(qū)域
 proxy_cache imgcache;
 # 緩存過(guò)期管理
 proxy_cache_valid 200 302 1d;
 proxy_cache_valid 404 10m;
 proxy_cache_valid any 1h;
 proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
 }

本文主要參考于http://www.reibang.com/p/476387c7fea3

另外疆液，再次分享一個(gè)我構(gòu)建的基于`Vue3.0+Typescript`構(gòu)建的空白項(xiàng)目一铅，包括css樣式的初始化，以及基本常用的axios,vue-router,模塊化使用vuex堕油，element-ui已經(jīng)按需引入配置好潘飘，還有axios攔截器，axios請(qǐng)求的全局loaindg加載掉缺，路由組件懶加載卜录，以及對(duì)于不同環(huán)境的基本Url封裝，還附帶了一些常用的方法眶明，以及包括打包優(yōu)化的cdn引入艰毒，代碼壓縮，圖片壓縮搜囱，關(guān)閉map等打包優(yōu)化都已配置完成,關(guān)于ts的使用丑瞧，要使用修飾符，在Home.vue中蜀肘，常用的使用方法我也都已經(jīng)列舉出來(lái)了绊汹，地址為：https://github.com/Jack-Star-T/Vue2.6.10-typescript

最后編輯于：2021.05.26 16:38:45

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市扮宠，隨后出現(xiàn)的幾起案子西乖，更是在濱河造成了極大的恐慌，老刑警劉巖坛增，帶你破解...
沈念sama閱讀 218,755評(píng)論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件获雕，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡收捣，警方通過(guò)查閱死者的電腦和手機(jī)典鸡，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,305評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)坏晦，“玉大人萝玷，你說(shuō)我怎么就攤上這事嫁乘。” “怎么了球碉？”我有些...
開(kāi)封第一講書人閱讀 165,138評(píng)論 0贊 355
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵蜓斧，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我睁冬，道長(zhǎng)挎春，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書人閱讀 58,791評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任豆拨，我火速辦了婚禮直奋，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘施禾。我一直安慰自己脚线，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,794評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布弥搞。她就那樣靜靜地躺著邮绿，像睡著了一般。火紅的嫁衣襯著肌膚如雪攀例。梳的紋絲不亂的頭發(fā)上船逮，一...
開(kāi)封第一講書人閱讀 51,631評(píng)論 1贊 305
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音粤铭，去河邊找鬼挖胃。笑死，一個(gè)胖子當(dāng)著我的面吹牛梆惯，可吹牛的內(nèi)容都是我干的冠骄。我是一名探鬼主播，決...
沈念sama閱讀 40,362評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼加袋，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼凛辣！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起职烧，我...
開(kāi)封第一講書人閱讀 39,264評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤扁誓，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后蚀之，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體蝗敢，經(jīng)...
沈念sama閱讀 45,724評(píng)論 1贊 315
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,900評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年足删，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了寿谴。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,040評(píng)論 1贊 350
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡失受，死狀恐怖讶泰，靈堂內(nèi)的尸體忽然破棺而出咏瑟，到底是詐尸還是另有隱情，我是刑警寧澤痪署，帶...
沈念sama閱讀 35,742評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布码泞，位于F島的核電站，受9級(jí)特大地震影響狼犯，放射性物質(zhì)發(fā)生泄漏余寥。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,364評(píng)論 3贊 330
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一悯森、第九天我趴在偏房一處隱蔽的房頂上張望宋舷。院中可真熱鬧，春花似錦瓢姻、人聲如沸祝蝠。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 31,944評(píng)論 0贊 22
一樁弒父案汹来，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至改艇，卻和暖如春收班，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背谒兄。一陣腳步聲響...
開(kāi)封第一講書人閱讀 33,060評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工摔桦，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人承疲。一個(gè)月前我還...
沈念sama閱讀 48,247評(píng)論 3贊 371
代替公主和親
正文我出身青樓邻耕，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親燕鸽。傳聞我的和親對(duì)象是個(gè)殘疾皇子兄世，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,979評(píng)論 2贊 355

Vue2.6.10(Vue-cli4)項(xiàng)目打包性能優(yōu)化實(shí)踐

本人的個(gè)人博客采用Vue-cli4.1.2 + typescript構(gòu)建

項(xiàng)目目錄結(jié)構(gòu)如下

1.關(guān)閉productionSourceMap

首先，由于最新版的腳手架不自帶配置文件了唬渗，先在根目錄新建vue.config.js文件典阵，關(guān)閉productionSourceMap，在vue.config.js中寫入如下內(nèi)容

2.開(kāi)啟Gzip壓縮

安裝插件compression-webpack-plugin谣妻，打開(kāi)代碼壓縮，npm install --save-dev compression-webpack-plugin卒稳，現(xiàn)在的vue.config.js代碼如下蹋半，但是，需要注意的是充坑，服務(wù)器上nginx也必須開(kāi)啟gzip才能生效

打開(kāi)nginx文件夾下的nginx.conf文件减江，在http模塊中寫入以下內(nèi)容

然后輸入命令nginx -s reload重啟nginx服務(wù)

如果后端nginx開(kāi)啟了gzip降宅，可以從network中的Content-Encoding中看到gzip

3.開(kāi)啟CDN加速(建議選配骂远，CDN雖然速度快，但沒(méi)有本地打包穩(wěn)定)

將使用的插件使用cdn鏈接腰根，并且配置webpack將使用CDN的插件不進(jìn)行打包激才，別忘記還要再index.html中引入js以及css

接下來(lái)瘸恼，在index.html中引入使用了CDN的鏈接

打包后拋到服務(wù)器上，打開(kāi)開(kāi)發(fā)者工具的network册养，如果看到http請(qǐng)求cdn东帅，那么就代表配置成功了，如圖所示

4.代碼壓縮

先安裝插件npm i -D uglifyjs-webpack-plugin

然后在最上方引入依賴

在configureWebpack模塊中引入代碼壓縮

5.公共代碼抽離捕儒，寫在configureWebpack模塊中

6.圖片壓縮()

1.使用圖片壓縮插件

先安裝插件npm install image-webpack-loader --save-dev

在chainWebpack中新增以下代碼

2.將靜態(tài)資源存儲(chǔ)在云端冰啃，個(gè)人用的七牛云,對(duì)象存儲(chǔ)用于存儲(chǔ)文件，使用cdn加速讓存儲(chǔ)的靜態(tài)資源訪問(wèn)速度更快刘莹。(推薦阎毅，速度能快挺多)

7.首屏骨架屏優(yōu)化(選配，看自己實(shí)際需要吧)

1.安裝插件

2.新建骨架屏文件

3.在vue.config.js中配置骨架屏

8.nginx配置緩存

然后在nginx.conf的serve模塊中寫入一下內(nèi)容，保存配置赂韵，nginx -s reload重啟服務(wù)即可看到效果

本文主要參考于http://www.reibang.com/p/476387c7fea3

本人的個(gè)人博客采用Vue-cli4.1.2 + typescript構(gòu)建

項(xiàng)目目錄結(jié)構(gòu)如下

1.關(guān)閉productionSourceMap

首先罢坝，由于最新版的腳手架不自帶配置文件了，先在根目錄新建vue.config.js文件搅窿，關(guān)閉productionSourceMap嘁酿，在vue.config.js中寫入如下內(nèi)容

2.開(kāi)啟Gzip壓縮

安裝插件compression-webpack-plugin，打開(kāi)代碼壓縮男应，npm install --save-dev compression-webpack-plugin闹司，現(xiàn)在的vue.config.js代碼如下，但是沐飘，需要注意的是游桩，服務(wù)器上nginx也必須開(kāi)啟gzip才能生效

打開(kāi)nginx文件夾下的nginx.conf文件牲迫，在http模塊中寫入以下內(nèi)容

然后輸入命令nginx -s reload重啟nginx服務(wù)

如果后端nginx開(kāi)啟了gzip檩禾，可以從network中的Content-Encoding中看到gzip

3.開(kāi)啟CDN加速(建議選配，CDN雖然速度快疤祭，但沒(méi)有本地打包穩(wěn)定)

將使用的插件使用cdn鏈接盼产，并且配置webpack將使用CDN的插件不進(jìn)行打包，別忘記還要再index.html中引入js以及css

接下來(lái)，在index.html中引入使用了CDN的鏈接

打包后拋到服務(wù)器上草穆，打開(kāi)開(kāi)發(fā)者工具的network蜈项，如果看到http請(qǐng)求cdn，那么就代表配置成功了续挟，如圖所示

4.代碼壓縮

先安裝插件npm i -D uglifyjs-webpack-plugin

然后在最上方引入依賴

在configureWebpack模塊中引入代碼壓縮

5.公共代碼抽離紧卒，寫在configureWebpack模塊中

6.圖片壓縮()

1.使用圖片壓縮插件

先安裝插件npm install image-webpack-loader --save-dev

在chainWebpack中新增以下代碼

2.將靜態(tài)資源存儲(chǔ)在云端，個(gè)人用的七牛云,對(duì)象存儲(chǔ)用于存儲(chǔ)文件诗祸，使用cdn加速讓存儲(chǔ)的靜態(tài)資源訪問(wèn)速度更快跑芳。(推薦，速度能快挺多)

7.首屏骨架屏優(yōu)化(選配械荷，看自己實(shí)際需要吧)

1.安裝插件

2.新建骨架屏文件

3.在vue.config.js中配置骨架屏

8.nginx配置緩存

然后在nginx.conf的serve模塊中寫入一下內(nèi)容恐锦，保存配置，nginx -s reload重啟服務(wù)即可看到效果

本文主要參考于http://www.reibang.com/p/476387c7fea3

推薦閱讀更多精彩內(nèi)容

本人的個(gè)人博客采用`Vue-cli4.1.2 + typescript`構(gòu)建

首先，由于最新版的腳手架`不自帶配置文件`了唬渗，先在根目錄新建`vue.config.js`文件典阵，關(guān)閉`productionSourceMap`，在`vue.config.js`中寫入如下內(nèi)容

安裝插件`compression-webpack-plugin`谣妻，打開(kāi)代碼壓縮，`npm install --save-dev compression-webpack-plugin`卒稳，現(xiàn)在的`vue.config.js`代碼如下蹋半，但是，需要注意的是充坑，服務(wù)器上nginx也必須開(kāi)啟gzip才能生效

打開(kāi)`nginx`文件夾下的`nginx.conf`文件减江，在`http`模塊中寫入以下內(nèi)容

然后輸入命令`nginx -s reload`重啟nginx服務(wù)

如果后端nginx開(kāi)啟了gzip降宅，可以從`network`中的`Content-Encoding`中看到`gzip`

將使用的插件使用cdn鏈接腰根，并且配置`webpack`將使用`CDN`的插件不進(jìn)行打包激才，別忘記還要再`index.html`中引入`js`以及`css`

接下來(lái)瘸恼，在`index.html`中引入使用了`CDN`的鏈接

打包后拋到服務(wù)器上，打開(kāi)開(kāi)發(fā)者工具的network册养，如果看到`http`請(qǐng)求`cdn`东帅，那么就代表配置成功了，如圖所示

先安裝插件`npm i -D uglifyjs-webpack-plugin`

在`configureWebpack`模塊中引入代碼壓縮

5.公共代碼抽離捕儒，寫在`configureWebpack`模塊中

先安裝插件`npm install image-webpack-loader --save-dev`

在`chainWebpack`中新增以下代碼

2.將靜態(tài)資源存儲(chǔ)在云端冰啃，個(gè)人用的七牛云,對(duì)象存儲(chǔ)用于存儲(chǔ)文件，使用`cdn`加速讓存儲(chǔ)的靜態(tài)資源訪問(wèn)速度更快刘莹。`(推薦阎毅，速度能快挺多)`

3.在`vue.config.js`中配置骨架屏

然后在nginx.conf的serve模塊中寫入一下內(nèi)容，保存配置赂韵，`nginx -s reload`重啟服務(wù)即可看到效果

本人的個(gè)人博客采用`Vue-cli4.1.2 + typescript`構(gòu)建

首先罢坝，由于最新版的腳手架`不自帶配置文件`了，先在根目錄新建`vue.config.js`文件搅窿，關(guān)閉`productionSourceMap`嘁酿，在`vue.config.js`中寫入如下內(nèi)容

安裝插件`compression-webpack-plugin`，打開(kāi)代碼壓縮男应，`npm install --save-dev compression-webpack-plugin`闹司，現(xiàn)在的`vue.config.js`代碼如下，但是沐飘，需要注意的是游桩，服務(wù)器上nginx也必須開(kāi)啟gzip才能生效

打開(kāi)`nginx`文件夾下的`nginx.conf`文件牲迫，在`http`模塊中寫入以下內(nèi)容

然后輸入命令`nginx -s reload`重啟nginx服務(wù)

如果后端nginx開(kāi)啟了gzip檩禾，可以從`network`中的`Content-Encoding`中看到`gzip`

將使用的插件使用cdn鏈接盼产，并且配置`webpack`將使用`CDN`的插件不進(jìn)行打包，別忘記還要再`index.html`中引入`js`以及`css`

接下來(lái)，在`index.html`中引入使用了`CDN`的鏈接

打包后拋到服務(wù)器上草穆，打開(kāi)開(kāi)發(fā)者工具的network蜈项，如果看到`http`請(qǐng)求`cdn`，那么就代表配置成功了续挟，如圖所示

先安裝插件`npm i -D uglifyjs-webpack-plugin`

在`configureWebpack`模塊中引入代碼壓縮

5.公共代碼抽離紧卒，寫在`configureWebpack`模塊中

先安裝插件`npm install image-webpack-loader --save-dev`

在`chainWebpack`中新增以下代碼

2.將靜態(tài)資源存儲(chǔ)在云端，個(gè)人用的七牛云,對(duì)象存儲(chǔ)用于存儲(chǔ)文件诗祸，使用`cdn`加速讓存儲(chǔ)的靜態(tài)資源訪問(wèn)速度更快跑芳。`(推薦，速度能快挺多)`

3.在`vue.config.js`中配置骨架屏

然后在nginx.conf的serve模塊中寫入一下內(nèi)容恐锦，保存配置，`nginx -s reload`重啟服務(wù)即可看到效果