小寡妇汆白肉最经典十首歌曲,激情免费看片,把她抵在试衣间疯狂律动

1.項目優(yōu)化

1.1項目可優(yōu)化的內(nèi)容

生成打包報告
第三方庫啟用CDN
Element-ui組件按需加載
路由懶加載
首頁內(nèi)容定制

1.2頁面頂部進(jìn)度條效果

使用nprogess第三方庫

在axios請求攔截器中觸發(fā)
Nprogress.start()

在axios響應(yīng)攔截器中觸發(fā)
Nprogress.done()

1.3 打包時的優(yōu)化

1.3.1清除console

使用babel-plugin-transform-remove-console


安裝：npm install babel-plugin-transform-remove-console --save-dev


.babelrc: 

// 全部清除console

{

  "plugins": ["transform-remove-console"]

}


// with options選擇性刪除

{

  "plugins": [ ["transform-remove-console", { "exclude": [ "error", "warn"] }] ]

}

1.3.2 區(qū)分開發(fā)和生產(chǎn)環(huán)境下使用 babel-plugin-transform-remove-console


// babel.config.js文件里

// 定義一個生產(chǎn)環(huán)境的插件數(shù)組

const prodPlugins = []

// 如果是生產(chǎn)環(huán)境則添加'transform-remove-console'

if (process.env.NODE_ENV === 'production') {

  prodPlugins.push('transform-remove-console')

}

module.exports = {

  presets: [

    '@vue/cli-plugin-babel/preset'

  ],

  plugins: [

    [

      'component',

      {

        libraryName: 'element-ui',

        styleLibraryName: 'theme-chalk'

      }

    ],

    // 將生產(chǎn)環(huán)境的數(shù)組展開到配置中

    ...prodPlugins

  ]

}

1.4 生成打包報告

打包時，為了直觀地發(fā)現(xiàn)項目中存在的問題，可以生成打包報告。

1.4.1 通過命令行參數(shù)的形式生成報告


// 通過vue-cli的命令選項可以生成打包報告

// --report選項可以生成report.html以幫助分析報告內(nèi)容

vue-cli-service build --report

1.4.2 通過可視化的UI面板直接查看報告

??通過儀表盤和分析面板可以看到加載速度和依賴項資源大小占比，從而進(jìn)一步優(yōu)化。

image

1.5 通過vue.config.js修改webpack的默認(rèn)配置

??vue-cli3.0+工具生成的項目，默認(rèn)隱藏了所有webpack的配置項，這樣做的目的時屏蔽項目中的所有配置，讓重心放在項目功能和業(yè)務(wù)邏輯上，省去配置帶了的各種繁瑣配置事項。

vue.config.js官方文檔：vue.config.js官方文檔

1.6 為開發(fā)模式與發(fā)布模式指定不同的打包入口

??默認(rèn)情況下，vue項目中的開發(fā)模式和發(fā)布模式，共同使用喲個打包的入口文件（src/main.js）。為了分離開發(fā)陌生和發(fā)布模式，可以指定不同的打包入口文件。

開發(fā)模式的入口文件為src/main-dev.js
生產(chǎn)模式的入口文件為src/main-prod.js

1.6.1 configureWebpack和chainWebpack

在vue.config.js中，新增configureWebpack和chainWebpack節(jié)點自定義打包配置。
configureWebpack和chainWebpack作用相同。唯一的區(qū)別是修改方式不同：
① chainWebpack鏈?zhǔn)骄幊绦问剑瑏砀淖僿ebpack的默認(rèn)配置
② configureWebpack通過操作對象的形式，來改變webpack的默認(rèn)配置

參考vue.config.js官方文檔：vue.config.js官方文檔

1.6.2 通過chainWebpack自定義打包入口

代碼示列：

