看過 尤大神 直播關於講解 vue3.0得特性的同學 肯定也看到了 tree shking 這個特性了
先來講解下 什麼是 tree shking 先拿生活上的例子來說 字面意思是 搖晃樹枝 因為樹上可能有很多死的頁面 在樹枝上 我們可以通過搖晃 樹 來吧樹上的一些 死得樹葉 給搖晃下來 占個地方 卻沒啥用 這個意思
帶到我們的**中 就是 一些 我們定義得** 卻從來沒有用到的死** 就不要打包到 最後的檔案中 這個是 tree shaking 在webpack中得意思
不過要滿足 tree shking 要有兩個條件
前提: 1.必須使用 es6 模組化 2.開啟production
其實這個兩個條件還是很容易 達到
開啟 production
module.exports:
我們先寫乙個 test.js 檔案 在裡面定義 了 兩個函式 並且都匯出來
export
function
mul(x, y)
export
function
count
(x, y)
import
from
'./test'
console.
log(
mul(2,
3));
最後我們再打包的檔案中 會發現 並沒有把 count 函式 打包進去 count 就可以稱為死**
不過有個問題 就是 他會把我們的 css**也看做死** 不打包到js檔案中 這個就很麻煩了 打包完之後 沒有css**
這個時候應該做個設定 讓他 忽略我們的 css檔案
再packjson檔案下面新增 下面的或者設定 就可以了 忽略我們的css檔案了 當然 你也可以新增一些其他的 檔案 比如 less scss 等等
"sideeffects":[
"*.css"
]
關注我 持續更新前端知識
Webpack教程，更新中
新寫的乙份webpack教程，目前在更新中。在寫babel教程的同時，發現很多babel的知識與webpack緊密相連，於是開始撰寫webpack教程。大家都知道webpack是乙個模組打包工具，但在使用的時候並不容易，因為它有著複雜的體系結構。目前已經完成了10節教程，大概乙個周可以更新2節，應該...
webpack中結合Vue使用
1 安裝vue的包 cnpm i vue s 2 由於在webpack中，推薦使用.vue這個元件模板檔案定義元件，所以需要安裝能解析這個檔案的loader cnpm i vue loader vue template compiler d 3 在main.js中，匯入vue模組 import vu...
webpack中關於路徑別名
起路徑別名 對於vue cli2中，在webpack config js中 resolve 對於vue cli腳手架版本大於等於3中，在vue.config.js中 module.exports 路徑別名可以使用在import語法中，如樣式檔案的引入 import xyz 或 import xx f...