業(yè)務(wù)背景

當(dāng)一個(gè)項(xiàng)目運(yùn)營足夠長的時(shí)間，頁面迭代次數(shù)足夠多，頁面文件夾越來越多，這時(shí)候不可避免的會遇到性能瓶頸，由于冗長的代碼報(bào)，各種古來的頁面和圖表信息；導(dǎo)致項(xiàng)目打包越來越慢，同時(shí)也影響了項(xiàng)目啟動數(shù)據(jù)和打包后的bundle文件文件體積，影響了項(xiàng)目加載和用戶體驗(yàn)；所以對一個(gè)前端vue項(xiàng)目打包優(yōu)化十分有必要，做打包性能優(yōu)化這件事的主意意義也是為了優(yōu)化項(xiàng)目啟動速度和性能、必要的清理數(shù)據(jù)、減少打包后的體積。

項(xiàng)目打包時(shí)間分析方法

使用vue-cli自帶的 npm run build --report生成的報(bào)告查看和分析打包bundle文件情況，或者通過使用使用 speed-measure-webpack-plugin 分析 loader 和 plugin 的加載速度;

操作： platform-h5 ,channel-ctrip。

通過插件分析主要耗時(shí)是在 UglifyJsPlugin、sass-loader、babel-loader and ts-loader 2. 然后對比引入 webpack-plugin-inject-style 的打包時(shí)間。

該插件的作用：是在構(gòu)建前把不相關(guān)依賴的 css 打入依賴中，由于分離的 css 很多，所以很影響打包時(shí)間

優(yōu)化配置的基本思路

前置操作，先通過 webpack-bundle-analyzer 查看資源樹

比如在 vue-cli3 中，需要先安裝插件 webpack-bundle-analyzer

安裝方式：

npm install webpack-bundle-analyzer

安裝成功后在 vue.config.js 中添加分析工具的配置：

運(yùn)行

npm run build --report

即可查看，如下為優(yōu)化前的資源樹，可以看到光黃色部分就占了一大半的資源，有 4.32M，深藍(lán)色的 chunk-vendors 也是很大，有 2.37M，這兩個(gè)文件是優(yōu)化的重點(diǎn)。

在打包優(yōu)化之前，可以先對項(xiàng)目進(jìn)行一些基本的配置優(yōu)化，比如關(guān)閉一些不必要的默認(rèn)配置。

1.vue.config.js 文件中修改：productionSourceMap 為 false

productionSourceMap ：false(vue.config.js)

為 true 的時(shí)候在最終打包的文件中會出現(xiàn)一些 map 文件。

map 文件的作用在于：項(xiàng)目打包后，代碼都是經(jīng)過壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。

有了 map 就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)。如果不關(guān)掉，生產(chǎn)環(huán)境是可以通過 map 文件看到源碼的。

2.針對首屏請求數(shù)進(jìn)行優(yōu)化—關(guān)閉 Prefetch，關(guān)閉 preload

vue-cli3 默認(rèn)開啟 prefetch(預(yù)加載模塊)和 preload，提前獲取用戶未來可能會訪問的內(nèi)容，在首次加載時(shí)會把路由文件都下載，所以優(yōu)化首次加載時(shí)，需要將其關(guān)閉，在 vue.config.js 中，做如下修改

官方說明：

一、采用路由懶加載

以函數(shù)的形式動態(tài)引入，可以把各自的路由文件分別打包，只有在解析給定的路由時(shí)，才會下載路由組件。如下設(shè)置：

二、element-ui 組件按需加載

官網(wǎng)相關(guān)文檔

1.在 vue-cli3 項(xiàng)目中，如果沒有 babel.config.js，則需要安裝 Babel:

npm install @babel/core @babel/preset-env

2.按照官網(wǎng)文檔安裝

npm install babel-plugin-component -D

3.babel.config.js 文件中改為：

