webpack使用優化（基本篇）

轉自：https://github.com/lcxfs1991/blog/issues/2

前言

本文不是webpack入門文章，如果對webpack還不了解，請前往題葉的Webpack入門，或者阮老師的Webpack-Demos。

為什么要使用Webpack

  1. 與react一類模塊化開發的框架搭配著用比較好。
  2. 屬于配置型的構建工具，比較用容易上手，160行代碼可大致實現gulp400行才能實現的功能。
  3. webpack使用內存來對構建內容進行緩存，構建過程中會比較快。

第3點我想稍微論述一下，如果看過我之前寫的《如何寫一個webpack插件（一）》，會發現，webpack會將文件內容存在compilation這個大的object里面，方便各種插件，loader間的調用。雖然gulp也用到了流(pipe)這樣的內存處理方式，但感覺webpack更進一步。gulp是每一個任務(task)用一個流，而webpack是共享一個流。

簡要回顧Webpack的配置

webpack_config

Webpack的配置主要為了這幾大項目：

  • entry：js入口源文件
  • output：生成文件
  • module：進行字符串的處理
  • resolve：文件路徑的指向
  • plugins：插件，比loader更強大，能使用更多webpack的api

常用Loaders介紹

  • 處理樣式，轉成css，如：less-loader, sass-loader
  • 圖片處理，如: url-loader, file-loader。兩個都必須用上。否則超過大小限制的圖片無法生成到目標文件夾中
  • 處理js，將es6或更高級的代碼轉成es5的代碼。如：
    babel-loader，babel-preset-es2015，babel-preset-react
  • 將js模塊暴露到全局，如果expose-loader

常用Plugins介紹

  • 代碼熱替換, HotModuleReplacementPlugin
  • 生成html文件，HtmlWebpackPlugin
  • 將css成生文件，而非內聯，ExtractTextPlugin
  • 報錯但不退出webpack進程，NoErrorsPlugin
  • 代碼丑化，UglifyJsPlugin，開發過程中不建議打開
  • 多個 html共用一個js文件(chunk)，可用CommonsChunkPlugin
  • 清理文件夾，Clean
  • 調用模塊的別名ProvidePlugin，例如想在js中用$，如果通過webpack加載，需要將$與jQuery對應起來

使用優化

了解了以上介紹的Loaders和Plugins之后，基本就可以搭建一整套基于Webpack的構建（不需要gulp與grunt，合圖除外）。下面讓我來介紹一下在使用過程中的一些優化點。

優化點一.如何區分開發及生產環境

  1. 在package.json里面的script設置環境變量，注意mac與windows的設置方式不一樣
"scripts": {"publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors","publish-win":  "set NODE_ENV=prod&&webpack -p --progress --colors"
}
  1. 在webpack.config.js使用process.env.NODE_ENV進行判斷

優化點二.使用代碼熱替換

使用代碼熱替換在開發的時候無需刷新頁面即可看到更新，而且，它將構建的內容放入內在中，能夠獲得更快的構建編譯性能，因此是官方非常推薦的一種構建方式。

方法一：

1.將代碼內聯到入口js文件里
w1

2.啟動代碼熱替換的plugins
w2

方法二：

直接實現一個server.js，啟動服務器（需要啟動熱替換plugin)，下面是我在業務中用到的一個范例。具體的一些參數可以

var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000");  // 將執替換js內聯進去
config.entry.index.unshift("webpack/hot/only-dev-server");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {hot: true,historyApiFallback: false,// noInfo: true,stats: { colors: true  // 用顏色標識},proxy: {"*": "http://localhost:9000" // 用于轉發api數據，但webpack自己提供的并不太好用},
});
server.listen(9000);

方法三：

直接在webpack.config.js上配置。這個辦法最簡單，當然靈活性沒有自己實現一個服務器好。
w3

優化點三.import react導致文件變大，編譯速度變慢，乍辦?

  1. 如果你想將react分離，不打包到一起，可以使用externals。然后用<script>單獨將react引入
    w1
  2. 如果不介意將react打包到一起，請在alias中直接指向react的文件。可以提高webpack搜索的速度。準備部署上線時記得將換成react.min，能減少文件大小(減少約600kb)
    w2
  3. 使用module.noParse針對單獨的react.min.js這類沒有依賴的模塊，速度會更快。

