webpack優(yōu)化策略

量化工具：

    speed-measure-webpack-plugin 測(cè)量各個(gè)插件和loader所花費(fèi)的時(shí)間耐床。
    webpack-boundle-analyzer 分析打包后的文件大小

共性優(yōu)化策略：

    1.減小文件搜索范圍
         resolve.modules ：配置模塊庫（即 node_modules）所在的位置
         loader配置include\exclude
         module.noParse 不需要解析某些模塊的依賴（這些模塊并沒有依
       賴，或者并根本就沒有模塊化）jquery \ lodash \ moment
    2.happyPack 加速代碼構(gòu)建 或者 thread-loader
      利用cpu多核恶座，采用多個(gè)子進(jìn)程去解析和遍歷js\css.完成后再發(fā)到主進(jìn)程
    3.優(yōu)化babel-loader 
        cacheDirectory 為true
        引入cache-loader 在性能開銷較大的loader之前添加，存在磁盤中
    4.不需要打包編譯的插件庫換成全局<script>標(biāo)簽引入的方式 
        例如： react / react-dom / jquery 等
        然后在webpack配置里使用 expose-loader  
                            或 externals 
                            或 ProvidePlugin  
        提供給模塊內(nèi)部使用相應(yīng)的變量
    5.合理抽離公共代碼
        CommonsChunkPlugin  / webpack4的 optimization.splitChunks
    6.代碼層面
        沒有使用到的依賴不要引入.
        按模塊化的方式引入其中一部分  
            import debounce from 'lodash/debounce';
    7.采用異步加載，使用代碼切割 import()  / reuqire.ensure 
    8.IgnorePlugin 忽略第三方包指定目錄
        例如：忽略moment下的.locale包臣咖，然后在使用的時(shí)候指定具體與語言
        new  webpack.IgnorePlugin(/^\.\/locale$/,/moment$/)
        import 'moment/locale/zh-cn'

區(qū)分環(huán)境，分開配置

  開發(fā)環(huán)境：
      1.免刷新：
          --hot 熱更新熱替換漱牵，不丟失狀態(tài)
      2.提高構(gòu)建速度：                
          DllPlugin  /  DllReferencePlugin 把第三方庫代碼分離開（對(duì)于依賴的第三方庫打包成動(dòng)態(tài)鏈接庫）                
          拷貝靜態(tài)文件 copy-webpack-plugin
      3.不做無意義的操作：
          比如：開發(fā)環(huán)境不需要 代碼壓縮夺蛇、目錄內(nèi)容清理、計(jì)算文件hash酣胀、提取CSS文件   
      4.選擇合適的devtool .

  生產(chǎn)環(huán)境：
      多線程壓縮文件 ParallelUglifyPlugin  / TerserPlugin：
          【webpack自帶的UglifyJS是單線程壓縮輸出】

如何使用tree-shaking刁赦？

  1）.確保代碼是es6格式,即 export，import

   2）.package.json中闻镶，設(shè)置sideEffects

   3）.確保tree-shaking的函數(shù)沒有副作用

    4）.babelrc中設(shè)置presets [["env", { "modules": false }]] 禁止轉(zhuǎn)換模塊甚脉，交由webpack進(jìn)行模塊化處理

    5）.結(jié)合uglifyjs-webpack-plugin