webpack生产环境性能优化

生产环境性能优化 oneOf

以下loader只会匹配一个，减少文件被匹配的次数，提高构建速度

module:{{
  oneof:[{ // 打包样式资源
    test:/\.css$/g, // 匹配哪些文件
    use:['style-loader', 'css-loader'], // 使用哪些loader处理文件
  },{ // 处理图片资源，默认不能处理html中的图片
    test:/\.(jpg|png|gif)$/,
    loader:'url-loader', // 下载url-loader、file-loader
    options:{
      limit: 8 * 1024, // 图片小于8kb就会被base64处理，优点：减少请求次数；缺点：图片体积更大, url-loader使用ES6module，而html-loader引入图片是commonjs
      esModule:false, // 关闭ES6module，使用commonjs解析
      name:'[hash:10].[ext]', // 重命名，[hash:10]取图片的hash值的前10位，[ext]取原图片的扩展名
      outputPath:'imgs'
    }
  },{
    test:/\.html$/,
    loader:'html-loader', // 处理html-loader中的图片（负责引入img，从而能被url-loader处理）
  },{
    exclude:/\.(css|js|html)$/, // 处理除css、js、html的其他资源
    loader:'file-loader',
    options:{
      name:'[hash:10].[ext]',
      outputPath:'media'
    }
  }]
}}

babel缓存

output:{
  filename:'./src/index.[hash:10].js' // 文件缓存
},
module:{
  ruels:[{
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'babel-loader',
    options:{
      presets:['@babel/preset-env'], // 只需要在js文件中引入即可，这种方式是代码文件太大
      cacheDirectory:true // 开启babel缓存
    }
  }]
}

babel缓存：让第二次打包速度更快
文件资源缓存：通过修改文件名，例如加一个hash值，webpack每次构建都会生成唯一的hash值
chunkhash：根据chunk生成hash值，如果打包来源于 同一个chunk那么hash值一样
contenthash：根据文件的内容生成hash，不同文件hash值不一样。让代码上线运行缓存更好使用

多进程打包

多进程打包，提高打包速度

module:{
  ruels:[{
    test:/\.js$/,
    exclude:/node_modules/,
    use:[
      // 'thread-loader', // 开启多进程打包，进程通信也有开销，只有工作消耗时间比较长才需要多进程打包
      {
        loader:'thread-loader',
        options:{
          workers:2 // 进程2个
        }
      }
    ]
  }]
}

externals

禁止指定的模块打包

externals:{
// 忽略名，npm包名 拒绝jQuery包被打包
  jquery:'jQUery'
}

dll

使用dll技术对某些库进行单独打包（第三方库：jquery、vue）
当运行webpack时，默认查找webpack.config.js配置文件
需要运行 webpack.dll.js
webpack --config webpack.dll.js

// webpack.dll.js
entry:{
  jquery:['jquery']
},
output:{
  filename:'[name].js',
  path:path.resolve(__dirname, 'dll'),
  library:'[name]_[hash]' // 打包的库里面向外暴露出去的内容叫什么名字
},
plugins:[
  // 打包生成一个manifest.json --> 提供和jquery映射
  new webpack.DllPlugin({
    name'[name]_[hash]', // 映射库的暴露的内容名称
    path:path.resolve(__dirname, 'dll/manifest.json') // 输出文件路径
  }),
]

// webpack.config.js
plugins:[
  new webpack.DllRenferencePlugin({
    manifest:path.resolve(__dirname, 'dll/manifest.json')
  }),
  new AddAssetHtmlWebpackPlugin({
    filePath:path.resolve(__dirname, 'dll/jquery.js')
  })
]

tree shaking

去除无用代码

前提条件：1. 必须使用ES6模块 2. 开启production

在package.json中配置

{"sideEffects":false}所有代码都没有副作用，都可以使用tree shaking。可能会把css、babel文件干掉
{ "sideEffects":["*.css"]}css文件不会被tree shaking

code split

把一个文件分割成多个文件

第一种方式:需要频繁的更改配置文件，配置多个入口

entry:{
  main:'./src/index.js',
  test:'./src/test.js'
},
output:{
  filename:'js/[name].[contenthash:10].js' // [name]取文件名
}

第二种方式:只需要配置一个入口

entry:'./src/index.js',
optimization:{
  splitChunks:{
    chunks:'all'
  }
}

将node_modules单独打包成一个chunk
自动分析多入口chunk中，有没有公共的文件，如果有会打包成单独一个chunk

在单入口的情况下使用js代码，让某一个文件被单独打包成一个chunk

import(/* webpackChunkName: 'test'*/'./test').then(res => {
  
})