成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

webpack 使用優(yōu)化（一）

Caicloud / 2561人閱讀

摘要：原因就是默認(rèn)會(huì)把最重要的東西放到公共里，這里面包含啟動(dòng)應(yīng)用程序的依賴項(xiàng)模塊與模塊的依賴關(guān)系以及文件的版本號(hào)等信息。

之前寫了一篇關(guān)于webpack 如何使用的文章：webpack 單頁(yè)面應(yīng)用實(shí)戰(zhàn)，并且寫了一個(gè) 單頁(yè)面應(yīng)用的小項(xiàng)目 放到了github上。正巧公司前段時(shí)間用webpack 做了一個(gè)項(xiàng)目，項(xiàng)目不大，是基于單頁(yè)面應(yīng)用的。但是上線后才發(fā)現(xiàn)了一些問(wèn)題，原來(lái)還是有一些要優(yōu)化改進(jìn)的地方。

webpack 單頁(yè)面應(yīng)用實(shí)戰(zhàn)這篇文章基本已經(jīng)滿足了我們的需求。比如以下功能我們都已經(jīng)實(shí)現(xiàn)：

將css從js中分離出來(lái)

使用loader加載css、圖片等

使用插件生成html以便自動(dòng)引用變更版本號(hào)的文件

配置公共js

js文件按需加載

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

壓縮js、css、html

給css、js、圖片、字體等添加版本號(hào)

編譯后自動(dòng)打開瀏覽器

熱替換

使用代理結(jié)合后端服務(wù)開發(fā)

編譯時(shí)區(qū)分開發(fā)環(huán)境、生產(chǎn)環(huán)境、熱替換環(huán)境

config 文件的合并

清空發(fā)布目錄

看似不錯(cuò)，好像都已經(jīng)實(shí)現(xiàn)了，但是具體到生產(chǎn)環(huán)境時(shí)還是有問(wèn)題的。下面有幾處優(yōu)化（下面還是結(jié)合這個(gè)項(xiàng)目）。

優(yōu)化-公共js版本號(hào)會(huì)變化的問(wèn)題

這個(gè)問(wèn)題在項(xiàng)目上線之前我沒(méi)有發(fā)現(xiàn)，上線以后，有一次需求變化，我在改變其他js文件的時(shí)候，然后打包發(fā)布發(fā)現(xiàn)公共js的版本號(hào)發(fā)生了改變，最后檢查下來(lái)，的確是公共js的內(nèi)容發(fā)生了變化，所以對(duì)應(yīng)的版本號(hào)發(fā)生了變化。原因就是webpack默認(rèn)會(huì)把最重要的東西放到公共js里，這里面包含webpack啟動(dòng)應(yīng)用程序的依賴項(xiàng)、模塊與模塊的依賴關(guān)系、以及文件的版本號(hào)等信息。所以一旦任意的js文件發(fā)生改變都會(huì)體現(xiàn)在公共js上。比如我們通過(guò)webpack構(gòu)建后生成這樣的文件：

再看下common.js 里大致包含什么內(nèi)容（截取一小部分）：

公共js版本號(hào)會(huì)變的問(wèn)題在 github 上討論了一段時(shí)間（點(diǎn)擊這里），只不過(guò)之前沒(méi)注意。有人用 webpack-md5-hash 插件實(shí)現(xiàn)了，但是感覺(jué)比較麻煩，最終還是感覺(jué)webpack 的貢獻(xiàn)者實(shí)現(xiàn)的這種方式很簡(jiǎn)單，并且不需要額外的插件，在新版本的webpack中融合的很好。但是提供的這個(gè)demo太簡(jiǎn)單，在項(xiàng)目中我們還是要注意一些問(wèn)題的。比如使用‘熱替換’時(shí)就會(huì)報(bào)錯(cuò)。所以我們要做一些改變，我們只需要將之前配置公共js的地方：

// webpack.config.js
...
plugins:[
    // 會(huì)把 ‘entry’ 定義的 common 對(duì)應(yīng)的兩個(gè)js 打包為 ‘common.js’
    new webpack.optimize.CommonsChunkPlugin("common", "js/[name].js", Infinity),
]
...

改為：

// webpack.config.js
...
 new webpack.optimize.CommonsChunkPlugin(
        devServer ?
        {name: "common", filename: "js/common.js"}:
        {names: ["common", "webpackAssets"]}
    ),
...
注意： ‘devServer’ 是一個(gè)標(biāo)識(shí)變量，代表‘熱替換’ ，如有疑惑看上一篇配置變量標(biāo)識(shí)

改成這種設(shè)置以后，當(dāng)時(shí)熱替換模式的時(shí)候不對(duì)common.js做處理，如果是開發(fā)模式或者發(fā)布模式，會(huì)從common.js中將各個(gè)文件的版本號(hào)以及其他重要信息抽出來(lái)，放到‘webpackAssets.js’文件中（名稱可以自定義）。生成的文件如下，會(huì)多出一個(gè)文件，這個(gè)文件只有幾kb：

改成這種做法后，一旦其他的文件發(fā)生改變，都會(huì)在webpackAssets.js文件中得到體現(xiàn)，項(xiàng)目的發(fā)布升級(jí)，只要額外的將這個(gè)文件升級(jí)上去即可，而不用將公共js升級(jí)上去。這樣的優(yōu)化會(huì)非常有利于處理緩存的問(wèn)題。

