成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack 優(yōu)化筆記

import. / 3335人閱讀

摘要：的默認(rèn)值是指先去當(dāng)前目錄的目錄下找對應(yīng)的模塊，如果沒有找到，就去上一級目錄層層往上找。能讓同時(shí)間做多件事，它把任務(wù)分解給多個(gè)子進(jìn)程去并發(fā)的執(zhí)行，子進(jìn)程處理完后再把結(jié)果發(fā)送給主進(jìn)程。

優(yōu)化可以從哪些方面入手

1、優(yōu)化開發(fā)體驗(yàn)

優(yōu)化構(gòu)建速度，項(xiàng)目龐大時(shí)構(gòu)建的耗時(shí)比較久

優(yōu)化使用體驗(yàn)，通過自動化手段完成一些重復(fù)工作

2、優(yōu)化輸出質(zhì)量

減少用戶感知到的加載時(shí)間，即首屏加載時(shí)間

提升流暢度，即提升代碼性能

webpack 可以做哪些優(yōu)化

1、縮小文件搜索范圍
webpack 在啟動后會從配置的 Entry 出發(fā)，解析出文件中的導(dǎo)入語句，再遞歸解析，在遇到導(dǎo)入語句時(shí)，webpack 會做一下操作

尋找對應(yīng)的導(dǎo)入文件

使用配置中的 Loader 去處理文件，例如解析 js 文件用的 babel-loader

1.1 優(yōu)化 Loader配置
可通過 test, include,exclude 三個(gè)配置進(jìn)行優(yōu)化

關(guān)于 babel-loader cacheDirectory 的配置，可參考
https://webpack.docschina.org...

1.2 優(yōu)化 resolve.modules 配置
webpack 在啟動后會從配置的入口模塊出發(fā)找出所有依賴的模塊，resolve 配置 webpack 如何尋找模塊對應(yīng)的文件。resolve.modules 的默認(rèn)值是 ["node_modules"], 指先去當(dāng)前目錄的./node_modules 目錄下找對應(yīng)的模塊，如果沒有找到，就去上一級目錄../node_modules, 層層往上找。一般我們安裝的第三方目錄都會放在項(xiàng)目的根目錄 ./node_modules 目錄下，可以指明第三方模塊的絕對路徑，減少查找路徑

2、使用CommonsChunkPlugin分割代碼
對于多入口，將公共模塊拆出來，最終合成的文件能夠在最開始的時(shí)候加載一次，便存起來到緩存中供后續(xù)使用，不需要每次訪問一個(gè)新頁面時(shí)，再去加載一個(gè)更大的文件

3、使用動態(tài)鏈接庫文件
將網(wǎng)頁依賴的基礎(chǔ)模塊抽離出來，打包到一個(gè)多帶帶的動態(tài)鏈接庫中，一個(gè)動態(tài)鏈接庫可以包含多個(gè)模塊；
當(dāng)需要導(dǎo)入的模塊存在于某個(gè)動態(tài)鏈接庫時(shí)，這個(gè)模塊不會被再次打包，而是去動態(tài)鏈接庫中獲取

構(gòu)建動態(tài)鏈接庫

引用動態(tài)鏈接庫

4、使用Happypack
由于 JavaScript 是單線程模型，要想發(fā)揮多核 CPU 的能力，只能通過多進(jìn)程去實(shí)現(xiàn)，而無法通過多線程實(shí)現(xiàn)。HappyPack 能讓 Webpack 同時(shí)間做多件事，它把任務(wù)分解給多個(gè)子進(jìn)程去并發(fā)的執(zhí)行，子進(jìn)程處理完后再把結(jié)果發(fā)送給主進(jìn)程。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97864.html

相關(guān)文章

  • webpack@4.32.2研究筆記【02】- mode

    摘要：簡介模式是新增的配置，用來指定使用對應(yīng)模式的內(nèi)置優(yōu)化它有三個(gè)可選模式默認(rèn)為。源碼地址選項(xiàng)描述通過插件將的值設(shè)為。啟用和通過插件將的值設(shè)為。使用默認(rèn)的優(yōu)化項(xiàng)。注意上面說的并不是的運(yùn)行環(huán)境變量，它其實(shí)是通過插件設(shè)置的一個(gè)全局變量。 簡介 ? mode（模式）是webpack4.0.0新增的配置，用來指定webpack使用對應(yīng)模式的內(nèi)置優(yōu)化；它有三個(gè)可選模式：producti...

    newtrek 評論0 收藏0

  • webpack v2升級踩坑筆記

    摘要：從再到目前當(dāng)紅明星，前端模塊打包技術(shù)日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關(guān)于的特征，可以查看知乎如何評價(jià)新引入的代碼優(yōu)化技術(shù)的討論。 從Grunt->gulp->webpack,再到目前當(dāng)紅明星rollup，前端模塊打包技術(shù)日新月異，webpack在今年1月份和6月份左右接連更新了v2和v3版本,為了減少冗余模塊，縮減bundle文件...

    JayChen 評論0 收藏0

  • webpack學(xué)習(xí)筆記（3）-webpack使用

    摘要：配置如上圖測試用例所示，由于這個(gè)插件默認(rèn)使用了來作優(yōu)化，所以它不僅壓縮了代碼刪掉了代碼中無用的注釋還去除了冗余的優(yōu)化了的書寫順序，優(yōu)化了你的代碼。 webpack基本使用 // webpack4中除了正常安裝webpack之外，需要再單獨(dú)安一個(gè)webpack-cli npm i webpack webpack-cli -D 基本命令行 webpack [] 配置文件使用 直接輸...

    wwq0327 評論0 收藏0

  • webpack 實(shí)踐筆記（一）--- 入門

    摘要：實(shí)踐筆記入門一官網(wǎng)文檔地址實(shí)踐工程地址本篇文章可切換到分支查看源代碼。簡單分步實(shí)踐創(chuàng)建一個(gè)空文件夾，進(jìn)入全局安裝創(chuàng)建文件創(chuàng)建執(zhí)行命令這個(gè)時(shí)候項(xiàng)目中多了一個(gè)文件，使用標(biāo)簽將其引入到中在瀏覽器中打開文件，頁面出現(xiàn)文字。 webpack 實(shí)踐筆記入門（一） [webpack官網(wǎng)文檔地址]:（http://webpack.github.io/docs...） [實(shí)踐工程地址]: (https:...

    bergwhite 評論0 收藏0

  • webpack4使用筆記之plugin

    摘要：默認(rèn)為根據(jù)自己的指定的模板文件來生成特定的文件主要是針對多入口文件。那么選項(xiàng)就可以決定是否都使用這些生成的文件。壓縮壓縮通過使用可以看到項(xiàng)目各模塊的大小，可以按需優(yōu)化圖片來自于的 webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugi...

    ymyang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<