從0到1搭建element后臺(tái)框架優(yōu)化篇(打包優(yōu)化)

更新時(shí)間：2019年05月12日 10:56:11 作者：zyhing

這篇文章主要介紹了從0到1搭建element后臺(tái)框架優(yōu)化篇(打包優(yōu)化)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前言

hello,咱又見了~~嘻嘻。本次主要來說說這個(gè)打包優(yōu)化的問題。一個(gè)vue項(xiàng)目從開發(fā)到上線必須得經(jīng)歷打包過程，一個(gè)項(xiàng)目的打包優(yōu)化與否都決定了你這個(gè)項(xiàng)目的運(yùn)行速度以及用戶體驗(yàn)。本次主要是針對(duì)vue.config,js的配置進(jìn)行優(yōu)化。項(xiàng)目地址

開發(fā)環(huán)境與生產(chǎn)環(huán)境

開發(fā)環(huán)境與生產(chǎn)環(huán)境的配置也是開發(fā)中的必不可少的一環(huán)。本項(xiàng)目是由vue-cli3開發(fā)，vue-cli3深度集成了webpack,如果不熟悉vue-cli3可以先去官網(wǎng)看看相關(guān)配置。

開發(fā)環(huán)境

在項(xiàng)目根目錄下新建.env.development文件表明是開發(fā)環(huán)境。

 VUE_APP_CURRENTMODE ="development" //當(dāng)前的環(huán)境
 VUE_APP_LOGOUT_URL="http://localhost:3000/" //開發(fā)環(huán)境的地址

生產(chǎn)環(huán)境

在項(xiàng)目根目錄下新建.env.production文件表明是生產(chǎn)環(huán)境。

 VUE_APP_CURRENTMODE ="development" //當(dāng)前的環(huán)境
 VUE_APP_LOGOUT_URL="xxx" //生產(chǎn)環(huán)境的地址

當(dāng)然你也可以自己創(chuàng)建一個(gè)測(cè)試環(huán)境.env.test,同樣可以像上邊一樣配置。

環(huán)境運(yùn)用

那么接下來我們?cè)趺从盟?？這里不得不說一下的是package.json里面的兩個(gè)命令serve,build,其實(shí)對(duì)應(yīng)的是全命令是vue-cli-service serve --mode development,vue-cli-service build --mode production,如果你想要在構(gòu)建命令中使用開發(fā)環(huán)境變量，那么可以加入

"dev-build": "vue-cli-service build --mode development"

接下來在vue.config.js運(yùn)用它。

 config.plugin('define').tap(args => {
   args[0]['process.env'].VUE_APP_LOGOUT_URL = JSON.stringify(process.env.VUE_APP_LOGOUT_URL)
   console.log(args[0])
   return args;
 });

這里有必要說下，這段代碼是寫在chainWebpack配置項(xiàng)下面。這段代碼其實(shí)運(yùn)用了兩個(gè)webpack插件webpack-chain允許配置鏈?zhǔn)讲僮?，以及webpack.DefinePlugin。

webpack-chain：嘗試通過提供可鏈?zhǔn)交蝽樍魇降?API 創(chuàng)建和修改webpack 配置。了解更多
webpack.DefinePlugin：它的作用是定義全局常量，是常量。即在模塊用它定義的全局常量，那么你就不能改變它。也就是說我定義了一個(gè)process.env.VUE_APP_LOGOUT_URL常量，在src文件夾下面都可以使用。了解更多

分包（code splitting）

首先思考，我們引入的第三方包與我們的業(yè)務(wù)代碼一起打包會(huì)產(chǎn)生什么問題？

顧名思義，我們的業(yè)務(wù)代碼變動(dòng)比較頻繁,而我們引入的第三方包基本上不會(huì)變動(dòng)。瀏覽器會(huì)有緩存，沒有變動(dòng)的文件會(huì)直接從緩存中讀取，這也間接的優(yōu)化了網(wǎng)站的訪問速速。

