Webpack优化项⽬的⼿段

时间：2024-10-26 18:27:04
module.exports = { 
  optimization: {
    splitChunks: {
      chunks: 'async', // 值有 all，async 和 initial
      minSize: 20000, // ⽣成 chunk 的最⼩体积（以 bytes 为单位）。
      minRemainingSize: 0,
      minChunks: 1, // 拆分前必须共享模块的最⼩ chunks 数。
      maxAsyncRequests: 30, // 按需加载时的最⼤并⾏请求数。
      maxInitialRequests: 30, // ⼊⼝点的最⼤并⾏请求数。
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/, //第三⽅模块拆出来
          priority: -10,
          reuseExistingChunk: true,
        },
        util.vendors: {
  test: /[\/]utils[\/]/, //公共模块拆出来
    minChunks: 2,
      priority: -20,
        reuseExistingChunk: true,              
                    },  
                  },
  },
},
 }
tree shaking  
tree shaking 在⽣产模式下已经默认开启了
只是需要注意下⾯⼏点：
1. 只对 ESM ⽣效
2. 只能是静态声明和引⽤的 ES6 模块，不能是动态引⼊和声明的。
3. 只能处理模块级别，不能处理函数级别的冗余。
4. 只能处理 JS 相关冗余代码，不能处理 CSS 冗余代码。
⽽可能样式⽂件⾥⾯有些代码我们也没有使⽤，我们可以通过 purgecss-webpack-plugin 插件
来对 css 进⾏ tree shaking 
const path = require("path");
const PurgecssPlugin = require("purgecss-webpack-plugin");
const glob = require("glob"); // ⽂件匹配模式
module.exports = {//...
  plugins: [
    ...new PurgeCSSPlugin({
      paths: glob.sync(`${PATH.src}/**/*`, { nodir: true }),
    })
  ],
};
gzip
前端除了在打包的时候将⽆⽤的代码或者 console 、注释剔除之外。我们还可以使⽤ Gzip 对资
源进⾏进⼀步压缩。那么浏览器和服务端是如何通信来⽀持 Gzip 呢？
1. 当⽤⼾访问 web 站点的时候，会在 request header 中设置 accept-encoding:gzip ，表明浏览器是否⽀持 Gzip 。
2. 服务器在收到请求后，判断如果需要返回 Gzip 压缩后的⽂件那么服务器就会先将我们的
JS\CSS 等其他资源⽂件进⾏ Gzip 压缩后再传输到客⼾端，同时将 response headers设置 content-encoding:gzip 。反之，则返回源⽂件。
3. 浏览器在接收到服务器返回的⽂件后，判断服务端返回的内容是否为压缩过的内容，是的话则进⾏解压操作。⼀般情况下我们并不会让服务器实时 Gzip 压缩，⽽是利⽤ webpack 提前将静态资源进⾏ Gzip 压缩，然后将 Gzip 资源放到服务器，当请求需要的时候直接将 Gzip 资源发送给客⼾端。 我们只需要安装 compression-webpack-plugin 并在 plugins 配置就可以了 
  const CompressionWebpackPlugin = require("compression-webpack-plugin"); 
// 需要安装
    module.exports = {
      plugins: [new CompressionWebpackPlugin()]
  }
作⽤域提升
Scope Hoisting 可以让 webpack 打包出来的代码⽂件体积更⼩，运⾏更快。在开启 Scope Hoisting 后，构建后的代码会按照引⼊顺序放到⼀个函数作⽤域⾥，通过适当重命名某些变量以防⽌变量名冲突，从⽽减少函数声明和内存花销。需要注意： Scope Hoisting 需要分析模块之间的依赖关系，所以源码必须采⽤ ES6 模块化语法Scope Hoisting 是 webpack 内置功能，只需要在 plugins ⾥⾯使⽤即可，或者直接开启⽣产环境也可以让作⽤域提升⽣效。 
module.exports = {
  //⽅式1
  mode: 'production',
  //⽅式2
  plugins: [// 开启 Scope Hoisting 功能new
    webpack.optimize.ModuleConcatenationPlugin()
  ]
}

相关文章