webpack學習筆記（六）--source map、提取公共資源、tree shaking(搖樹優化)

使用source map

關鍵字

• eval:打包時，使用eval包裹模塊代碼
• source map:產生.map文件,source map文件是分離開的
• cheap:報錯不能定位到列，不包含列信息
• inline:將.map做爲DataURI嵌入，不單獨生成.map文件，內聯進文件中
• module:包含loader的sourcemap
• webpack的配置:

module.exports = {
  ...
  mode:'none'//production:不生成source map
  devtool:'source-map'//eval,source-map,inline-source-map
}
複製代碼

source map 類型

不適合生產環境

• eval：webpack生成的代碼
• cheap-eval-source-map: 通過loader轉換後的代碼（只能看到行）
• cheap-module-eval-source-map:源代碼（只能看到行）
• eval-source-map: 源代碼
• inline-cheap-source-map:通過loader轉換後的代碼（只能看到行）
• inline-cheap-module-source-map: 源代碼（只能看到行）
• inline-source-map: 源代碼

適合生產環境

• (none): 最終輸出代碼
• cheap-source-map: 通過loader轉換後的代碼
• cheap-module-source-map: 源代碼
• source-map：源代碼
• hidden-source-map: 源代碼

提取公共資源

基礎庫分離

將react、react-dom基礎包經過cdn(內容分發網絡)引入，不打入bundle中

• 一、安裝：npm i html-webpack-externals-plugin -D
• 二、webpack中添加配置

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
module.exports = {
  plugins:[
    new HtmlWebpackExternalsPlugin({
          externals:[
            {
              module:'react',
              entry:'https://unpkg.com/react@16/umd/react.production.min.js',
              global:'React'
            },
            {
              module:'react-dom',
              entry:'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
              global:'ReactDOM'
            }
          ]
        })
  ]
}
複製代碼

• 三、頁面中引用cdn的連接

  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> 
  複製代碼

• 四、npm run build

  能夠查看生成的js文件大小小不少

利用SplitChunksPlugin分割代碼

webpack 默認會自動拆分代碼塊，條件：

• 一、會被共享的代碼或者來自node_modules文件夾中的modules
• 二、大於30kb的代碼塊（壓縮gz以前）
• 三、加載chunks是的並行請求數量不超過5個
• 四、加載初始頁面時的並行請求數量不超過3個

默認配置

module.exports = {
  ...
  optimiztion: {
    splitChunks: {
      chunks:'async',//用來選擇分割哪些代碼塊，可選值有：'all'(全部代碼塊),'async'(異步代碼),'initial'(同步代碼)
      minSize: 30000,//模塊的最小體積
      maxSize: 0,
      minChunks: 1,//模塊的最小被引用的次數
      maxAsyncRequests:5,//按需加載的最大並行請求數
      maxInitialRequests:3,//一個入口最大並行請求數
      automaticNameDelimiter:'~',//文件名的鏈接符
      automaticNameMaxLength: 30,
      name:true,
      cacheGroups: {//緩存組
        vendors:{
          test:/[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk:true
        }
      }
    }
  }
}
複製代碼

分離基礎包

• 一、先刪除HtmlWebpackExternalsPlugin的配置和html中的引用
• 二、webpack中添加配置

  module.exports = {
    //...
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            test: /(react|react-dom)/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    },
  }
  複製代碼

• 三、HtmlWebpackPlugin中的chunks增長提取的jschunks:['vendors',name]
• 四、npm run build

分離公共文件

• 一、建立common公共文件index.js
• 二、import common from '../../common'
• 三、webpack中的添加配置

  module.exports = {
    //分離頁面公共文件
    optimization: {
      splitChunks: {
        minSize:0,//引用模塊大小 0:只要有引用符合要求就提取到commons文件中
        cacheGroups: {
          commons: {
            name: 'commons',
            chunks: 'all',
            minChunks: 2//最小引用次數爲2次
          }
        }
      }
    },
  }
  複製代碼

• 四、npm run build

tree shaking(搖樹優化)

• webpack4中production ：默認開啓

沒用的代碼，構建時將刪除掉(必須是es6的寫法,commonjs不支持require不支持)

• DCE

一、代碼不會被執行，不可到達，如：

if(false){
  console.log('將不會被執行')
}
複製代碼

二、代碼執行結果不會被用到

function aa(){
  return '結果沒有別賦值給變量'
}
複製代碼

三、代碼只會影響死變量（只寫不讀）