建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。
成都創(chuàng)新互聯(lián)企業(yè)建站,十多年網(wǎng)站建設(shè)經(jīng)驗，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁設(shè)計，有多年建站和網(wǎng)站代運營經(jīng)驗，設(shè)計師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對于網(wǎng)站設(shè)計制作、做網(wǎng)站中不同領(lǐng)域進行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動的思維在網(wǎng)頁中充分展現(xiàn)，通過對客戶行業(yè)精準市場調(diào)研，為客戶提供的解決方案。
一、背景
隨著我們的項目涉及到頁面越來越多，功能和業(yè)務(wù)代碼也會隨著越多，相應(yīng)的 webpack 的構(gòu)建時間也會越來越久
構(gòu)建時間與我們?nèi)粘ｉ_發(fā)效率密切相關(guān)，當我們本地開發(fā)啟動 devServer 或者 build 的時候，如果時間過長，會大大降低我們的工作效率
所以，優(yōu)化webpack 構(gòu)建速度是十分重要的環(huán)節(jié)
二、如何優(yōu)化
常見的提升構(gòu)建速度的手段有如下：
- 優(yōu)化 loader 配置
- 合理使用 resolve.extensions
- 優(yōu)化 resolve.modules
- 優(yōu)化 resolve.alias
- 使用 DLLPlugin 插件
- 使用 cache-loader
- terser 啟動多線程
- 合理使用 sourceMap
優(yōu)化loader配置
在使用loader時，可以通過配置include、exclude、test屬性來匹配文件，接觸include、exclude規(guī)定哪些匹配應(yīng)用loader
如采用 ES6 的項目為例，在配置 babel-loader時，可以這樣：
- module.exports = {
- module: {
- rules: [
- {
- // 如果項目源碼中只有 js 文件就不要寫成 /\.jsx?$/，提升正則表達式性能
- test: /\.js$/,
- // babel-loader 支持緩存轉(zhuǎn)換出的結(jié)果，通過 cacheDirectory 選項開啟
- use: ['babel-loader?cacheDirectory'],
- // 只對項目根目錄下的 src 目錄中的文件采用 babel-loader
- include: path.resolve(__dirname, 'src'),
- },
- ]
- },
- };
合理使用 resolve.extensions
在開發(fā)中我們會有各種各樣的模塊依賴，這些模塊可能來自于自己編寫的代碼，也可能來自第三方庫， resolve可以幫助webpack從每個 require/import 語句中，找到需要引入到合適的模塊代碼
通過resolve.extensions是解析到文件時自動添加拓展名，默認情況如下：
- module.exports = {
- ...
- extensions:[".warm",".mjs",".js",".json"]
- }
當我們引入文件的時候，若沒有文件后綴名，則會根據(jù)數(shù)組內(nèi)的值依次查找
當我們配置的時候，則不要隨便把所有后綴都寫在里面，這會調(diào)用多次文件的查找，這樣就會減慢打包速度
優(yōu)化 resolve.modules
resolve.modules 用于配置 webpack 去哪些目錄下尋找第三方模塊。默認值為['node_modules']，所以默認會從node_modules中查找文件 當安裝的第三方模塊都放在項目根目錄下的 ./node_modules目錄下時，所以可以指明存放第三方模塊的絕對路徑，以減少尋找，配置如下：
- module.exports = {
- resolve: {
- // 使用絕對路徑指明第三方模塊存放的位置，以減少搜索步驟
- // 其中 __dirname 表示當前工作目錄，也就是項目根目錄
- modules: [path.resolve(__dirname, 'node_modules')]
- },
- };
優(yōu)化 resolve.alias
alias給一些常用的路徑起一個別名，特別當我們的項目目錄結(jié)構(gòu)比較深的時候，一個文件的路徑可能是./../../的形式
通過配置alias以減少查找過程
- module.exports = {
- ...
- resolve:{
- alias:{
- "@":path.resolve(__dirname,'./src')
- }
- }
- }
使用 DLLPlugin 插件
DLL全稱是 動態(tài)鏈接庫，是為軟件在winodw中實現(xiàn)共享函數(shù)庫的一種實現(xiàn)方式，而Webpack也內(nèi)置了DLL的功能，為的就是可以共享，不經(jīng)常改變的代碼，抽成一個共享的庫。這個庫在之后的編譯過程中，會被引入到其他項目的代碼中
使用步驟分成兩部分：
- 打包一個 DLL 庫
- 引入 DLL 庫
打包一個 DLL 庫
webpack內(nèi)置了一個DllPlugin可以幫助我們打包一個DLL的庫文件
- module.exports = {
- ...
- plugins:[
- new webpack.DllPlugin({
- name:'dll_[name]',
- path:path.resolve(__dirname,"./dll/[name].mainfest.json")
- })
- ]
- }
引入 DLL 庫
使用 webpack 自帶的 DllReferencePlugin 插件對 mainfest.json 映射文件進行分析，獲取要使用的DLL庫
然后再通過AddAssetHtmlPlugin插件，將我們打包的DLL庫引入到Html模塊中
- module.exports = {
- ...
- new webpack.DllReferencePlugin({
- context:path.resolve(__dirname,"./dll/dll_react.js"),
- mainfest:path.resolve(__dirname,"./dll/react.mainfest.json")
- }),
- new AddAssetHtmlPlugin({
- outputPath:"./auto",
- filepath:path.resolve(__dirname,"./dll/dll_react.js")
- })
- }
使用 cache-loader
在一些性能開銷較大的 loader之前添加 cache-loader，以將結(jié)果緩存到磁盤里，顯著提升二次構(gòu)建速度
保存和讀取這些緩存文件會有一些時間開銷，所以請只對性能開銷較大的 loader 使用此loader
- module.exports = {
- module: {
- rules: [
- {
- test: /\.ext$/,
- use: ['cache-loader', ...loaders],
- include: path.resolve('src'),
- },
- ],
- },
- };
terser 啟動多線程
使用多進程并行運行來提高構(gòu)建速度
- module.exports = {
- optimization: {
- minimizer: [
- new TerserPlugin({
- parallel: true,
- }),
- ],
- },
- };
合理使用 sourceMap
打包生成 sourceMap 的時候，如果信息越詳細，打包速度就會越慢。對應(yīng)屬性取值如下所示：
三、總結(jié)
可以看到，優(yōu)化webpack構(gòu)建的方式有很多，主要可以從優(yōu)化搜索時間、縮小文件搜索范圍、減少不必要的編譯等方面入手
參考文獻
- https://github.com/ly2011/blog/issues/44
- https://xie.infoq.cn/article/541418eb82a674741a0ad8865
- https://zhuanlan.zhihu.com/p/139498741
- https://vue3js.cn/interview
分享標題：說說提高Webpack的構(gòu)建速度的手段有哪些？
本文路徑：http://www.5511xx.com/article/cojscpi.html
