webpack優(yōu)化

paulquei 發(fā)布于2019-08-23 15:41 / 331人閱讀

1，增加CleanWebpackPlugin插件，作用是，清空之前的dist文件夾，避免文件積攢

2，由于開發(fā)模式下會(huì)運(yùn)行 HotModuleReplacementPlugin
所以在本地build的時(shí)，會(huì)針對(duì)生成的新的dist文件，這樣就觸發(fā)了熱更新并自動(dòng)運(yùn)行babel-loader，而babel-loader會(huì)生成新的轉(zhuǎn)碼文件，會(huì)使得dist文件夾下面增加不必要的轉(zhuǎn)碼文件。
此時(shí)需要在babel-loader里面增加exclude字段，不再轉(zhuǎn)碼dist文件夾

{
        test: /.js$/,
        loader: "babel-loader",
        include: [resolve("src"), resolve("test")],
        exclude: /dist/, // 不再轉(zhuǎn)碼dist文件夾
        options: {
          cacheDirectory:true
        }
      },

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

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

相關(guān)文章

淺談webpack4.0 性能優(yōu)化

摘要：中在性能優(yōu)化所做的努力，也大抵圍繞著這兩個(gè)大方向展開。因此，將依賴模塊從業(yè)務(wù)代碼中分離是性能優(yōu)化重要的一環(huán)。大型庫(kù)是否可以通過定制功能的方式減少體積。這又違背了性能優(yōu)化的基礎(chǔ)。接下來可以抓住一些細(xì)節(jié)做更細(xì)的優(yōu)化。中，為默認(rèn)啟動(dòng)這一優(yōu)化。前言：在現(xiàn)實(shí)項(xiàng)目中，我們可能很少需要從頭開始去配置一個(gè)webpack 項(xiàng)目，特別是webpack4.0發(fā)布以后，零配置啟動(dòng)一個(gè)項(xiàng)目成為一種標(biāo)配。正因?yàn)?..

leanxi 2019-08-26 13:25 評(píng)論0 收藏0
webpack打包分析與性能優(yōu)化

摘要：打包分析與性能優(yōu)化背景在去年年末參與的一個(gè)項(xiàng)目中，項(xiàng)目技術(shù)棧使用，生產(chǎn)環(huán)境全量構(gòu)建將近三分鐘，項(xiàng)目業(yè)務(wù)模塊多達(dá)數(shù)百個(gè)，項(xiàng)目依賴數(shù)千個(gè)，并且該項(xiàng)目協(xié)同前后端開發(fā)人員較多，提高構(gòu)建效率，成為了改善團(tuán)隊(duì)開發(fā)效率的關(guān)鍵之一。 webpack打包分析與性能優(yōu)化背景在去年年末參與的一個(gè)項(xiàng)目中，項(xiàng)目技術(shù)棧使用react+es6+ant-design+webpack+babel，生產(chǎn)環(huán)境全量構(gòu)建將...

joy968 2019-08-20 14:21 評(píng)論0 收藏0
webpack 使用優(yōu)化（一）

摘要：原因就是默認(rèn)會(huì)把最重要的東西放到公共里，這里面包含啟動(dòng)應(yīng)用程序的依賴項(xiàng)模塊與模塊的依賴關(guān)系以及文件的版本號(hào)等信息。之前寫了一篇關(guān)于webpack 如何使用的文章：webpack 單頁(yè)面應(yīng)用實(shí)戰(zhàn)，并且寫了一個(gè) 單頁(yè)面應(yīng)用的小項(xiàng)目放到了github上。正巧公司前段時(shí)間用webpack 做了一個(gè)項(xiàng)目，項(xiàng)目不大，是基于單頁(yè)面應(yīng)用的。但是上線后才發(fā)現(xiàn)了一些問題，原來還是有一些要優(yōu)化改進(jìn)的地方...

Caicloud 2019-08-20 10:28 評(píng)論0 收藏0
webpack 基礎(chǔ)與項(xiàng)目優(yōu)化實(shí)踐總結(jié)

摘要：前言本文基于，主要涉及基本概念基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行優(yōu)化配置。同一文件中，修改某個(gè)影響其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行...

Scorpion 2019-08-23 18:15 評(píng)論0 收藏0
【Vue項(xiàng)目總結(jié)】webpack常規(guī)打包優(yōu)化方案

摘要：由于新建項(xiàng)目發(fā)版打包時(shí)間大概需要分鐘，發(fā)版時(shí)嚴(yán)重拖慢下班時(shí)間，所以特意查看了相關(guān)文檔來優(yōu)化打包速度，爭(zhēng)取早點(diǎn)下班，。分析打包文件要優(yōu)化，先分析。由于新建項(xiàng)目發(fā)版打包時(shí)間大概需要30分鐘，發(fā)版時(shí)嚴(yán)重拖慢下班時(shí)間，所以特意查看了相關(guān)文檔來優(yōu)化打包速度，爭(zhēng)取早點(diǎn)下班，^_^。分析打包文件要優(yōu)化，先分析。我們先要知道到底是哪里拖慢我們的打包速度呢？打包后生成文件分析可以利用webpa...

andong777 2019-08-23 17:59 評(píng)論0 收藏0
webpack的優(yōu)化

摘要：優(yōu)化在我們構(gòu)建單頁(yè)面應(yīng)用或封裝插件時(shí)很大機(jī)會(huì)用到這個(gè)的打包工具但項(xiàng)目代碼日益增多時(shí)一些簡(jiǎn)單的配置會(huì)暴露種種弊端打包時(shí)間長(zhǎng)代碼大以下是結(jié)合自身開發(fā)和學(xué)習(xí)過程解決問題的總結(jié)打包時(shí)間長(zhǎng)很多人都知道這個(gè)插件是用來提取公共庫(kù)的但這個(gè)插件也解決不了公共 webpack優(yōu)化在我們構(gòu)建單頁(yè)面應(yīng)用(vue, React)或封裝插件時(shí),很大機(jī)會(huì)用到webpack,這個(gè)JavaScript的打包工具.但項(xiàng)...

hatlonely 2019-08-26 11:47 評(píng)論0 收藏0