搭建一个简单的webpack（五）

1、speed-measure-webpack-plugin

speed-measure-webpack-plugin插件可以作为一个webpack打包量化的指标，帮助我们在打包webpack时看到之前操作的优化到底是负优化还是正优化。

npm install speed-measure-webpack-plugin -D

修改webpack.config.js文件：

const SpeedMesureWebpackPlugin = require("speed-measure-webpack-plugin");
const smwp=new SpeedMesureWebpackPlugin();

const configs={
    
    
//把之前配置在module.exports里的mode、entry、output、module、plugins、devServer、devtool、performance、resolve的属性都移动到configs里
};
module.exports = smwp.wrap(configs);

最后npm run build时可以看到量化的
在这里插入图片描述
npm run dev也可以看到

2、exclude/include

exclude/include确保转译尽可能少的文件。exclude是指排除文件，include是指包含文件。exclude 的优先级高于 include，在 include 和 exclude 中要使用绝对路径数组，尽量避免使用 exclude，更倾向使用 include。

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.jsx?$/,
        use: ["babel-loader"],
        exclude: /node_modules/,
        include:[path.resolve(__dirname,'src')]
      },
    ]
   },
}

未进行include配置时SMP为3.8sesc
在这里插入图片描述

3、cache-loader

在一些性能开销较大的 loader 之前添加 cache-loader，可以将结果缓存在磁盘中，从而实现打包优化。

npm install cache-loader -D

修改webpack.config.js的配置，在所有use数组里都添加cache-loader。
注：添加cache-loader后第一次npm run build时，npm run build的SMP会比之前运行的时间都要长，当第二次运行时，就会大大缩短SMP的时间。

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.jsx?$/,
        use: ["cache-loader","babel-loader"],
        exclude: /node_modules/,
        include:[path.resolve(__dirname,'src')]
      },
    ]
   },
}

添加cache-loader后的第一次npm run build：
在这里插入图片描述
添加cache-loader后的第二次npm run build：

如果只打算给babel-loader添加cache的话，可以不添加cache-loader，可以给babel-loader 增加cacheDirectory。cacheDirectory默认为false，当有设置cacheDirectory时，会有指定的目录来缓存 loader 的执行结果。设置为true的话会使用默认缓存目录缓存loader的执行结果。

4、happypack

happypack可以让 webpack 同一时刻处理多个任务（即把任务分解给多个子进程去并发执行，子进程处理完后再把结果发送给主进程），发挥多核 CPU 电脑的威力，以提升构建速度。

npm install happypack -D

修改webpack.config.js文件

const HappyPack = require("happypack");

const configs = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
        use: "HappyPack/loader?id=file",
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HappyPack({
    
    
      id: "file", 
      use: [
        "cache-loader",
        {
    
    
          loader: "url-loader",
          options: {
    
    
            limit: 10240,
            esModule: false,
            name: "[name]_[hash:6].[ext]",
            outputPath: "assets"
          }
        }
      ]
    })
  ],
};

注：use的修改就相当于在rules的use设置一个识别new HappyPack的id的字符串，new HappyPack里的use就是之前存在于rules里面的use。
注：当项目不复杂时不需要配置 happypack，因为进程的分配和管理也需要时间，当项目不复杂时并不能有效提升构建速度，甚至会变慢，本项目就变慢了。
在这里插入图片描述
当然npm run build多了之后，SMP就会减小。

5、thread-loader

除了使用 HappyPack 外，我们也可以使用 thread-loader 。 thread-loader的使用就是只需把他放置在其它 loader 之前，那么放置在这个 loader 之后的 loader 就会在一个单独的 worker 池中运行。

npm install thread-loader -D

修改webpack.config.js文件：

```javascript
const HappyPack = require("happypack");

const configs = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.jsx?$/,
        use: ["thread-loader","cache-loader", "babel-loader"],
        exclude: /node_modules/,
        include: [path.resolve(__dirname, "src")]
      },
};

在这里插入图片描述

6、JS 多进程压缩

当前 webpack 默认使用的 TerserWebpackPlugin就已经开启了多进程和缓存。虽然很多 webpack 优化的文章上会提及多进程压缩的优化，不管是 webpack-parallel-uglify-plugin 或者是 uglifyjs-webpack-plugin 配置 parallel。其实没必要单独安装这些插件因为它们并不会让我们webpack的构建速度提升。

7、HardSourceWebpackPlugin

HardSourceWebpackPlugin为模块提供中间缓存，第一次运行的时候可能时间没有多大变化，但是到第二次时运行的时间就会快很多。

npm install hard-source-webpack-plugin -D

修改webpack.config.js文件：

const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");

const configs = {
    
    
  plugins: [
      new HardSourceWebpackPlugin()
  ],
};

npm run build时第一次的SMP会和第二次的SMP相差甚远：

第一次npm run build
第二次npm run build

8、noParse

像jQuery、lodash这种没有CommonJS/AMD规范版本的第三方模块，可以使用noParse去标识这些模块，这样webpack就不会对这些模块进行转化和解析，从而提高webpack打包的速度。

module.exports = {
    
    
    module: {
    
    
        noParse: /jquery|lodash/
    }
}

9、resolve

resolve 配置 webpack 如何寻找模块所对应的文件

10、IgnorePlugin

IgnorePlugin是webpack 的内置插件，忽略第三方包指定目录

module.exports = {
    
    
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
}

同样也是第一次打包时SMP和原来比没有什么变化甚至变长，但是当第二次打包时SMP会缩短。
在这里插入图片描述

11、externals

我们通常通过使用import引入第三方库，但是我们可以通过在index.html页面以script方式引入第三方库，也就是将js存储在CDN上，这样就可以减少webpack打包出来的体积。
此时我们把Vue存储在CDN上：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login</title>
</head>

<body>
    <div>login</div>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
</body>

</html>

再在webpack.config.js文件中配置externals

module.exports = {
    
    
    externals: {
    
    
        vue: "vue"
    }
}

12、DllPlugin

如果把所有的js文件都打包成一个js文件，那会导致最终生成的js文件变得很大，所以我们要对bundles进行拆分

详情可查看我搭建的webpackTest