webpack学习笔记-webpack减少代码体积

Tree Shaking

开发时我们定义了一些工具类函数库，或者引用第三方工具函数库或组件库。 如果没有特殊处理的话我们打包时会引入整个库，但是实际上我们可能只用一小部分的功能，这样将整个库都打包进来，体积就太大了。

Tree Shaking 是一个术语， 通常用于描述移除没有使用过的JavaScript代码。

注意：它依赖与 ES module

webpack已经帮我们默认开启了这个功能，不需要进行配置。

减少Babel编译后的代码体积

Babel对一些公共方法使用了非常小的辅助代码，比如_extend。默认情况下会被添加到每一个需要它的文件中。你可以引入Babel runtime 作为一个独立的模块，来避免重复引入。下面的配置禁用了Babel自动对每个文件的runtime注入，而是引入 @babel/plugin-transform-runtime 并且使所有的辅助代码从这里引入。

下载@babel/plugin-transform-runtime 包

npm install @babel/plugin-transform-runtime --save-dev

在weapck.config.js中使用

module.exports = {
  module:{
    rules:[
      ...
      {
        test: /\.m?js$/,
        //  exclude: /node_modules/, // 排除node-module的文件转换
        include: path.resolve(__dirname,'../src'), // 只处理src下面的文件，其他文件不解析
        use: [
          {
            loader: 'thread-loader', // 开启多进程
            options: {
              // 产生的 worker 的数量，默认是 (cpu 核心数 - 1)，或者
              workers: threads // 
            },
          },
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true, // 开启babel缓存
              cacheCompression: false, //关闭babel缓存的zip压缩
              plugins: ['@babel/plugin-transform-runtime'] // 减少babel编译后的代码体积
            },
          },
        ]
      }
    ]
  }
}

压缩图片文件

开发中如果我们引用了很多图片，那么图片的体积会比较大，将来请求会比较慢。我们可以对图片进行压缩，减小图片体积。

注意：如果图片是在线链接，就不需要了，只有本地图片才需要压缩。

下载插件

npm install image-minimizer-webpack-plugin imagemin --save-dev

除此之外还需要下载以下package包

• 无损压缩

cnpm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

• 有损压缩

cnpm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev

Tip: 作者本地使用npm下载抱错，使用cnpm代替

npm install -g cnpm --registry=https://registry.npm.taobao.org

在webpack.prod.js中进行配置

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"); // 压缩图片
module.exports = {
...
  optimization: {
    minimizer: [
      ...
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ['gifsicle', { interlaced: true }],
              ['jpegtran', { progressive: true }],
              ['optipng', { optimizationLevel: 5 }],
              ['svgo', {                plugins: [                  'preset-default',                  'prefixIds',                  {                    name:"sortAttrs",                    params: {                      xmlnsorder:"alphabetical",                    }                  }                ]
              }]
            ]
          }
        }
      }),
    ]
  }
}