1. 借助 babel-plugin-import 实现按需引入，比如引入 antd、lodash 库的时候，可以自动引入对应的样式和 js 文件 ```javascript babel-plugin-import // 实现自动按需引入

    use: [ { loader: ‘babel-loader’, options: { presets: [], plugins: [ [ ‘import’, { library: ‘lodash’ // 对这个库进行按需加载 } ] ] } } ]

    2. 2. 开启 tree-shaking
    3. ```javascript
    4. optimization: {
    5.     usedExports: true
    6. }
    1. 借助 splitChunks 实现分包打包成一个独立的 vendor，可以降低包的大小，优化首屏加载的速度，抽离公共模块
    2. 可以借助插件 webpack-bundle-analyzer 和 speed-measure-webpack-plugin 对打包后的文件进行分析，还有各个部分的耗时

    3. 通过 exclude、include 选项设置搜索的范围

      {
 test: /.js/,
loader: 'babel-loader',
exclude: /node_modules/,
// 只转换 src 下面的代码
include: ['./src']
}

    4. 设置 扩展名，这样如果项目中引入模块的时候，没有写后缀，会依次尝试扩展名进行匹配，加快查找

      module.exports = {
 resolve: {
   extensions: ['.vue', '.js']
}
}

    5. 压缩css，optimize-css-assets-webpack-plugin

    6. 压缩js，uglifyjs-webpack-plugin
    7. 开启 webpack 多进程打包，借助 thread-loader，thread-loader 会对它后面的loader开启多进程打包
      {
 test: /.js/,
exclude: /node_modules/,
use: [
 {
     loader: 'thread-loader',
   options: {
       workers: 2 // 设置进程数量 2个
   }
 },
 {
     loader: 'babel-loader'，
   options: {
         presets: [
           [
               '@babel/preset-env',
               {
                   useBuiltIns: 'usage', // 按需加载
                   corejs: { version: 3 },
                     targets: {
                         chrome: 10
                     }
                 }
           ]
       ]
     }
 }
]
}