接下來配置vue.config.js,

分割第三方庫(kù)

 //代碼分割
 config.optimization.minimize(true);
 config.optimization.splitChunks({
  chunks: 'all',
  cacheGroup:{
  //vue2-editor單獨(dú)打一個(gè)包
   vueEdior: {
   name: 'vueEdior',
   test: /[\\/]node_modules[\\/]vue2-editor[\\/]/,
   priority: 10 // 優(yōu)先級(jí)要大于 vendors 不然會(huì)被打包進(jìn) vendors
   },
   //其余的第三方包打進(jìn)vendor
   vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
   }
  }
 })

分割共用文件

組件是vue項(xiàng)目的重要組成部分。相當(dāng)一部分組件都可以公用，在不同的文件中引入，因此我們可以將這部分公用的組件直接分割出來。

 config.optimization.minimize(true);
 config.optimization.splitChunks({
  chunks: 'all',
  cacheGroup:{
   vueEdior: {
   name: 'vueEdior',
   test: /[\\/]node_modules[\\/]vue2-editor[\\/]/,
   priority: 10 // 優(yōu)先級(jí)要大于 vendors 不然會(huì)被打包進(jìn) vendors
   },
   public: {
   name: 'public',
   test: resolve('src/components'),
   minSize: 0, //表示在壓縮前的最小模塊大小,默認(rèn)值是 30kb
   minChunks: 2, // 最小公用次數(shù)
   priority: 5, // 優(yōu)先級(jí)
   reuseExistingChunk: true // 公共模塊必開啟
   },
   //其余的第三方包打進(jìn)vendor
   vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
   }
  }
 })

打包完后會(huì)發(fā)現(xiàn)dist/static/js,多了一個(gè)vueEditor和public文件，這就表明分割完成。

map文件處理和別名設(shè)置(alias)

map文件

我們可以進(jìn)一步優(yōu)化，打包默認(rèn)生成map文件,從而導(dǎo)致包的體積過大，這時(shí)我們需要設(shè)定一個(gè)屬性來關(guān)閉它。

productionSourceMap: false

別名設(shè)置

alias運(yùn)用的好處在于不用一級(jí)級(jí)的去找，而是直接鎖定位置，從而減少文件搜索時(shí)間。

 //設(shè)置別名
 config.resolve.alias
  .set('@', resolve('src'))
  .set('@api', resolve('src/api/api'))//接口地址
  .set('@assets', resolve('src/assets'))

gzip壓縮與去console插件

如果上面的方式都編寫了，文件依舊過大，這個(gè)時(shí)候不得不考慮代碼壓縮和去掉console插件了，可以說為了優(yōu)化項(xiàng)目，“無(wú)所不用其極”。

gzip壓縮

首先安裝開始安裝

cnpm install compression-webpack-plugin --save-dev

然后在configureWebpack里面配置它

 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 new CompressionWebpackPlugin({
  filename: '[path].gz[query]',
  algorithm: 'gzip',
  test: new RegExp(
   '\\.(' +
   ['js', 'css'].join('|') +
   ')$',
  ),
  threshold: 10240,
  minRatio: 0.8,
  }),

值得注意的是gzip壓縮文件需要后端來配合支持，如果后端沒有支持那么項(xiàng)目加載的依舊是沒有壓縮的文件。

去console插件

首先安裝

cnpm install uglifyjs-webpack-plugin --save-dev

然后在configureWebpack里面配置它

 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 new UglifyJsPlugin({
  uglifyOptions: {
   compress: {
   warnings: false,
   drop_debugger: true,
   drop_console: true,
   },
  },
  sourceMap: false,
  parallel: true,
  }),

cdn引入

有的同學(xué)說后端沒有支持gzip壓縮加載，那怎么辦?那只有涼拌咯~~~。
這里給大家介紹一個(gè)cdn引入的方式，有的第三方插件太大，導(dǎo)致單獨(dú)分包后還是挺大的，這個(gè)時(shí)候可以考慮用cdn的方式引入文件。

