這篇文章主要介紹vue中webpack打包優(yōu)化操作技巧有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),前進(jìn)企業(yè)網(wǎng)站建設(shè),前進(jìn)品牌網(wǎng)站建設(shè),網(wǎng)站定制,前進(jìn)網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,前進(jìn)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

webpack是react項(xiàng)目標(biāo)配的打包工具，和NPM搭配起來(lái)使用管理模塊實(shí)在非常方便。

??webapck 把所有的靜態(tài)資源都看做是一個(gè) module，通過(guò) webpack，將這些 module 組成到一個(gè) bundle 中去，從而實(shí)現(xiàn)在頁(yè)面上引入一個(gè) bundle.js，來(lái)實(shí)現(xiàn)所有靜態(tài)資源的加載。

先給大家看一下項(xiàng)目的目錄結(jié)構(gòu)：

 

就是正常的項(xiàng)目結(jié)構(gòu)，簡(jiǎn)單說(shuō)一下吧：

• build文件夾包含的是一些打包配置的一下東西

• config文件夾是項(xiàng)目的基礎(chǔ)配置

• dist是打包之后的文件

• node_modules是項(xiàng)目的依賴(lài)包

• src文件夾里面是項(xiàng)目的源碼

• static文件夾里面放的是一些項(xiàng)目使用的靜態(tài)資源

• index.html是項(xiàng)目的首頁(yè)

• package.json文件是項(xiàng)目的配置json

• yarn.lock是使用yarn鎖定項(xiàng)目用的依賴(lài)

優(yōu)化思路

項(xiàng)目打包時(shí)間長(zhǎng)，原因無(wú)外乎就是項(xiàng)目整體比較龐大、依賴(lài)復(fù)雜、組件之前拆分不夠合理。

對(duì)于這三個(gè)問(wèn)題呢，我們可以針對(duì)下面這幾個(gè)方面去做一下處理：

• 對(duì)項(xiàng)目進(jìn)行路由屏蔽，只打包自己需要打包的部分（我司就是好幾個(gè)項(xiàng)目合并在了一起，至于原因則是 需求類(lèi)似，所以放在一起比較省事 -_-||| 開(kāi)發(fā)過(guò)程中是省了不少事，但是現(xiàn)在一樣要還的?。。。。?/p>

• 依賴(lài)關(guān)系復(fù)雜，這里說(shuō)的是項(xiàng)目中的依賴(lài)模塊比較多，像我們現(xiàn)在這個(gè)項(xiàng)目，光算依賴(lài)包的話(huà)就有40+，另外一個(gè)重要原因就是組件之間存在相同引用的依賴(lài)。解決思路是把項(xiàng)目中重用的依賴(lài)抽離出來(lái)進(jìn)行單獨(dú)打包。

• 組件在寫(xiě)的過(guò)程中，需要考慮好這個(gè)組件的使用方向，以及實(shí)現(xiàn)功能，不能混為一談。

實(shí)際操作

有了整體的思路，那么開(kāi)搞就可以啦 去webpack文檔去看了一下有一個(gè)DllPlugin，這個(gè)插件就是幫助我們解決問(wèn)題的關(guān)鍵，下面是我webpack.dll.config的代碼：

var path = require("path");
var webpack = require("webpack");
function resolve (dir) {
 return path.join(__dirname, '..', dir)
}
module.exports = {
 // 你想要打包的模塊的數(shù)組
 entry: {
 vendor: ['vue', 'lodash', 'vuex', 'axios', 'vue-router', 'iview', 'element-ui',
  'echarts','xlsx','jquery','vue-fullcalendar','vue-cookie','handsontable']
 },
 output: {
 path: path.join(__dirname, '../dist/vendor-dll-js'), // 打包后文件輸出的位置
 filename: '[name].dll.js',
 library: '[name]_library'
 // vendor.dll.js中暴露出的全局變量名。
 // 主要是給DllPlugin中的name使用，
 // 故這里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
 },
 resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
 }
 },
 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, '.', '[name]-manifest.json'),
  name: '[name]_library',
  context: __dirname
 }),
 // 壓縮打包的文件，與該文章主線(xiàn)無(wú)關(guān)
 new webpack.optimize.UglifyJsPlugin({
  compress: {
  warnings: false
  }
 })
 ]
};

我們需要將項(xiàng)目中具有重用性的包抽離出來(lái)，放在vendor數(shù)組里面，然后在下面output里面定義一下打包輸出的文件路徑，然后在resolve里面配置解析參數(shù)，最后定義使用的DllPlugin插件，UglifyJsPlugin是壓縮js的插件

Dllplugin里的path，會(huì)輸出一個(gè)vendor-manifest.json，這是用來(lái)做關(guān)聯(lián)id的，打包的時(shí)候不會(huì)打包進(jìn)去，所以不用放到static里 然后運(yùn)行一下 webpack -p --progress --config build/webpack.dll.conf.js

成功以后，static下會(huì)有dll.vendor.js，根目錄下會(huì)有vendor.manifest.json 各自打開(kāi)看一下，就會(huì)看到依賴(lài)庫(kù)的源碼和匹配id

