webpack的性能優化配置：Tree shaking , 拆分等

二，Tree shaking   （生產模式默認啟用，由TerserPlugin）

　　上下文未用到的代碼，不會被打包

　　要基於ES6：import  export。

　　sideEffects：不需要被Tree shaking的文件,需要列出來，有可能誤刪代碼，如模塊中的css，全局變量等。

// package
"sideEffects": [
        "*.css",
        "*.vue"
    ],

 

　　babel配置影響：保留es6的模塊化語法，不需要轉成其他模塊化語法。babel.config.js : module：false

三，提升構建的速度

　　noParse：一些庫不需要解析，沒有使用模塊化方式import ， export的庫或獨立的庫。eg：loadsh。

　　DllPlugin：  避免打包時，對不變的庫進行重復構建。提取成動態鏈接的方式，進行引用。拆分bundles。

　　　　　　　　eg：react，react-dom（比較穩定的庫）

四，按需加載

　　1，通過entry入口文件（多個）。特點：需手工維護入口文件，入口文件有可能有重復引用，重復打包。

　　2，防止重復：使用 splitChunk 去除重復引用和分離（第三方庫和業務） chunk。

optimization:{ //實現按需加載，將業務代碼 與 帶三方庫代碼進行分離
    splitChunks: {
      cacheGroups: {
        vendor:{ //第三方庫
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
          minSize: 0,
          minChunks: 1,
          priority: 10 ,// 資源加載優先級
          chunks: 'initial' //同步
        },
        common: { //公共代碼
          name: 'common',
          test: /[\\/]src[\\/]/,
          chunks: 'all', //靜態引入，和動態引入都考慮在內
        }
      }
    }
  },

　　3，動態加載：通過模塊的內聯函數調用來分離代碼。import('..').then(_ => {})