webpack对代码的优化

webpack对代码的优化

减少打包的时间

1. 优化loader

//设置
exclude：/node_modules/

2. HappyPack

happyPack可以将loader同步执行转为并行

3. DllPlugin

可以将特定的类库提前打包然后引入，减少打包类库的次数。只有类库更新才会重新打包

代码压缩 Uglyfy

Mode 设置为production

module.exports = {
  mode: 'production'
};

代码分割 以lodashJS 为例子

1. externals -----除了自己写的业务代码，其他的第三方的文件都单独抽离出来

   在webpack 的config文件中写入

   externals:{
     lodash:'window_'
   }
   

2. Entry points

   最简单最直观的方式，在webpack配置中entry字段中增添新的入口

   要新建一个js文件 引一下lodash，然后暴露出去

   /**lodash.js **/
   const _ = require('lodash')
   window._ = _
   module.exports = _
   /**webpack.config.js **/
   entry:{
       lodash:path.resolve(__dirname,'../src/lodash.js')
   		app:path.resolve(__dirname,'../src/app.js')
   }
   

3. SpliteChunks

   Optimization

//**webpack.config.js**
module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',//all async in
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

Tree shaking 工具 webpack-bundle-analyzer 追踪代码大小

tree shaking es模块 使用方法：

1. 只有用import引入的，而且用了解构才能触发， 因为只有esm支持静态分析

2. 再就是模块也得是用这种方式导出的，一般的package中如果有module字段，那么就是esm的入口

module:'dist/vue.runtime.esm.js'

3. scripts 使用treeshaking只需要加一个mode production

“build”: “webpack --mode production”