webpack 優化筆記

import. 發布于2019-08-23 12:01 / 3331人閱讀

摘要：的默認值是指先去當前目錄的目錄下找對應的模塊，如果沒有找到，就去上一級目錄層層往上找。能讓同時間做多件事，它把任務分解給多個子進程去并發的執行，子進程處理完后再把結果發送給主進程。

優化可以從哪些方面入手

1、優化開發體驗

優化構建速度，項目龐大時構建的耗時比較久

優化使用體驗，通過自動化手段完成一些重復工作

2、優化輸出質量

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

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

webpack 可以做哪些優化

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

尋找對應的導入文件

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

1.1 優化 Loader配置
可通過 test, include,exclude 三個配置進行優化

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

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

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

3、使用動態鏈接庫文件
將網頁依賴的基礎模塊抽離出來，打包到一個多帶帶的動態鏈接庫中，一個動態鏈接庫可以包含多個模塊；
當需要導入的模塊存在于某個動態鏈接庫時，這個模塊不會被再次打包，而是去動態鏈接庫中獲取

構建動態鏈接庫

引用動態鏈接庫

4、使用Happypack
由于 JavaScript 是單線程模型，要想發揮多核 CPU 的能力，只能通過多進程去實現，而無法通過多線程實現。HappyPack 能讓 Webpack 同時間做多件事，它把任務分解給多個子進程去并發的執行，子進程處理完后再把結果發送給主進程。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97864.html

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

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

newtrek 2019-08-23 17:51 評論0 收藏0
webpack v2升級踩坑筆記

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

JayChen 2019-08-20 17:59 評論0 收藏0
webpack學習筆記（3）-webpack使用

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

wwq0327 2019-08-23 11:33 評論0 收藏0
webpack 實踐筆記（一）--- 入門

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

bergwhite 2019-08-20 11:03 評論0 收藏0
webpack4使用筆記之plugin

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

ymyang 2019-08-23 14:57 評論0 收藏0