手把手教你構建vue項目（微信h5以及hybrid混合開發）（七）——項目的優化

原創 Tommy·Yang 2020-06-16 09:02

一般項目比較大的時候，這個時候如果不優化項目，h5項目就會加載很慢。這裏提供一些優化技巧，其實一般項目都可以這樣做，引入cdn，壓縮代碼，圖片懶加載，splitChunk分割代碼，去掉console.log下面代碼示例。

1.使用cdn
vue.config.js

const isProduction = process.env.NODE_ENV !== 'development' // 開發和測試環境一樣的配置
let devNeedCdn = false // 本地是否需要注入cdn

// 聲明cdn的配置
const cdn = {
    css: ['https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css'],
    js: [
        'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js',
        'https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
        'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
        // 'https://cdn.bootcss.com/echarts/4.3.0/echarts-en.common.min.js'
    ],
    // cdn：模塊名稱和模塊作用域命名（對應window裏面掛載的變量名稱）
    externals: {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        // echarts: 'echarts',
        vant: 'vant',
    },
}


module.exports = {
    configureWebpack: config => {
        if (isProduction || this.devServer) {
            // 使用externals設置排除項
            config.externals = cdn.externals
        }
    },
 	chainWebpack(config) {
		 // 生產環境和測試環境注入cdn
        config.plugin('html').tap(args => {
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
	}   
}

上面的vue.config.js配置好了之後就需要在public/index.html裏配置自動引入cdn文件
index.html

<!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=0,viewport-fit=cover"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title></title>
    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
    <!-- 使用CDN的CSS文件 -->
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but mixedh5 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>

2.添加文件壓縮
1)先安裝compression-webpack-plugin插件

yarn add compression-webpack-plugin -D

2)在vue.config.js中配置下面以下代碼
vue.config.js

// 引入webpack compression插件
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
	...
	chainWebpack(config) {
        /* 非開發環境 */
        config.when(process.env.NODE_ENV !== 'development', config => {
			.....
           
            // 文件壓縮
            config.plugin('compressionPlugin').use(
                new CompressionPlugin({
                    test: /\.js$|\.html$|.\css/, // 匹配文件名
                    threshold: 10240, // 對超過10k的數據壓縮
                    deleteOriginalAssets: false, // 不刪除源文件
                })
            )
        })
	}
}

最後使用yarn build試驗一下文件壓縮了不小
在這裏插入圖片描述
3.代碼分割
vue-cli4.0可以直接在chainWebpack配置優化項optimization，splitChunk最大的作用就是將資源分拆成一小塊小塊，避免vendor.js文件過大，網絡請求加載靜態資源的時候就很慢。
vue.confg.js中

module.exports = { 
	    chainWebpack(config) {
	    	        config.when(process.env.NODE_ENV !== 'development', config => {
            config.optimization.splitChunks({
                chunks: 'all',
                cacheGroups: {
                    vendor: {
                        name(module) {
                            const packageName = module.context.match(
                                /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                            )[1]
                            return `npm.${packageName.replace('@', '')}`
                        },
                        test: /[\\/]node_modules[\\/]/,
                        minChunks: 1,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 100,
                        chunks: 'initial', // only package third parties that are initially dependent
                    },
                    styles: {
                        name: 'styles',
                        test: /\.(sa|sc|c)ss$/,
                        chunks: 'all',
                        enforce: true,
                    },
                    vantUI: {
                        name: 'chunk-vantUI', // split vantUI into a single package
                        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?vant(.*)/, // in order to adapt to cnpm
                    },
                    commons: {
                        name: 'chunk-commons',
                        test: resolve('src/components'), // can customize your rules
                        minChunks: 3, //  minimum common number
                        priority: 5,
                        reuseExistingChunk: true,
                    },
                },
            })
            config.optimization.runtimeChunk('single')
            config.optimization.minimize(true)

        	})
	    }
}

查看自己生產靜態資源文件每一塊的大小，可以vue-cli-service build --report
生成一個report.html的報告文件，注意它是在dist目錄下生成report.html文件，別找錯地方。
在這裏插入圖片描述
可以比對下配置之前和之後報告結果。就會看到明顯的區別。

4.使用terser去掉生產環境中的console.log
vue.config.js

module.exports = {
	chainWebapck(config) {
		
        /* 生產環境 */
        config.when(process.env.NODE_ENV === 'production', config => {
            // 刪除生產環境的console.log註釋
            config.optimization.minimizer('terser').tap(args => {
                args[0].terserOptions.compress.drop_console = true
                return args
            })
        })
	}
}

5.圖片懶加載
1)首先安裝vue-lazyload

 yarn add vue-lazyload -D

2)在main.js中引入
main.js

import VueLazyload from 'vue-lazyload'
// 懶加載需要使用到的靜態文件
import LoadingImg from '@/assets/img/lazyload_img.jpg'

// 圖片懶加載
Vue.use(VueLazyload, {
    loading: LoadingImg,
    attempt: 1,
})

3）在vue文件中使用

    <div class="img-box">
        <img v-lazy="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1586966508&di=415347371bcb7e05c74ebe10a4c7f352&src=http://bbs.jooyoo.net/attachment/Mon_0905/24_65548_2835f8eaa933ff6.jpg" alt="" />
    </div>

基本優化這幾項，項目的加載速度就會提升很快

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

手把手教你構建vue項目（微信h5以及hybrid混合開發）（四）——指令、過濾器、路由、Store的配置、axios的二次封裝以及使用