優化點四.將模塊暴露到全局

如果想將report數據上報組件放到全局，有兩種辦法：

方法一：

在loader里使expose將report暴露到全局，然后就可以直接使用report進行上報

{test: path.join(config.path.src, '/js/common/report'),loader: 'expose?report'
},

方法二：

如果想用R直接代表report，除了要用expose loader之外，還需要用ProvidePlugin幫助，指向report，這樣在代碼中直接用R.tdw， R.monitor這樣就可以

new webpack.ProvidePlugin({"R": "report",
}),

優化點五. 合并公共代碼

有些類庫如utils, bootstrap之類的可能被多個頁面共享，最好是可以合并成一個js，而非每個js單獨去引用。這樣能夠節省一些空間。這時我們可以用到CommonsChunkPlugin，我們指定好生成文件的名字，以及想抽取哪些入口js文件的公共代碼，webpack就會自動幫我們合并好。

new webpack.optimize.CommonsChunkPlugin({name: "common",filename: "js/common.js",chunks: ['index', 'detail]}),

優化點六. 善用alias。

resolve里面有一個alias的配置項目，能夠讓開發者指定一些模塊的引用路徑。對一些經常要被import或者require的庫，如react,我們最好可以直接指定它們的位置，這樣webpack可以省下不少搜索硬盤的時間。
w6

優化點七. alias的索引路徑。

有時候你的node_modules包可能會放在上層父文件夾中，這時你可以使用resolve.moduledirectories來擴張你的索引路徑，例如我們給redux做一個alias：

 resolve: {moduledirectories:['node_modules', config.path.src],extensions: [".js", ".jsx",],alias: {'redux': 'redux/dist/redux',}},

這樣的話，它的索引路徑會如下：

/a/b/node_module/redux/dist/redux
/a/node_module/redux/dist/redux
/node_module/redux/dist/redux

要注意的是多加索引路徑可能會導致性能下降，所以除非項目復雜，否則慎用這個功能。

優化點八.多個html怎么辦

  1. 使用HtmlWebpackPlugin，有多少個html，就排列多少個，記得不要用inject，否則全部js都會注入到html。如果真的要用inject模式，請務必將不需要的js用exclude chunk去掉或者用chunk參數填上你需要入口文件。

僅使用app作為注入的文件：

plugins: [new HtmlWebpackPlugin({chunks: ['app']})
]

不使用dev-helper作為注入文件：

plugins: [new HtmlWebpackPlugin({excludeChunks: ['dev-helper']})
]

如果你不想用inject模式，但又想使用html-webpack-plugin，那你需要在html里用<script>標簽放入對應的js，以及用入對應的css。記住，這些資源的路徑是在生成目錄下的，寫路徑的時候請寫生成目錄下的相對路徑。

優化點九. html-webpack-plugin不用使inject模式沒又md5，而且不支持文件內聯怎么破？

當時我就給維護者提了一個issue--Add inline feature to the plugin。

然后維護者在開發的分支上加了這么一個特性（證明維護者不想在插件里加內聯功能了，想讓我來弄）：

事件
允許其它插件去使用執行事件
html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit

使用辦法：

  compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {htmlPluginData.html += 'The magic footer';callback();});

不過我還是決定自己開發一個了一個插件
html-res-webpack-plugin，有中英文文檔可以參考。其實html-webpack-plugin以js作為入口可能跟webpack的理念更為一致，但其實直接在html上放link和script更加方便直白一些。而且html-webpack-plugin局限性太多，如果我想在script上加attribute也是比較麻煩的事兒。所以我干脆開發一個可以允許在html上直接放link和script而且支持內聯及md5的插件。

但相信我之后也會針對html-webpack-plugin再寫一個內聯及md5的插件，適配一直在用這個插件的人。

優化點十.用gulp-webpack速度慢乍辦

w3

上圖是初始化構建30個文件的用時，一共用了13秒。用了externals優化后，還有100多kb，比用純webpack優化要大50多kb。而且，由于你用的是gulp-webpack，每次有文件改動，都必須全部重新編譯一次。因此，跟react搭配建議還是不要用gulp-webpack。因為如果你使用webpack的話，即使初次啟動時速度也并不快，但開發過程中，webpack會自動識別，只會重新編譯有修改的文件，這大大加快了編譯構建速度。

沒辦法，老項目改造，真的要用，乍辦？我提供以下思路
（1）當非js文件改變的時候，不要去跑js打包的任務
（2）非公共的js發生改變的時候，只執行這個js的打包任務

w4

下圖是優化了之后，在開發過程中非公共文件修改后的編譯速度。我的娘，純webpack只需要100多200ms。建議還是用webpack吧。
w5

優化點十一.如果在通過webpack在項目中使用bootstrap, jquery以及fontawesome

這一點對于創業公司來說可能比較有用，它們的初期產品都需要快速上線，用一些比較成熟的UI框架會比較好。

這樣，首先我們需要jquery文件，并且安裝bootstrap(3.3.5) ,font-awesome(4.4.0),以及imports-loader(0.6.3)。還需要sass-loader(3.1.2)及less-loader(2.5.3)。

然后，在主要入口文件要這么引用下面的樣式文件：

require('bootstrap/less/bootstrap.less');
require('font-awesome/scss/font-awesome.scss');
require('./index.scss');

在webpack.config.js的entry項目里，可以加上這個vendor:

common: ['jquery', 'bootstrap'],

在loaders里加入以下loader，將jQuery暴露到全局:

{test: path.join(config.path.src, '/libs/jq/jquery-2.1.4.min'),loader: 'expose?jQuery'
},

再添加以下loader，讓webpack幫助復制font文件

{ test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,  loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]' 
},

在plugins里添加ProvidePlugin，讓$指向jQuery

new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery"
}),

