vue2+webpack3+中引入ts-loader後編譯性能大幅較低,TypeScript構建優化處理

如果你嘗試過在webpack3+引入ts-loader使用過DllReferencePlugin、awesome-typescript-loader、ParallelUglifyPlugin、thread-loader/happypack等優化插件無明顯效果的時候你可以繼續往下看

  1. 如果你是webpack4+,那麼你直接使用awesome-typescript-loader插件代替ts-loader就可以
  2. 如果你是小於4的webpack那麼我估計你的ts-loader會隨着項目的增多變得build越來越慢,導致開發效率低下。解決方法:如下
 {
                    loader: 'ts-loader',
                    options: {
                        happyPackMode: true // IMPORTANT! use happyPackMode mode to speed-up compilation and reduce errors reported to webpack
                    }
                }
  1. ts-loader默認沒有增量編譯,並且單線程,直接進行類型檢查。這會導致TypeScript的編譯過程非常慢,如下npm官網介紹:
    在這裏插入圖片描述
  2. 別忘記了在添加happyPackMode: true後要和fork-ts-checker-webpack-plugin進行配合使用,完善檢查機制,

總之一點,解決任何問題都需要在最小代價的情況下完成,不要盲目的升級任何的webpack,框架版本,這樣的後果你會後悔的

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章