webpack 打包第三方库_webpack入门必备（二）：优化配置

之前写的《webpack入门必备（一）：基础配置》主要介绍了webpack基础解析所需的loader/plugin。而随着日常webpack的使用，我们会更多关注如何构建更快、构建产物更小、构建产物符合规范...希望这篇文章可以让你找到答案。

一、webpack4的构建优化

1. 加快构建速度

1.1 优化配置

这里介绍的主要的几种优化配置如下所示： 1. 缩小构建范围 - exclude、include范围 - noParse - IgnorePlugin 2. 多进程 - thread-loader/happypack 3. 缓存 - cache-loader/cacheDirectory，把loader的处理结果缓存到本地 - Dll缓存，把一些不常变更的模块构建产物缓存在本地

如果你有没用过的配置可以接着看下面的具体使用方法，如果你已经很熟悉了则可以跳过此节~

1. exclude、include范围

配置来确保转译尽可能少的文件（exclude 的优先级高于 include）

const rootDir = process.cwd();

{
    
        test: /.(j|t)sx?$/,
        include: [path.resolve(rootDir, 'src')],
        exclude: [
          /(.|_)min.js$/
        ],
}

PS. 相比exclude可以多用include

2. noParse

如果一些库不依赖其它库的库，不需要解析他们，可以引入来加快编译速度。

noParse: /node_modules/(moment|chart.js)/

3. IgnorePlugin

忽略第三方包指定目录。 (他是webpack 内置的插件)

例如: moment (2.24.0版本) 会将所有本地化内容和核心功能一起打包，我们就可以使用 IgnorePlugin 在打包时忽略本地化内容(语言包)，见下图。

plugins: [
  // 表示忽略moment下的locale文件夹内容
  new webpack.IgnorePlugin(/^./locale$/, /moment$/)
]

4.1 thread-loader

把 thread-loader 放置在其它 loader 之前，那么它之后的 loader 就会在一个单独的 worker 池中运行。

// 项目中babel-loader一般耗时比较长，所以可以配置thread-loader 
rules: [ 
    {
     
        test: /.jsx?$/, 
        use: ['thread-loader', 'cache-loader', 'babel-loader'] 
    } 
]

4.2 happypack

运行在Node.js上的webpack是单线程，将文件解析的任务拆分由多个子进程并发进行，然后子进程处理完任务后再将结果发送给主进程，提升项目构件速度。 （但是因为进程的分配和管理也需要时间，所以使用后不一定快，需要项目接入实验一下）

const Happypack = require("happypack");
module.exports = {
    
  module: {
    
    rules: [
      {
    
        test: /.js[x]?$/,
        use: "Happypack/loader?id=js",
        include: [path.resolve(__dirname, "src")],
      },
      {
    
        test: /.css$/,
        use: "Happypack/loader?id=css",
        include: [
          path.resolve(__dirname, "src"),
          path.resolve(__dirname, "node_modules", "bootstrap", "dist"),
        ],
      },
      {
    
        test: /.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2|.gexf)$/,
        use: "Happypack/loader?id=file",
        include: [
          path.resolve(__dirname, "src"),
          path.resolve(__dirname, "public"),
          path.resolve(__dirname, "node_modules", "bootstrap", "dist"),
        ],
      },
    ],
  },
  plugins: [
    new Happypack({
    
      id: "js", //和rule中的id=js对应
      //将之前 rule 中的 loader 在此配置
      use: ["babel-loader"], //必须是数组
    }),
    new Happypack({
    
      id: "css", //和rule中的id=css对应
      use: ["style-loader", "css-loader", "postcss-loader"],
    }),
    new Happypack({
    
      id: "file", //和rule中的id=file对应
      use: [
        {
    
          loader: "