webpack

Webpack

优化构建速度

• 路径解析resolve下有个modules配置，对于声明的模块进行搜索。 当我们确定所有的第三方依赖模块都是在项目根目录下的node_modules中的话，可以再node_module之前配置一个确定的绝对路径

resoleve: {
    modules:[
    path.resolve(__dirname,'node_modules'),//指定当前目录下的node_modules优先查找
    'node_modules'
    ]
}
复制代码

减少resolve解析

resolve: {
  modules: [
    path.resolve(__dirname, 'node_modules'), // 使用绝对路径指定 node_modules，不做过多查询
  ],

  // 删除不必要的后缀自动补全，少了文件后缀的自动匹配，即减少了文件路径查询的工作
  // 其他文件可以在编码时指定后缀，如 import('./index.scss')
  extensions: [".js"], 

  // 避免新增默认文件，编码时使用详细的文件路径，代码会更容易解读，也有益于提高构建速度
  mainFiles: ['index'],
},
复制代码

• 配置loader中有个noParse属性，可以用于配置哪些模块文件的内容不需要解析。对于一些不需要解析依赖的第三方大型类库，通过这个字段来配置，可以加快构建速度

module.exports = {
  // ...
  module: {
    noParse: /jquery|lodash/, // 正则表达式

    // 或者使用 function
    noParse(content) {
      return /jquery|lodash/.test(content)
    },
  }
}
复制代码

把loder范围限制到最小

只在最少数必须的代码模块中去使用必要的 loader，例如 node_modules 目录下的其他依赖类库文件，基本就是直接编译好可用的代码，无须再经过 loader 处理了

rules: [ 
  {
    test: /\.jsx?/,
    include: [ 
      path.resolve(__dirname, 'src'), 
      // 限定只在 src 目录下的 js/jsx 文件需要经 babel-loader 处理
      // 通常我们需要 loader 处理的文件都是存放在 src 目录
    ],
    use: 'babel-loader',
  },
  // ...
],

如果我们选择开启缓存将转译结果缓存至文件系统，则至少可以将 babel-loader 的工作效率提升两倍。要做到这点，我们只需要为 loader 增加相应的参数设定：

loader: 'babel-loader?cacheDirectory=true'
复制代码

Happypack——将 loader 由单进程转为多进程

webpack 是单线程的，就算此刻存在多个任务，你也只能排队一个接一个地等待处理。这是 webpack 的缺点，好在我们的 CPU 是多核的，Happypack 会充分释放 CPU 在多核并发方面的优势，帮我们把任务分解给多个子进程去并发执行，大大提升打包效率。

• 配置plugin的时候有一个属性叫IgnorePlugin，这个属性可以忽略某些特定的模块，可以不被打包进去，可以加快打包速度。例如我们使用 moment.js，直接引用后，里边有大量的 i18n 的代码，导致最后打包出来的文件比较大，而实际场景并不需要这些 i18n 的代码，这时我们可以使用 IgnorePlugin 来忽略掉这些代码文件，配置如下：

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

IgnorePlugin 配置的参数有两个，第一个是匹配引入模块路径的正则表达式，第二个是匹配模块的对应上下文，即所在目录名。

减少plugin消耗

webpack 的 plugin 会在构建的过程中加入其它的工作步骤，如果可以的话，适当地移除掉一些没有必要的 plugin。

使用DllPlugin

使用这个插件时需要额外的一个构建配置，用来打包公共的那一部分代码，举个例子，假设这个额外配置是 webpack.dll.config.js

DLLPlugin 构建出来的内容无需每次都重新构建，后续应用代码部分变更时，你不用再执行配置为 webpack.dll.config.js 这一部分的构建，沿用原本的构建结果即可，所以相比 optimization.splitChunks，使用 DLLPlugin 时，构建速度是会有显著提高的。

优化前端资源加载速度

• 图片特殊处理：使用cssScript对多个图片整合到一个，减少前端的资源请求；使用dateUrl对小的图进行base64转换；通过组件对图片、Html、JS，Css进行代码压缩
• 利用浏览器缓存，不将所有的内容都打包在一个js里，对公共的内容可以分开打包css(因为有的时候只是更改了样式)，当JS内容过大，也可以分开打包。(这样虽然浏览器多了一次请求，但不至于每次我们改一些小内容就重新下载，利用浏览器缓存，可已大大加快速度)
• 按需加载
• 使用tree shakeing 删除无用代码
• 使用sideEffects 可以不把那些很大的第三方模块全部引入，只打包我们用到的工具

import { forEach, includes } from 'lodash-es'

forEach([1, 2], (item) => {
  console.log(item)
})

console.log(includes([1, 2, 3], 1))

由于 lodash-es 这个模块的 package.json 文件有 sideEffects: false 的声明，所以 webpack 会将上述的代码转换为以下的代码去处理：

import { default as forEach } from 'lodash-es/forEach'
import { default as includes } from 'lodash-es/includes'

// ... 其他代码
复制代码

仅用于个人整理

转载于:https://juejin.im/post/5cb35433e51d456e2e656d16