常用webpack的優化(自我總結版)


構建速度的優化:
1.HappyPack
  基於webpack的編譯模式本是單線程,時間佔時最多的Loader對文件的轉換。 開啓HappyPack,可以講任務分解成多個進程去並行處理。
  簡單配置:
    new HappyPack({
      // 用唯一的標識符 id 來代表當前的 HappyPack 是用來處理一類特定的文件
      id: 'babel',
      // 如何處理 .js 文件,用法和 Loader 配置中一樣
      loaders: ['babel-loader?cacheDirectory'],
      // ... 其它配置項
    }),
  詳細可參考:http://www.fly63.com/nav/1472
2.DllPlugin
   可將一些Node_moudle一些編譯好的庫,常用而且不變的庫,抽出來。這樣就無需重新編譯。
3.Loader 記錄配置搜索範圍,includeexclude
    如:   {
        test: /\.js$/, //js文件加載器
        exclude: /node_modules/,
        use: [
            {
              loader: 'babel-loader?cacheDirectory=ture',
              options: {
                presets: ['@babel/preset-env']
              },
              include: Path2D.resolve(__dirname, 'src')
            }
        ]
      },


優化打包大小
1.tree shaking寫法。
  即“搖樹”。即只引入所需要引入部分,其餘的代碼講會過濾。
2.壓縮代碼
  當前最程愫的壓縮工具是UglifyJS。HtmlWebpackPlugin也可配置minify等。
3.文件分離
  多個文件加載,速度更快。
   例如:mini-css-extract-plugin,將css獨立出來。
        這樣還有利於,部分“不變”的文件做緩存。
4.Scope Hoisting
  開啓後,分細分出模塊直接的依賴關係,會自動幫我們合併函數。
   簡單的配置:
   module,exports={
    optimization:{
        concatenateModules:true
    }
   }

此外:
如webpack問題還存在,推薦webpack-analysis進行分析。

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