webpack4搭建react, 效能優化
前幾天用webpack4
配置了下react
,這裡主要說下碰到的一些問題,細節可以看原始碼。
hash快取
js和css都使用了chunkhash快取,但是出現一個問題就是,無論修改css檔案或者js檔案,都會導致chunkhash改變,這顯然不是我們需要的。
然後用
mini-css-extract-plugin
將css提取出來之後使用contenthash
,這樣對內容進行hash命名。但是出現一個問題就是每次css改變,js的chunkhash也會改變,不知道這個是一個
bug
還是一個feature
.
因為其他的版本是不存在這個問題的,但是我目前這個版本出現了這個問題,github
程式碼庫的說法是推薦contenthash
,chunkhash
的保留只是為了相容。
所以對js也進行contenthash命令, 這樣每次css修改都不會影響js的hash命名。
一些問題
資源壓縮
程式碼沒有被很好的壓縮,壓縮了js發現css沒有壓縮.
mini-css-extract-plugin
並沒有給我壓縮css
,所以css
壓縮使用了optimize-css-assets-webpack-plugin
.但是用了這個之後,發現js沒有壓縮,fuck中。。然後再重新手動壓縮(webpack4約定大於配置嘛,好耳熟).引入
uglifyjs-webpack-plugin
js
.SplitChunks
這個預設是拆分
非同步載入的程式碼
,如果改成init
或者all
,會增大js檔案,這個可能需要在專案差不多的時候,權衡之後再做使用。可以參考這裡的對比typescript code splitting
這邊折騰了不少時間,按照文件加上在
tsconfig.json
加上了"module": "esnext"
,發現還是報錯,不能正常解析,最後通過添加了es2015
在lib
裡。
tips
-
moment這個包有個問題,那就是語言和核心部分捆綁在一起了,用這個可以忽略對應的部分。
preload
可以對資源進行預載入,這個視情況而定,也許你其他的模組打包出來體積很小,可以不用做這個。我是因為沒有對第三方的包進行提取,為了首次載入的速度,所以對後面的進行預載入.
如果有好的意見,歡迎提issue. 共同學習交流.