module.exports ={
  "presets": ['@vue/app',["@babel/preset-env"]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

4.新建一個(gè)按需導(dǎo)入 element-ui 的文件，elComponentImport.js

按需引入的 element-ui 組件

import { 
    Button, Select, Input, Form, Dialog, 
    DatePicker, Radio, Option, Checkbox, Table, 
    Tree, Card,  FormItem, Dropdown, Menu, 
    MenuItem, MenuItemGroup, Badge, Switch, DropdownMenu, 
    DropdownItem, Submenu, RadioGroup, CheckboxGroup, TableColumn, 
    Loading, Pagination, MessageBox, Tooltip, Tag, 
    Upload, Transfer } from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';
export default Vue => {
    Vue.prototype.$ELEMENT = { size: 'small'};
    Vue.use(Button)
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Input);
    Vue.use(Form);
    Vue.use(FormItem)
    Vue.use(Dialog)
    Vue.use(DatePicker)
    Vue.use(Radio)
    Vue.use(RadioGroup)
    Vue.use(Checkbox)
    Vue.use(CheckboxGroup)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Tree)
    Vue.use(Card)
    Vue.use(Menu)
    Vue.use(Submenu)
    Vue.use(MenuItem)
    Vue.use(MenuItemGroup)
    Vue.use(Dropdown)
    Vue.use(DropdownMenu)
    Vue.use(DropdownItem)
    Vue.use(Badge)
    Vue.use(Switch)
    Vue.use(Loading)
    Vue.use(Loading.directive)
    Vue.use(Pagination)
    Vue.use(Tooltip)
    Vue.use(Tag)
    Vue.use(Upload)
    Vue.use(Transfer)
    Vue.prototype.$loading = Loading.service
    Vue.prototype.$alert = MessageBox.alert
    Vue.prototype.$confirm = MessageBox.confirm
}

5.刪除 main.js 中的

import ElmentUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElmentUI,{size:'small'});

6.添加引入按需導(dǎo)入的文件并注冊

import eleme from "./components/elComponentImport.js";

Vue.use(eleme);

此時(shí)打包后的資源樹：好吧，vendors 文件減少了一丟丟，效果不明顯。

三、公用代碼提取，使用 CDN 加載--vue,vuex,vue-router,axios

對于vue, vuex, vue-router，axios等，可以利用wenpack的externals參數(shù)來配置，這里設(shè)定只需要在生產(chǎn)環(huán)境中才需要使用:

配置方法是 在 vue.config.js 中添加：

只有在生產(chǎn)環(huán)境才注入 cdn。

然后在 index.html 中添加引用即可，打包之后可以在瀏覽器中看到 vue.js 這些資源首次加載會是從 cdn 下載：

四、使用 CDN 加載資源–echarts,xlsx

為了徹底在生產(chǎn)環(huán)境的項(xiàng)目中去掉 echarts 和 xlsx 打包，則需要做以下改變：

并且暴露出 echarts 和 xlsx 的全局變量：

五、不拆分 CSS

vue-cli3 中默認(rèn)會開啟一個(gè) css 分離插件，ExtractTextPlugin，這個(gè)插件的作用是：使每個(gè)模塊的 css 文件都會分離出來，這樣會導(dǎo)致打包很多小的 css 文件，不僅不利于網(wǎng)頁的加載，大量的時(shí)間耗費(fèi)在 http 請求上。而且相互依賴的 css 會造成網(wǎng)頁在解析的過程中不斷的觸發(fā)重繪，這將對性能造成極大的影響。為了避免此現(xiàn)象，可以在 vue.config.js 中關(guān)閉這個(gè)插件：把 extract 設(shè)置為 false 之后，打包出來的文件中直接就沒有 css 文件夾，打包在了 js 文件當(dāng)中。extract 為 true 時(shí)，將 css 單獨(dú)剝離出到一個(gè)文件夾。當(dāng)然，首屏加載文件數(shù)減少，但體積會變大，最終測下來的首屏加載速度沒有太大差別。

css: {
    // 是否使用css分離插件 ExtractTextPlugin
    extract: false,
    // 開啟 CSS source maps?
    sourceMap: false,
    // css預(yù)設(shè)器配置項(xiàng)
    loaderOptions: {},
    // 啟用 CSS modules for all css / pre-processor files.
    modules: false
},

是否要css拆分就見仁見智，具體項(xiàng)目具體分析吧。我過去工作中做vue一般是不建議拆分。

總結(jié)

到此這篇關(guān)于Vue項(xiàng)目打包優(yōu)化實(shí)踐的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目打包優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！