這樣，就可以同時使用jQuery, Bootstrap和Fontawesome了。

webpack會取代gulp嗎

  • 未必，但在開發環境，以及不需要一些功能如合圖的情況下，webpack可以完全取代gulp，至少現在我有三個項目完全用webpack進行開發和部署上線
  • 要取代gulp,還需要不斷發展它的loader以及plugin生態，至少，完善一下開發者文檔啊。

轉載于:https://www.cnblogs.com/laneyfu/p/6252307.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/456575.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/456575.shtml
英文地址，請注明出處：http://en.pswp.cn/news/456575.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

word2vec中單詞向詞向量的轉換過程詳解

word2vec中單詞向詞向量的轉換過程詳解

目錄前言&#xff1a;1、Word2Vec兩種模型的大致印象2、CBOW模型流程舉例3、CBOW模型流程舉例總結&#xff1a; 目錄 前言&#xff1a; 針對word2vec是如何得到詞向量的&#xff1f;這篇文章肯定能解決你的疑惑。該篇文章主要參考知乎某大神的回答&#xff0c;個人在此基礎上…
閱讀更多...
Python把函數作為參數傳入的高階編程方法

Python把函數作為參數傳入的高階編程方法

map:接受兩個參數&#xff08;函數&#xff0c;Iterable&#xff09;&#xff0c;map將傳入的函數依次作用于Iterable的每個元素&#xff0c;并且返回新的Iterable def f(x):return x*x r map(f,[1,2,3,4]) #此時的r為惰性求值——可用next()和for...in取值 #通過list()返…
閱讀更多...
《編程珠璣（第2版?修訂版）》—第2章2.2節無處不在的二分搜索

《編程珠璣（第2版?修訂版）》—第2章2.2節無處不在的二分搜索

本節書摘來自異步社區《編程珠璣&#xff08;第2版?修訂版&#xff09;》一書中的第2章2.2節無處不在的二分搜索&#xff0c;作者【美】Jon Bentley&#xff0c;更多章節內容可以訪問云棲社區“異步社區”公眾號查看。 2.2　無處不在的二分搜索我想到的一個數在1到100之間&…
閱讀更多...
JavaScript學習筆記(四)——jQuery插件開發與發布

JavaScript學習筆記(四)——jQuery插件開發與發布