ok，到這里，抽離依賴(lài)庫(kù)的事情就完成了，那么接下來(lái)問(wèn)題就是怎么引用呢，怎么在dev和build跑呢？

這里補(bǔ)了一點(diǎn)dll和commonsChunk概念上的區(qū)別，commonsChunk之所以慢和大，是因?yàn)槊看蝦un的時(shí)候，都會(huì)去做一次打包，而實(shí)際上我們不會(huì)一直去更新我們引用的依賴(lài)庫(kù)，所以dll的做法就等于是，事先先打包好依賴(lài)庫(kù)，然后只對(duì)每次都修改的js做打包。

繼續(xù)上面的步驟，我們需要根據(jù)生成的json文件去修改webpack.base.config文件：

const manifest = require('../vendor-manifest.json')
......
plugins: [
 new webpack.DllReferencePlugin({
  manifest
 })
 ]

然后打開(kāi)index.html，在底部加上 <script src="./static/dll.vendor.js"></script> ；

執(zhí)行一下 npm run build ,一起正常的話(huà)，表示你的操作是正確的。

升級(jí)處理

至此優(yōu)化的問(wèn)題基本已經(jīng)解決了，但是在處理過(guò)程中需要進(jìn)行復(fù)制粘貼，還要對(duì)index.html文件進(jìn)行操作，如果是對(duì)于項(xiàng)目不熟悉的人來(lái)進(jìn)行開(kāi)發(fā)項(xiàng)目的話(huà)，就會(huì)出現(xiàn)一些小的問(wèn)題，所以我決定繼續(xù)往下研究一下：

思路還是上面的思路，我們下面需要進(jìn)行的操作呢就是對(duì)與之前的處理進(jìn)行優(yōu)化，通過(guò)配置文件，和命令去實(shí)現(xiàn)我們想要的效果

首先我們將上面 webpack.dll.config 文件里面的entry配置項(xiàng)拿出來(lái)，在config文件夾下新建一個(gè)dll.js

module.exports = {
 entry: {
 // 這里的依賴(lài)順序必須是：對(duì)象從上往下依賴(lài)，數(shù)組從右到左依賴(lài)（如果互不依賴(lài)的可以忽略順序）
 ui: ['iview', 'element-ui'],
 tool: ['lodash', 'jquery', 'axios', 'vue-fullcalendar'],
 vue: ['vue', 'vuex', 'vue-router', 'vue-cookie'],
 xlsx: ['xlsx'],
 echarts: ['echarts'],
 other: ['handsontable'],
 },
 outFile: '../static/dll'
};

這里面其實(shí)就是我們一開(kāi)始寫(xiě)的entry的配置項(xiàng)，根據(jù)這個(gè)js去打包的文件有一個(gè)順序，就是我總結(jié)的這個(gè)：

這里的依賴(lài)順序必須是：對(duì)象從上往下依賴(lài)，數(shù)組從右到左依賴(lài)（如果互不依賴(lài)的可以忽略順序）

如果不按照這個(gè)順序去寫(xiě)的話(huà)，會(huì)出現(xiàn)依賴(lài)錯(cuò)誤的問(wèn)題?。?！

然后在output里面再進(jìn)行一下配置：

output: {
 path: path.join(__dirname, dllConfig.outFile), // 打包后文件輸出的位置
 filename: '[name].dll.[chunkhash].js',
 library: '[name]_library'
 // 主要是給DllPlugin中的name使用，
 // 故這里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
 },

這樣在執(zhí)行 webpack -p --progress --config build/webpack.dll.conf.js 指令的時(shí)候會(huì)生成如下：

 

是不是看到文件后面的hash就一臉懵逼，這怎么辦，我們沒(méi)有辦法去進(jìn)行復(fù)制粘貼了！?。ㄎ覀兊哪康牟痪褪遣贿M(jìn)行復(fù)制粘貼嗎 正經(jīng)臉-_-）

要實(shí)現(xiàn)命令操作之后不進(jìn)行復(fù)制粘貼操作就需要使用webpack的HtmlWebpackPlugin插件

在plugins里面配置一下HtmlWebpackPlugin

new HtmlWebpackPlugin({
 filename: path.join(__dirname, '../', config.dev.index),
 template: 'index.ejs',
 inject: false
}),

然后在根目錄添加一個(gè)index.ejs模版（ejsGitHub地址 ）， index.ejs中代碼如下:

<body>
 <div id="app"></div>
 <!-- dll files will be auto injected -->
 <% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script type="text/javascript" src="/<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
 <% } %>
 <!-- built files will be auto injected -->
</body>

最后需要在config文件夾下的index.js進(jìn)行一下修改： 在dev中添加： index: 'index.html',

項(xiàng)目在執(zhí)行dev指令或者build指令之前需要先執(zhí)行： webpack -p --progress --config build/webpack.dll.conf.js 在dll指令結(jié)束后 執(zhí)行其他操作就可以完美的玩耍了

以上是“vue中webpack打包優(yōu)化操作技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱(chēng)：vue中webpack打包優(yōu)化操作技巧有哪些-創(chuàng)新互聯(lián)
分享地址：http://www.rwnh.cn/article20/cepcco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站排名、電子商務(wù)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)