這一篇主要是指令、過濾器、路由、Store的配置、axios的二次封裝以及使用 1.過濾器的配置 1)在filters目錄新建filters/index.js,目錄結構如下： └─src │ filters │

Tommy·Yang 2020-06-16 09:02:40

手把手教你構建vue項目（微信h5以及hybrid混合開發）（六）——eslint和prettier相結合

前面一開始的時候我並沒有在項目中增加eslint代碼規範，eslint對於協同工作和代碼規範都是很重要的工具，那麼現在就在已有的項目上配置eslint。 1.通過vue add eslint命令 官網配置地址 命令安裝相關依賴

Tommy·Yang 2020-06-16 09:02:40

手把手教你構建vue項目（微信h5以及hybrid混合開發）（三）——vue.config.js的配置和開發、生產、測試環境的全局變量配置以及使用

這一章主要是有關vue.config.js的配置和開發、生產、測試環境的全局變量配置以及使用 在這裏我直接先將我的vue.config.js代碼貼出來，可以直接拿來使用，代碼優化的內容後面會再集中寫一篇文章 'use strict

Tommy·Yang 2020-06-16 09:02:40

手把手教你構建vue項目（微信h5以及hybrid混合開發）（五）——路由權限配置，微信登錄授權的設計思路以及測試微信登錄授權的小技巧

這一章主要是講路由權限配置，微信登錄授權的設計思路以及測試微信登錄授權的小技巧 1.路由權限和微信登錄授權操作 1）首先我們得在src目錄新建一個setting.js文件 setting.js module.exports = {

Tommy·Yang 2020-06-16 09:02:40

手把手教你構建vue項目（微信h5以及hybrid混合開發）（一）——項目目錄結構

目錄 手把手教你構建vue項目（微信h5以及hybrid混合開發）（一）——項目目錄結構 手把手教你構建vue項目（微信h5以及hybrid混合開發）（二）——安裝移動端常用ui和全局公共樣式以及適配的設置 手把手教你構建vue項

Tommy·Yang 2020-06-16 09:02:29

手把手教你構建vue項目（微信h5以及hybrid混合開發）（二）——安裝移動端常用ui和全局公共樣式以及適配的設置

這一篇主要是安裝移動端常用ui和全局公共樣式以及適配的設置。 開發工具：vscode， 包安裝工具：yarn 這裏補充下，scss是在使用vue-cli4.0創建項目的時候就直接勾選dart-sass的。 一、確認我們要使用的ui

Tommy·Yang 2020-06-16 09:02:29

手把手教你構建vue項目（微信h5以及hybrid混合開發）（四）

Tommy·Yang 2020-03-30 09:21:54

手把手教你構建vue項目（微信h5以及hybrid混合開發）（一）

Tommy·Yang 2020-03-02 23:52:31

手把手教你構建vue項目（微信h5以及hybrid混合開發）（四）——指令、過濾器、路由、Store的配置、axios的二次封裝以及使用

這一篇主要是指令、過濾器、路由、Store的配置、axios的二次封裝以及使用 1.過濾器的配置 1)在filters目錄新建filters/index.js,目錄結構如下： └─src │ filters │

Tommy·Yang 2020-06-16 09:02:40

手把手教你構建vue項目（微信h5以及hybrid混合開發）（六）——eslint和prettier相結合

前面一開始的時候我並沒有在項目中增加eslint代碼規範，eslint對於協同工作和代碼規範都是很重要的工具，那麼現在就在已有的項目上配置eslint。 1.通過vue add eslint命令 官網配置地址 命令安裝相關依賴

Tommy·Yang 2020-06-16 09:02:40

手把手教你構建vue項目（微信h5以及hybrid混合開發）（三）——vue.config.js的配置和開發、生產、測試環境的全局變量配置以及使用

這一章主要是有關vue.config.js的配置和開發、生產、測試環境的全局變量配置以及使用 在這裏我直接先將我的vue.config.js代碼貼出來，可以直接拿來使用，代碼優化的內容後面會再集中寫一篇文章 'use strict

Tommy·Yang 2020-06-16 09:02:40

手把手教你構建vue項目（微信h5以及hybrid混合開發）（五）——路由權限配置，微信登錄授權的設計思路以及測試微信登錄授權的小技巧

這一章主要是講路由權限配置，微信登錄授權的設計思路以及測試微信登錄授權的小技巧 1.路由權限和微信登錄授權操作 1）首先我們得在src目錄新建一個setting.js文件 setting.js module.exports = {

Tommy·Yang 2020-06-16 09:02:40

手把手教你構建vue項目（微信h5以及hybrid混合開發）（一）——項目目錄結構

目錄 手把手教你構建vue項目（微信h5以及hybrid混合開發）（一）——項目目錄結構 手把手教你構建vue項目（微信h5以及hybrid混合開發）（二）——安裝移動端常用ui和全局公共樣式以及適配的設置 手把手教你構建vue項

Tommy·Yang 2020-06-16 09:02:29

手把手教你構建vue項目（微信h5以及hybrid混合開發）（二）——安裝移動端常用ui和全局公共樣式以及適配的設置

這一篇主要是安裝移動端常用ui和全局公共樣式以及適配的設置。 開發工具：vscode， 包安裝工具：yarn 這裏補充下，scss是在使用vue-cli4.0創建項目的時候就直接勾選dart-sass的。 一、確認我們要使用的ui

Tommy·Yang 2020-06-16 09:02:29

手把手教你構建vue項目（微信h5以及hybrid混合開發）（四）

Tommy·Yang 2020-03-30 09:21:54