-
優化打包速度，我們先分析哪些地方可能會影響到我們的打包速度
- 我們在進行打包的時候需要獲取到所有的依賴模塊
- 解析所有的依賴模塊，解析成瀏覽器能夠識別的代碼
- 將所有的依賴打包成一個文件，需要對代碼進行壓縮
- 二次打包時間，文件修改的時候需要重新打包
- 運行在 Node.js 之上的 webpack 是單線程模式的，逐個文件進行解析
- webpack 緩存，將結果緩存到磁盤，提高第二次構建的速度
- 代碼壓縮（ParallelUglifyPlugin 插件實現了多線程壓縮）
- 優化搜索時間- 縮小文件搜索范圍 減小不必要的編譯工作（loader配置test 、 include 、 exclude命中規則， alias配置）
-
優化包體積
- 壓縮js （ParallelUglifyPlugin）
- 提取css，把css文件提取到單獨的css樣式文件中，因為css和js并行加載的 （mini-css-extract-plugin）
- 壓縮css （optimize-css-assets-webpack-plugin）
-
首屏優化
- cdn緩存
- tree-shaking
- 提取公用的代碼（SplitChunksPlugin）
- 按需加載
webpack優化篇
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
推薦閱讀更多精彩內容
- 前言 筆者最近在整理關于 webpack 相關的知識點，一方面是因為自己掌握的知識點比較零碎、不夠系統，有時候碰到...
- webpack webpack 最出色的功能之一就是，除了 JavaScript，還可以通過 loader 引入任...