無(wú)插件引入cdn

首先我們不讓webpack打包用cdn引入的文件

 //對(duì)一些不經(jīng)常改動(dòng)的庫(kù)，可以通過cdn引入，webpack不對(duì)他們打包 
 let externals = {
  'vue': 'Vue',
  'axios': 'axios',
  'element-ui': 'ELEMENT',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'echarts': 'echarts',
  'vue2-editor': 'VueEditor'
 }

然后配置cdn

 const cdn = {
  css: [
  //element-ui css
  'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
  ],
  js: [
  //vue
  'https://unpkg.com/vue@2.6.10/dist/vue.min.js',
  //axios
  'http://cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js',
  //vuex
  'https://unpkg.com/vuex@3.1.0/dist/vuex.min.js',
  //vue-router
  'https://unpkg.com/vue-router@3.0.6/dist/vue-router.min.js',
  //element
  'https://unpkg.com/element-ui@2.7.2/lib/index.js',
  //echarts
  'https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js',
  //vue2-editor
  "https://unpkg.com/vue2-editor@2.6.6/dist/vue2-editor.js"
  ]
 }

接下來在chainWebpack配置

 process.env.VUE_APP_CURRENTMODE === 'production') {
  config.externals(externals)//忽略打包
  config.plugin('html')
  .tap(args => {
   args[0].cdn = cdn;
   return args
  })
 }

這里需要解釋的是config.plugin('html')其實(shí)是運(yùn)用了 html-webpack-plugin插件在其實(shí)例化的options掛載cdn對(duì)象，然后通過ejs模板語(yǔ)法，讀取相關(guān)cdn。

緊接著我們需要在public/index.html中讀取相關(guān)cdn

 <% if (process.env.VUE_APP_CURRENTMODE === 'production') { %>
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%=css%>" rel="external nofollow" as="style">
  <% } %>
  <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
  <% } %>
 <% } %>

至此cdn引入完成

插件引入cdn

由于手動(dòng)引入cdn太過麻煩，而且擔(dān)心版本變化，每次都需要手動(dòng)去更改，所以為了更好的開發(fā)體驗(yàn)，引入了自動(dòng)匹配cdn插件，webpack-cdn-plugin。接下來開始安裝

cnpm install webpack-cdn-plugin --save

實(shí)例化插件

const cdnPlugin = require('webpack-cdn-plugin')

接下來開始在configureWebpack中引用

 new cdnPlugin({
  modules: [
   { name: 'vue', var: 'Vue', path: 'dist/vue.min.js' },
   { name: 'axios', var: 'axios', path: 'dist/axios.min.js' },
   { name: 'vuex', var: 'Vuex', path: 'dist/vuex.min.js' },
   { name: 'element-ui', var: 'ELEMENT', path: 'lib/index.js', style: 'lib/theme-chalk/index.css' },
   { name: 'echarts', var: 'echarts', path: 'dist/echarts.min.js' },
   { name: 'vue2-editor', var: 'VueEditor', path: 'dist/vue2-editor.js' },
   { name: 'vue-router', var: 'VueRouter', path: 'dist/vue-router.min.js' },
  ],
  publicPath: '/node_modules'
  })

name:插件名
var :項(xiàng)目中實(shí)例化的名字
path：路徑名稱
style:css路徑名稱

更多了解請(qǐng)參考官方文檔。

總體來說引入第三方cdn確實(shí)能帶來不錯(cuò)的效果，但是有可能不穩(wěn)定，因此建議大家在實(shí)際開發(fā)中自己去申請(qǐng)一個(gè)專屬的cdn域名，將網(wǎng)站所要用到庫(kù)直接上傳上去。

結(jié)語(yǔ)

本期的打包優(yōu)化就到這里啦！感覺有很多廢話。哈哈~~，最后感謝大家閱讀，如果有問題以及錯(cuò)誤請(qǐng)及時(shí)指正。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: