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 '结果没有别赋值给变量'
}
复制代码

三、代码只会影响死变量（只写不读）