阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Webpack 性能优化

      问题

      Webpack 性能优化

      答案

      这部分的内容中,我们会聚焦于以下两个知识点,并且每⼀个知识点都属于⾼频考点:

      • 有哪些⽅式可以减少 Webpack 的打包时间
      • 有哪些⽅式可以让 Webpack 打出来的包更⼩

      1 减少 Webpack 打包时间

      1. 优化 Loader

      对于 Loader 来说,影响打包效率⾸当其冲必属 Babel 了。因为 Babel 会将代码转为字符串⽣成 AST ,然后对 AST 继续进⾏转变最后再⽣成新的 代码,项⽬越⼤,转换代码越多,效率就越低。当然了,我们是有办法优化的

      ⾸先我们可以优化 Loader 的⽂件搜索范围

      module.exports = {
          module: {
              rules: [
                  {
                      // js ⽂件才使⽤ babel
                      test: /\.js$/,
                      loader: 'babel-loader',
                      // 只在 src ⽂件夹下查找
                      include: [resolve('src')],
                      // 不会去查找的路径
                      exclude: /node_modules/
                  }
              ]
          }
      }
      

      对于 Babel 来说,我们肯定是希望只作⽤在 JS 代码上的,然后 node_modules 中使⽤的代码都是编译过的,所以我们也完全没有必要再去 处理⼀遍

      当然这样做还不够,我们还可以将 Babel 编译过的⽂件缓存起来,下次只需要编译更改 过的代码⽂件即可,这样可以⼤幅度加快打包时间

      loader: 'babel-loader?cacheDirectory=true'
      

      2. HappyPack

      受限于 Node 是单线程运⾏的,所以 Webpack 在打包的过程中也是单线程 的,特别是在执⾏ Loader 的时候,⻓时间编译的任务很多,这样就会导致 等待的情况。

      HappyPack 可以将 Loader 的同步执⾏转换为并⾏的,这样就能充分利⽤ 系统资源来加快打包效率了

      module: {
          loaders: [
              {
                  test: /\.js$/,
                  include: [resolve('src')],
                  exclude: /node_modules/,
                  // id 后⾯的内容对应下⾯
                  loader: 'happypack/loader?id=happybabel'
              }
          ]
          },
          plugins: [
              new HappyPack({
                  id: 'happybabel',
                  loaders: ['babel-loader?cacheDirectory'],
                  // 开启 4 个线程
                  threads: 4
              })
          ]
      

      3. DllPlugin

      DllPlugin 可以将特定的类库提前打包然后引⼊。这种⽅式可以极⼤的减少 打包类库的次数,只有当类库更新版本才有需要重新打包,并且也实现了将公 共代码抽离成单独⽂件的优化⽅案。

      接下来我们就来学习如何使⽤ DllPlugin

      // 单独配置在⼀个⽂件中
      // webpack.dll.conf.js
      const path = require('path')
      const webpack = require('webpack')
      module.exports = {
          entry: {
              // 想统⼀打包的类库
              vendor: ['react']
          },
          output: {
              path: path.join(__dirname, 'dist'),
              filename: '[name].dll.js',
              library: '[name]-[hash]'
          },
          plugins: [
              new webpack.DllPlugin({
              // name 必须和 output.library ⼀致
              name: '[name]-[hash]',
              // 该属性需要与 DllReferencePlugin 中⼀致
              context: __dirname,
              path: path.join(__dirname, 'dist', '[name]-manifest.json')
              })
          ]
      }
      

      然后我们需要执⾏这个配置⽂件⽣成依赖⽂件,接下来我们需要使⽤ DllReferencePlugin 将依赖⽂件引⼊项⽬中

      // webpack.conf.js
      module.exports = {
          // ...省略其他配置
          plugins: [
              new webpack.DllReferencePlugin({
                  context: __dirname,
                  // manifest 就是之前打包出来的 json ⽂件
                  manifest: require('./dist/vendor-manifest.json'),
              })
          ]
      }
      

      4. 代码压缩

      在 Webpack3 中,我们⼀般使⽤ UglifyJS 来压缩代码,但是这个是单线 程运⾏的,为了加快效率,我们可以使⽤ webpack-parallel-uglify- plugin 来并⾏运⾏ UglifyJS ,从⽽提⾼效率。

      在 Webpack4 中,我们就不需要以上这些操作了,只需要将 mode 设置为 production 就可以默认开启以上功能。代码压缩也是我们必做的性能优化 ⽅案,当然我们不⽌可以压缩 JS 代码,还可以压缩 HTML 、 CSS 代码, 并且在压缩 JS 代码的过程中,我们还可以通过配置实现⽐如删除 console.log 这类代码的功能。

      5. ⼀些⼩的优化点

      我们还可以通过⼀些⼩的优化点来加快打包速度

      resolve.extensions :⽤来表明⽂件后缀列表,默认查找顺序是 ['.js','.json'] ,如果你的导⼊⽂件没有添加后缀就会按照这个顺序查找⽂件。我们应该尽可能减少后缀列表⻓度,然后将出现频率⾼的后缀排在前⾯

      resolve.alias :可以通过别名的⽅式来映射⼀个路径,能让 Webpack 更快找到路径

      module.noParse :如果你确定⼀个⽂件下没有其他依赖,就可以使⽤该属性让Webpack 不扫描该⽂件,这种⽅式对于⼤型的类库很有帮助

      2 减少 Webpack 打包后的⽂件体积

      1. 按需加载

      想必⼤家在开发 SPA 项⽬的时候,项⽬中都会存在⼗⼏甚⾄更多的路由⻚ ⾯。如果我们将这些⻚⾯全部打包进⼀个 JS ⽂件的话,虽然将多个请求合并 了,但是同样也加载了很多并不需要的代码,耗费了更⻓的时间。那么为了⾸ ⻚能更快地呈现给⽤户,我们肯定是希望⾸⻚能加载的⽂件体积越⼩越好,这 时候我们就可以使⽤按需加载,将每个路由⻚⾯单独打包为⼀个⽂件。当然不 仅仅路由可以按需加载,对于 loadash 这种⼤型类库同样可以使⽤这个功 能。

      按需加载的代码实现这⾥就不详细展开了,因为鉴于⽤的框架不同,实现起来 都是不⼀样的。当然了,虽然他们的⽤法可能不同,但是底层的机制都是⼀样 的。都是当使⽤的时候再去下载对应⽂件,返回⼀个 Promise ,当 Promise 成功以后去执⾏回调。

      2. Scope Hoisting

      Scope Hoisting 会分析出模块之间的依赖关系,尽可能的把打包出来的模 块合并到⼀个函数中去。

      ⽐如我们希望打包两个⽂件

      // test.js
      export const a = 1
      // index.js
      import { a } from './test.js'
      

      对于这种情况,我们打包出来的代码会类似这样

      [
          /* 0 */
          function (module, exports, require) {
              //...
          },
          /* 1 */
          function (module, exports, require) {
              //...
          }
      ]
      

      但是如果我们使⽤ Scope Hoisting 的话,代码就会尽可能的合并到⼀个函 数中去,也就变成了这样的类似代码

      
      [
          /* 0 */
          function (module, exports, require) {
          //...
      }
      

      这样的打包⽅式⽣成的代码明显⽐之前的少多了。如果在 Webpack4 中你希 望开启这个功能,只需要启⽤ optimization.concatenateModules 就可以 了。

      module.exports = {
          optimization: {
              concatenateModules: true
          }
      

      3. Tree Shaking

      Tree Shaking 可以实现删除项⽬中未被引⽤的代码,⽐如

      // test.js
      export const a = 1
      export const b = 2
      // index.js
      import { a } from './test.js'
      

      对于以上情况, test ⽂件中的变量 b 如果没有在项⽬中使⽤到的话,就不会被打包到 ⽂件中。

      如果你使⽤ Webpack 4 的话,开启⽣产环境就会⾃动启动这个优化功能。

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录