jQuery插件就是以jQuery庫為基礎衍生出來的庫&#xff0c;jQuery插件的好處是封裝功能&#xff0c;提高了代碼的復用性&#xff0c;加快了開發速度&#xff0c;現在網絡上開源的jQuery插件非常多&#xff0c;隨著版本的不停迭代越來越穩定好用&#xff0c;在jQuery官網有許多插…
閱讀更多...
AIML元素詳細說明

AIML元素詳細說明

目錄前言&#xff1a;1、簡介2、詳細說明總結&#xff1a; 目錄 前言&#xff1a; 智能客服客戶咨詢功能的實現主要依靠的就是Python的AIML庫&#xff0c;這里就先介紹下AIML。 詳細的使用教程可參考&#xff1a;https://github.com/andelf/PyAIML 目前大部分AIML只支持Py…
閱讀更多...
【解決】如何打開.ipynb文件

【解決】如何打開.ipynb文件

最近碰到文件名后綴為.ipynb文件&#xff0c;起初沒太在意這種文件格式&#xff0c;用Notepad打開之后看到也是類似于JSON格式的信息&#xff0c;以為也是為其他的一些文件服務的&#xff08;類似于配置一些HTML文件的配置文件&#xff09;。但是后來才發現這也是一種文本表示形…
閱讀更多...
《樹莓派學習指南（基于Linux）》——1.4　將Raspbian燒錄到SD卡

《樹莓派學習指南（基于Linux）》——1.4　將Raspbian燒錄到SD卡

本節書摘來異步社區《樹莓派學習指南&#xff08;基于Linux&#xff09;》一書中的第1章&#xff0c;第1.4節&#xff0c;作者&#xff1a;【英】Peter Membrey ,【澳】David Hows &#xff0c;更多章節內容可以訪問云棲社區“異步社區”公眾號查看 1.4　將Raspbian燒錄到SD卡 …
閱讀更多...
python單向鏈表和雙向鏈表的圖示代碼說明

python單向鏈表和雙向鏈表的圖示代碼說明

圖示說明&#xff1a; 單向鏈表&#xff1a; insert、 remove、 update、pop方法 class Node:def __init__(self, data):self.data dataself.next Nonedef __str__(self):return str(self.data)# 通過單鏈表構建一個list的結構&#xff1a; 添加 刪除 插入 查找 獲取長…
閱讀更多...
不使用Ajax，如何實現表單提交不刷新頁面

不使用Ajax，如何實現表單提交不刷新頁面

不使用Ajax&#xff0c;如何實現表單提交不刷新頁面&#xff1f; 目前&#xff0c;我想到的是使用<iframe>&#xff0c;如果有其他的方式&#xff0c;后續再補。舉個栗子&#xff1a; 在表單上傳文件的時候必須設置enctype"multipart/form-data"表示表單既有文…
閱讀更多...
AIML知識庫數據匹配原理解析

AIML知識庫數據匹配原理解析

目錄&#xff1a;前言&#xff1a;1、AIML系統工作流程2、AIML的核心推理機制3、推理舉例4、匹配規則及實踐中遇到的一些問題的解釋總結&#xff1a; 目錄&#xff1a; 前言&#xff1a; 參考&#xff1a;《Alice機理分析與應用研究》 關于AIML庫這里就不介紹了&#xff0c…
閱讀更多...
【Python】模擬面試技術面試題答

【Python】模擬面試技術面試題答

一、 python語法 1. 請說一下你對迭代器和生成器的區別&#xff1f; 2. 什么是線程安全&#xff1f; 3. 你所遵循的代碼規范是什么&#xff1f;請舉例說明其要求&#xff1f; 4. Python中怎么簡單的實現列表去重&#xff1f; 5. python 中 yield 的用法…
閱讀更多...
ROS機器人程序設計（原書第2版）2.3　理解ROS開源社區級

ROS機器人程序設計（原書第2版）2.3　理解ROS開源社區級