優(yōu)化-設(shè)置模塊目錄

如果項(xiàng)目小不設(shè)置webpack請(qǐng)求的模塊目錄沒(méi)關(guān)系，但是一般項(xiàng)目越來(lái)越大，webpack會(huì)查找很多無(wú)用的文件，這時(shí)候設(shè)置模塊目錄很有必要性，可以提高webpack編譯的速度。即設(shè)置 resolve.root 屬性。還有一個(gè)屬性是 moduleDirectories，這兩個(gè)的區(qū)別可以點(diǎn)這里。resolve.root 接收的參數(shù)是 node_modules 文件加的絕對(duì)路徑。我們?cè)谥暗膚ebpack.config.js 中增加這個(gè)配置項(xiàng)：

// webpack.config.js
...
resolve：{
    root: [
        path.resolve("./node_modules")
    ],
    ...
}
...

這樣設(shè)置后，webpack編譯速度會(huì)大大加快，不會(huì)每個(gè)文件夾都搜索一遍。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/80167.html

相關(guān)文章

  • 淺談webpack4.0 性能優(yōu)化

    摘要：中在性能優(yōu)化所做的努力，也大抵圍繞著這兩個(gè)大方向展開。因此，將依賴模塊從業(yè)務(wù)代碼中分離是性能優(yōu)化重要的一環(huán)。大型庫(kù)是否可以通過(guò)定制功能的方式減少體積。這又違背了性能優(yōu)化的基礎(chǔ)。接下來(lái)可以抓住一些細(xì)節(jié)做更細(xì)的優(yōu)化。中，為默認(rèn)啟動(dòng)這一優(yōu)化。 前言：在現(xiàn)實(shí)項(xiàng)目中，我們可能很少需要從頭開始去配置一個(gè)webpack 項(xiàng)目，特別是webpack4.0發(fā)布以后，零配置啟動(dòng)一個(gè)項(xiàng)目成為一種標(biāo)配。正因?yàn)?..

    leanxi 評(píng)論0 收藏0

  • webpack打包分析與性能優(yōu)化

    摘要：打包分析與性能優(yōu)化背景在去年年末參與的一個(gè)項(xiàng)目中，項(xiàng)目技術(shù)棧使用，生產(chǎn)環(huán)境全量構(gòu)建將近三分鐘，項(xiàng)目業(yè)務(wù)模塊多達(dá)數(shù)百個(gè)，項(xiàng)目依賴數(shù)千個(gè)，并且該項(xiàng)目協(xié)同前后端開發(fā)人員較多，提高構(gòu)建效率，成為了改善團(tuán)隊(duì)開發(fā)效率的關(guān)鍵之一。 webpack打包分析與性能優(yōu)化 背景 在去年年末參與的一個(gè)項(xiàng)目中，項(xiàng)目技術(shù)棧使用react+es6+ant-design+webpack+babel，生產(chǎn)環(huán)境全量構(gòu)建將...

    joy968 評(píng)論0 收藏0

  • webpack優(yōu)化

    摘要：使用要給項(xiàng)目構(gòu)建接入動(dòng)態(tài)鏈接庫(kù)的思想，需要完成以下事情把網(wǎng)頁(yè)依賴的基礎(chǔ)模塊抽離出來(lái)，打包到一個(gè)個(gè)單獨(dú)的動(dòng)態(tài)鏈接庫(kù)中去。接入已經(jīng)內(nèi)置了對(duì)動(dòng)態(tài)鏈接庫(kù)的支持，需要通過(guò)個(gè)內(nèi)置的插件接入，它們分別是插件用于打包出一個(gè)個(gè)單獨(dú)的動(dòng)態(tài)鏈接庫(kù)文件。 webpack優(yōu)化 查看所有文檔頁(yè)面：全棧開發(fā)，獲取更多信息。原文鏈接：webpack優(yōu)化，原文廣告模態(tài)框遮擋，閱讀體驗(yàn)不好，所以整理成本文，方便查找。 ...

    ChanceWong 評(píng)論0 收藏0

  • webpack 基礎(chǔ)與項(xiàng)目優(yōu)化實(shí)踐總結(jié)

    摘要：前言本文基于，主要涉及基本概念基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來(lái)自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行優(yōu)化配置。同一文件中，修改某個(gè)影響其他。 前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來(lái)自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行...

    Scorpion 評(píng)論0 收藏0

  • Webpack 最佳實(shí)踐總結(jié)(一)

    摘要：它會(huì)代替所有的實(shí)例的值為，從而使知道那些判斷表達(dá)式總是錯(cuò)誤的，從而刪除相關(guān)代碼，進(jìn)一步壓縮打包文件模塊機(jī)制項(xiàng)目中使用的，通過(guò)也能通過(guò)打包有用的代碼，進(jìn)一步減少大小。 好久沒(méi)寫文章，這次預(yù)計(jì)會(huì)帶來(lái)3篇的 Webpack 系列文章，將會(huì)在這幾天內(nèi)更新完。 Webpack3 自今年6月20日正式發(fā)布而來(lái)，給我們帶來(lái)Scope Hoisting和Magic Comments兩大功能，可惜不在這...

    jubincn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<