// vue.config.js
module.exports = {
    chainWebpack:config=>{
        //發(fā)布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默認(rèn)的打包入口，調(diào)用clear則是刪除默認(rèn)的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //開發(fā)模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

1.7 通過extrenals加載外部CDN資源

默認(rèn)情況下，通過import語法導(dǎo)入的第三方依賴包，最終會被打包合并到同一個文件中，從而導(dǎo)致打包成功后的文件體積過大。
解決辦法：通過webpack的externals節(jié)點，來配置并加載外部的CDN資源，凡是聲明在externals中的第三方依賴包，都不會被打包。
步驟一：聲明需要外部CDN的項目

//使用externals設(shè)置排除項
config.set('externals',{
  vue:'Vue',
  'vue-router':'VueRouter',
  axios:'axios',
  lodash:'_',
  echarts:'echarts',
  nprogress:'NProgress',
  'vue-quill-editor':'VueQuillEditor'
})

步驟二：在public/index.html文件頭部添加CDN樣式css資源

<!-- nprogress 的樣式表文件 -->
<link rel="stylesheet"  />
<!-- 富文本編輯器 的樣式表文件 -->
<link rel="stylesheet"  />
<link rel="stylesheet"  />
<link rel="stylesheet"  />

步驟三：在public/index.html文件頭部添加CDN樣式j(luò)s資源

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本編輯器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

1.8 通過CDN優(yōu)化ElementUi的打包

操作流程如下：
① 在main.js入口文件，注釋掉element-ui的加載代碼
② 在index.thml的頭部區(qū)域中，通過CDN加載element-ui的js和css樣式

<!-- element-ui 的樣式表文件 -->
<link rel="stylesheet"  />
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

1.9 首頁內(nèi)容定制(按需渲染)

開發(fā)環(huán)境的首頁和發(fā)布環(huán)境的首頁展示內(nèi)容的形式有所不同。
如開發(fā)環(huán)境中使用的是import加載第三方包，而發(fā)布環(huán)境則是使用CDN，那么首頁也需根據(jù)環(huán)境不同來進(jìn)行不同的實現(xiàn)。
可以通過插件的方式來定制首頁內(nèi)容，打開vue.config.js，編寫代碼如下：

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......
            
            // 使用htmlWebpackPlugin插件
            config.plugin('html').tap(args=>{
                // 添加參數(shù)isProd，通過isProd來判斷是否渲染
                args[0].isProd = true
                return args
            })
        })

        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')

            // 使用插件
            config.plugin('html').tap(args=>{
                // 添加參數(shù)isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

然后在public/index.html中使用插件判斷是否為發(fā)布環(huán)境并定制首頁內(nèi)容:

<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>電商后臺管理系統(tǒng)</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的樣式表文件 -->
    <link rel="stylesheet"  />
    ........
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <% } %>
  </head>

2. 項目上線

2.1 項目上線相關(guān)配置

通過nodejs創(chuàng)建web服務(wù)器
開啟gzip壓縮配置
配置https服務(wù)
使用pm2管理應(yīng)用

2.1.1 通過node創(chuàng)建web服務(wù)器

創(chuàng)建node項目，并安裝express，通過express快速下黃健web服務(wù)器，將打包的vue項目，托管為靜態(tài)資源。
代碼如下：

const express = require('express')

const app = express()

app.use(express.static('./dist'))

app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

2.1.2 開啟gzip配置

使用gzip可以減小文件體積，是傳輸速度更快。
可以通過服務(wù)端使用express做gzip，配置如下：

// 安裝compression ：npm i compression -D
const express = require('express')
// 導(dǎo)入包
const compression = require('compression')

const app = express()
// 啟用中間件
app.use(compression())
app.use(express.static('./dist'))

app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

2.1.3 配置HTTPS服務(wù)

配置https服務(wù)一般是后臺進(jìn)行處理，前端開發(fā)人員了解即可。
首先，需要申請SSL證書，進(jìn)入https://freessl.cn官網(wǎng)
在后臺導(dǎo)入證書，打開今天資料/素材，復(fù)制素材中的兩個文件到vue_shop_server中
打開app.js文件，編寫代碼導(dǎo)入證書，并開啟https服務(wù)

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')

const app = express()
//創(chuàng)建配置對象設(shè)置公鑰和私鑰
const options = {
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}

app.use(compression())
app.use(express.static('./dist'))

// app.listen(8998,()=>{
//     console.log("server running at http://127.0.0.1:8998")
// })

//啟動https服務(wù)
https.createServer(options,app).listen(443)

2.1.4 使用pm2管理應(yīng)用

打開vue_shop_server文件夾的終端，輸入命令：npm i pm2 -g
使用pm2啟動項目，在終端中輸入命令：pm2 start app.js --name 自定義名稱
查看項目列表命令：pm2 ls
重啟項目：pm2 restart 自定義名稱
停止項目：pm2 stop 自定義名稱
刪除項目：pm2 delete 自定義名稱

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

vue項目打包時的優(yōu)化學(xué)習(xí)

vue項目打包時的優(yōu)化學(xué)習(xí)

1.項目優(yōu)化

1.1項目可優(yōu)化的內(nèi)容

1.2頁面頂部進(jìn)度條效果

1.3 打包時的優(yōu)化

1.3.1清除console

1.3.2 區(qū)分開發(fā)和生產(chǎn)環(huán)境下使用 babel-plugin-transform-remove-console

1.4 生成打包報告

1.4.1 通過命令行參數(shù)的形式生成報告

1.4.2 通過可視化的UI面板直接查看報告

1.5 通過vue.config.js修改webpack的默認(rèn)配置

1.6 為開發(fā)模式與發(fā)布模式指定不同的打包入口

1.6.1 configureWebpack和chainWebpack

1.6.2 通過chainWebpack自定義打包入口

1.7 通過extrenals加載外部CDN資源

1.8 通過CDN優(yōu)化ElementUi的打包

1.9 首頁內(nèi)容定制(按需渲染)

2. 項目上線

2.1 項目上線相關(guān)配置

2.1.1 通過node創(chuàng)建web服務(wù)器

2.1.2 開啟gzip配置

2.1.3 配置HTTPS服務(wù)

2.1.4 使用pm2管理應(yīng)用

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

vue項目打包時的優(yōu)化學(xué)習(xí)

1.項目優(yōu)化

1.1項目可優(yōu)化的內(nèi)容

1.2頁面頂部進(jìn)度條效果

1.3 打包時的優(yōu)化

1.3.1清除console

1.3.2 區(qū)分開發(fā)和生產(chǎn)環(huán)境下使用 babel-plugin-transform-remove-console

1.4 生成打包報告

1.4.1 通過命令行參數(shù)的形式生成報告

1.4.2 通過可視化的UI面板直接查看報告

1.5 通過vue.config.js修改webpack的默認(rèn)配置

1.6 為開發(fā)模式與發(fā)布模式指定不同的打包入口

1.6.1 configureWebpack和chainWebpack

1.6.2 通過chainWebpack自定義打包入口

1.7 通過extrenals加載外部CDN資源

1.8 通過CDN優(yōu)化ElementUi的打包

1.9 首頁內(nèi)容定制(按需渲染)

2. 項目上線

2.1 項目上線相關(guān)配置

2.1.1 通過node創(chuàng)建web服務(wù)器

2.1.2 開啟gzip配置

2.1.3 配置HTTPS服務(wù)

2.1.4 使用pm2管理應(yīng)用

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频