當(dāng)維護的項目越來越大時，可能修改一下需要好長時間才會構(gòu)建完成，十分的浪費時間，我在網(wǎng)上查了一下webpack優(yōu)化構(gòu)建速度的方案最簡單有效的有兩個，第一個是使用dllplugin，他可以將一些不常改動的文件打包之后就不打包了，直接用就可以了。第二個就是happypack，利用多線程提升構(gòu)建速度。

ng-build-plus

• 首先angular的webpack是不對外暴露的，ng 6之后 ng reject也廢棄了，當(dāng)然社區(qū)里提供了另一個方案。ngx-build-plus可以方便的配置webpack，可以去他的npm倉庫看一下，文檔介紹了這個包對應(yīng)不同的ng版本 ，因為我ng版本是7，于是我ngx-build-plus 也下載了7.0.0。之后將angular.json里的配置文件修改一下

  "serve": {
            //替換原來的配置"builder": "@angular-devkit/build-angular:dev-server",
            "builder": "ngx-build-plus:dev-server",
            "options": {
              "browserTarget": "saas:build"
            },
  }
  

  之后在目錄最外層創(chuàng)建一個webpack.extra.js。之后的配置就可以寫在里面了。ngx-build-plus會將我們添加的webpack配置與內(nèi)置的webpack配置merge。

• 之后再package.json里修改script

   "start": "ng serve ----extraWebpackConfig ./webpack.extra.js"
   
  

配置happypack

• npm i -D Happypack

• 之后在webpack.extra.js添加

  const webpack = require('webpack');
  const path = require('path');
  const HappyPack = require('happypack');
  module.exports = {
      module: {
          rules: [
              {
                  test: /\.ts$/,
                  //把對.js 的文件處理交給id為happyBabel 的HappyPack 的實例執(zhí)行
                  loader: 'happypack/loader?id=happyBabel',
                }
          ]
      },
      plugins: [
          new HappyPack({
              //用id來標(biāo)識 happypack處理那里類文件
            id: 'happyBabel',
            //如何處理  用法和loader 的配置一樣
            use: [
              {
                path: 'ts-loader',
                query: {
                  happyPackMode: true,
                  //configFile: e.resolve(module, 'tsconfig.json')
                }
  
              }
            ],
            //線程數(shù)推薦為4
            threads:4
          })
      ]
  }
  
  

• happypack的配置比較簡單，這樣就結(jié)束了

配置dllplugin

• 社區(qū)里很多簡單的第三方配置方法，ng也有一個webpack-dll-ng-module-loader/plugin

  下載之后直接

  const {
      CheatAngularCompilerResourcePlugin 
    } = require("webpack-dll-ng-module-loader/plugin");
  plugins: [  new CheatAngularCompilerResourcePlugin()]
  

使用webpack-bundle-analyzer 查看打包情況

• npm i -D webpack-bundle-analyzer

  let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
   plugins: [
  //性能分析
          // new BundleAnalyzerPlugin({
          //     //  可以是`server`，`static`或`disabled`。
          //     //  在`server`模式下，分析器將啟動HTTP服務(wù)器來顯示軟件包報告。
          //     //  在“靜態(tài)”模式下，會生成帶有報告的單個HTML文件。
          //     //  在`disabled`模式下，你可以使用這個插件來將`generateStatsFile`設(shè)置為`true`來生成Webpack Stats JSON文件。
          //     analyzerMode: 'server',
          //     //  將在“服務(wù)器”模式下使用的主機啟動HTTP服務(wù)器。
          //     analyzerHost: '127.0.0.1',
          //     //  將在“服務(wù)器”模式下使用的端口啟動HTTP服務(wù)器。
          //     analyzerPort: 8888, 
          //     //  路徑捆綁，將在`static`模式下生成的報告文件。
          //     //  相對于捆綁輸出目錄。
          //     reportFilename: 'report.html',
          //     //  模塊大小默認(rèn)顯示在報告中。
          //     //  應(yīng)該是`stat`，`parsed`或者`gzip`中的一個。
          //     //  有關(guān)更多信息，請參見“定義”一節(jié)。
          //     defaultSizes: 'parsed',
          //     //  在默認(rèn)瀏覽器中自動打開報告
          //     openAnalyzer: true,
          //     //  如果為true，則Webpack Stats JSON文件將在bundle輸出目錄中生成
          //     generateStatsFile: false, 
          //     //  如果`generateStatsFile`為`true`，將會生成Webpack Stats JSON文件的名字。
          //     //  相對于捆綁輸出目錄。
          //     statsFilename: 'stats.json',
          //     //  stats.toJson（）方法的選項。
          //     //  例如，您可以使用`source：false`選項排除統(tǒng)計文件中模塊的來源。
          //     //  在這里查看更多選項：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
          //     statsOptions: null,
          //     logLevel: 'info' // 日志級別。可以是'信息'，'警告'，'錯誤'或'沉默'。
          //   }),
  ]
  

• 之后直接運行他還會打開一個8888端口的網(wǎng)頁圖形化顯示打包狀況，這里我就不貼圖了

當(dāng)然在我搜索如何提升打包效率的時候知乎大佬直接推薦最近很火的snowpack以及vue3.0將推出的vite。