2.3　理解ROS開源社區級 ROS開源社區級的概念主要是ROS資源&#xff0c;其能夠通過獨立的網絡社區分享軟件和知識。這些資源包括&#xff1a; 發行版&#xff08;Distribution&#xff09;　ROS發行版是可以獨立安裝、帶有版本號的一系列綜合功能包。ROS發行版像Linux發行版一樣…
閱讀更多...
Win7 U盤安裝Ubuntu16.04 雙系統

Win7 U盤安裝Ubuntu16.04 雙系統

Win7系統下安裝Ubuntu系統&#xff0c;主要分為三步&#xff1a; 第1步&#xff1a;制作U盤啟動盤 第2步&#xff1a;安裝Ubuntu系統 第3步&#xff1a;創建啟動系統引導 第1步&#xff1a;制作U盤啟動盤 1.下載Ubuntu16.04安裝鏡像&#xff0c;官網地址&#xff1a;http://www…
閱讀更多...
Word2VecDoc2Vec總結

Word2VecDoc2Vec總結

轉自&#xff1a;http://www.cnblogs.com/maybe2030/p/5427148.html 目錄&#xff1a;1、詞向量2、Distributed representation詞向量表示3、word2vec算法思想4、doc2vec算法思想5、Doc2Vec主要參數詳解總結&#xff1a; 目錄&#xff1a; 1、詞向量 自然語言理解的問題要轉…
閱讀更多...
ubantu安裝pycharm破解+Linux基礎簡介

ubantu安裝pycharm破解+Linux基礎簡介

一、課程簡介 linux服務器配置及常用命令 Ubuntu centos 開發軟件配置及服務環境的搭建 軟件的安裝和配置 mysql數據庫使用、monDB使用、redius的使用 git的使用 html/css 課程學習方式 表達訓練 學習方法&#xff1a; linux學習基本上都是命令和配置 命令要多敲多記 …
閱讀更多...
《游戲視頻主播手冊》——2.2 哪些人適合做游戲主播

《游戲視頻主播手冊》——2.2 哪些人適合做游戲主播

本節書摘來自異步社區《游戲視頻主播手冊》一書中的第2章&#xff0c;第2.2節&#xff0c;作者 王巖&#xff0c;更多章節內容可以訪問云棲社區“異步社區”公眾號查看。 2.2 哪些人適合做游戲主播 據不完全統計&#xff0c;目前國內有超過26000名活躍的游戲主播。所謂“活躍的…
閱讀更多...
Doc2Vec實踐

Doc2Vec實踐

目錄:前言&#xff1a;第一步&#xff1a;首先我們需要拿到對應的數據&#xff0c;相關的代碼如下&#xff1a;第二步&#xff1a;拿到對應的數據后&#xff0c;就開始訓練數據生成對應的model&#xff0c;對應的代碼如下&#xff1a;第三步&#xff1a;得到生成的model后&…
閱讀更多...
Linux常用命令全網最全

Linux常用命令全網最全

一、linux文件系統結構 sudo apt-get install treetree --help #查看幫助tree -L 1 #顯示文件目錄 rootubuntu16 /# tree -L 1 . #系統根目錄&#xff0c;有且只有一個根目錄 ├── bin #存放常見的命令 ├── boot #系統啟動文件和核心文件都在這個目錄…
閱讀更多...
《開源思索集》一Source Code + X

《開源思索集》一Source Code + X

本節書摘來異步社區《開源思索集》一書中的第1章&#xff0c;作者&#xff1a; 莊表偉 責編&#xff1a; 楊海玲, 更多章節內容可以訪問云棲社區“異步社區”公眾號查看。 Source Code X 開源思索集最近&#xff0c;有一位來自學術界朋友&#xff0c;找到了我們這個開源的圈子…
閱讀更多...
機器學習中目標函數、損失函數以及正則項的通俗解釋

機器學習中目標函數、損失函數以及正則項的通俗解釋

目錄&#xff1a;前言&#xff1a;1、什么是目標函數&#xff1f;2、損失函數3、正則化總結&#xff1a; 目錄&#xff1a; 前言&#xff1a; 今天看到一篇很精簡的文章來說明目標函數、損失函數以及正則項是什么。以下是文章正文。 轉自&#xff1a;https://xiaozhuanlan.…
閱讀更多...
最新文章

Copyright @ 2022~2023